diff --git a/ui/src/index.js b/ui/src/index.js index 8ee14a5..2e09a4a 100644 --- a/ui/src/index.js +++ b/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 { diff --git a/ui/src/stores/Notifications.js b/ui/src/stores/Notifications.js new file mode 100644 index 0000000..1e8edf3 --- /dev/null +++ b/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(); + } +});