Show notification on received message

ui/src/index.js

@@ -4,6 +4,7 @@ import Layout from './Layout';
 import registerServiceWorker from './registerServiceWorker';
 import {checkIfAlreadyLoggedIn} from './actions/defaultAxios';
 import config from 'react-global-configuration';
+import * as Notifications from './stores/Notifications';
 import 'typeface-roboto';
 import 'typeface-roboto-mono';
 
@@ -21,6 +22,8 @@ const defaultProdConfig = {
 };
 
 (function clientJS() {
+    Notifications.requestPermission();
+
     if (process.env.NODE_ENV === 'production') {
         config.set(window.config || defaultProdConfig);
     } else {

ui/src/stores/Notifications.js

@@ -0,0 +1,38 @@
+import dispatcher from './dispatcher';
+import Notify from 'notifyjs';
+
+export function requestPermission() {
+    if (Notify.needsPermission && Notify.isSupported()) {
+        Notify.requestPermission(() => console.log('granted notification permissions'),
+            () => console.log('notification permission denied'));
+    }
+}
+
+function closeAndFocus(event) {
+    if (window.parent) {
+        window.parent.focus();
+    }
+    window.focus();
+    window.location.href = '/';
+    event.target.close();
+}
+
+function closeAfterTimeout(event) {
+    setTimeout(() => {
+        event.target.close();
+    }, 5000);
+}
+
+dispatcher.register((data) => {
+    if (data.type === 'ONE_MESSAGE') {
+        const msg = data.payload;
+
+        const notify = new Notify(msg.title, {
+            body: msg.message,
+            icon: '/static/favicon.ico',
+            notifyClick: closeAndFocus,
+            notifyShow: closeAfterTimeout,
+        });
+        notify.show();
+    }
+});