Do some toast notificating

1 files changed, 26 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);
+}