Do some toast notificating

3 files changed, 48 insertions, 1 deletions

diff --git a/ui/lib/apiServer.js b/ui/lib/apiServer.js
index 5c6e5ef..3e270fc 100644
--- a/ui/lib/apiServer.js
+++ b/ui/lib/apiServer.js
@@ -1,5 +1,6 @@
 import axios from 'axios';
-import { channelsList, logins, messages } from '$lib/store';
+import { get } from 'svelte/store';
+import { currentUser, channelsList, logins, messages } from '$lib/store';
 
 export const apiServer = axios.create({
   baseURL: '/api/',
@@ -115,9 +116,33 @@ function onMessageEvent(data) {
   switch (data.event) {
     case 'sent':
       messages.update((value) => value.addMessage(data.channel, data.id, data.at, data.sender, data.body));
+      displayToast(data); 
       break;
     case 'deleted':
       messages.update((value) => value.deleteMessage(data.id));
       break;
   }
 }
+
+function displayToast(data) {
+  // we use get throughout this as this function is not reactive, and just
+  // needs the values of the stores at a moment in time.
+  const currentUserId = get(currentUser).id;
+  if (currentUserId === data.sender) {
+    return;
+  }
+
+  const senderName = get(logins).get(data.sender);
+  const channelName = get(channelsList).get(data.channel);
+  const title = `${senderName} in ${channelName}`;
+
+  const opts = {
+    body: data.body,
+    tag: title,
+    // TODO: we need to inject the understory/hi icon in a more principled way here:
+    icon: "/ui/lib/assets/logo.png",
+    // TODO: support onclick bringing you to the relevant channel?
+    onclick: null
+  }
+  new Notification(title, opts);
+}
diff --git a/ui/lib/store/channels.js b/ui/lib/store/channels.js
index b57ca7e..6d722c5 100644
--- a/ui/lib/store/channels.js
+++ b/ui/lib/store/channels.js
@@ -1,17 +1,26 @@
 export class Channels {
 	constructor() {
 		this.channels = [];
+    this.channelData = {};
 	}
 
 	setChannels(channels) {
 		this.channels = [...channels];
 		this.sort();
+    this.channelData = channels.reduce(
+      (acc, val) => ({
+        ...acc,
+        [val.id]: val.name,
+      }),
+      {}
+    );
 		return this;
 	}
 
 	addChannel(id, name) {
 		this.channels = [...this.channels, { id, name }];
 		this.sort();
+    this.channelData[id] = name;
 		return this;
 	}
 
@@ -20,9 +29,14 @@ export class Channels {
 		if (channelIndex !== -1) {
 			this.channels.splice(channelIndex, 1);
 		}
+    delete this.channelData[id];
 		return this;
 	}
 
+  get(id) {
+    return this.channelData[id];
+  }
+
 	sort() {
 		this.channels.sort((a, b) => {
 			if (a.name < b.name) {
diff --git a/ui/routes/+layout.svelte b/ui/routes/+layout.svelte
index bc5b781..fbc17ec 100644
--- a/ui/routes/+layout.svelte
+++ b/ui/routes/+layout.svelte
@@ -2,6 +2,8 @@
     import "../app.css";
     import logo from '$lib/assets/logo.png';
 
+    import { onMount } from 'svelte';
+
     import { AppBar } from '@skeletonlabs/skeleton';
     import { showMenu, currentUser } from '$lib/store';
 
@@ -10,6 +12,12 @@
     function toggleMenu() {
         showMenu.update((value) => !value);
     }
+
+    onMount(() => {
+        Notification.requestPermission().then((result) => {
+            console.log(result);
+        });
+    });
 </script>
 
 <div id="app" class="m-0 p-0 h-vh w-full">