Migrate browser notifications to new structure

ui/src/index.tsx

@@ -6,7 +6,7 @@ import {initAxios} from './actions/axios';
 import * as config from './config';
 import Layout from './layout/Layout';
 import registerServiceWorker from './registerServiceWorker';
-import * as Notifications from './stores/Notifications';
+import * as Notifications from './snack/browserNotification';
 import {CurrentUser} from './CurrentUser';
 import {AppStore} from './application/AppStore';
 import {reaction} from 'mobx';
@@ -44,7 +44,7 @@ const initStores = (): StoreMapping => {
     const messagesStore = new MessagesStore(appStore, snackManager.snack);
     const currentUser = new CurrentUser(snackManager.snack);
     const clientStore = new ClientStore(snackManager.snack);
-    const wsStore = new WebSocketStore(snackManager.snack, currentUser, messagesStore);
+    const wsStore = new WebSocketStore(snackManager.snack, currentUser);
 
     return {
         appStore,
@@ -71,7 +71,10 @@ const initStores = (): StoreMapping => {
         () => stores.currentUser.loggedIn,
         (loggedIn) => {
             if (loggedIn) {
-                stores.wsStore.listen();
+                stores.wsStore.listen((message) => {
+                    stores.messagesStore.publishSingleMessage(message);
+                    Notifications.notifyNewMessage(message);
+                });
             } else {
                 stores.wsStore.close();
             }

ui/src/message/WebSocketStore.ts

@@ -1,7 +1,6 @@
 import {SnackReporter} from '../snack/SnackManager';
 import {CurrentUser} from '../CurrentUser';
 import * as config from '../config';
-import {MessagesStore} from './MessagesStore';
 
 export class WebSocketStore {
     private wsActive = false;
@@ -9,11 +8,10 @@ export class WebSocketStore {
 
     public constructor(
         private readonly snack: SnackReporter,
-        private readonly currentUser: CurrentUser,
-        private readonly messagesStore: MessagesStore
+        private readonly currentUser: CurrentUser
     ) {}
 
-    public listen = () => {
+    public listen = (callback: (msg: IMessage) => void) => {
         if (!this.currentUser.token() || this.wsActive) {
             return;
         }
@@ -30,7 +28,7 @@ export class WebSocketStore {
             console.log('WebSocket connection errored', e);
         };
 
-        ws.onmessage = (data) => this.messagesStore.publishSingleMessage(JSON.parse(data.data));
+        ws.onmessage = (data) => callback(JSON.parse(data.data));
 
         ws.onclose = () => {
             this.wsActive = false;

ui/src/snack/browserNotification.ts

@@ -1,5 +1,4 @@
 import Notify from 'notifyjs';
-import dispatcher, {IEvent} from './dispatcher';
 
 export function requestPermission() {
     if (Notify.needsPermission && Notify.isSupported()) {
@@ -10,6 +9,16 @@ export function requestPermission() {
     }
 }
 
+export function notifyNewMessage(msg: IMessage) {
+    const notify = new Notify(msg.title, {
+        body: msg.message,
+        icon: msg.image,
+        notifyClick: closeAndFocus,
+        notifyShow: closeAfterTimeout,
+    });
+    notify.show();
+}
+
 function closeAndFocus(event: Event) {
     if (window.parent) {
         window.parent.focus();
@@ -26,19 +35,3 @@ function closeAfterTimeout(event: Event) {
         target.close();
     }, 5000);
 }
-
-dispatcher.register(
-    (data: IEvent): void => {
-        if (data.type === 'ONE_MESSAGE') {
-            const msg = data.payload;
-
-            const notify = new Notify(msg.title, {
-                body: msg.message,
-                icon: msg.image,
-                notifyClick: closeAndFocus,
-                notifyShow: closeAfterTimeout,
-            });
-            notify.show();
-        }
-    }
-);