diff --git a/ui/src/index.tsx b/ui/src/index.tsx index a52d262..ede10ec 100644 --- a/ui/src/index.tsx +++ b/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(); } diff --git a/ui/src/message/WebSocketStore.ts b/ui/src/message/WebSocketStore.ts index 2ee2408..89501e8 100644 --- a/ui/src/message/WebSocketStore.ts +++ b/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; diff --git a/ui/src/stores/Notifications.ts b/ui/src/snack/browserNotification.ts similarity index 60% rename from ui/src/stores/Notifications.ts rename to ui/src/snack/browserNotification.ts index f5e65b3..7bdb5b3 100644 --- a/ui/src/stores/Notifications.ts +++ b/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(); - } - } -);