add notification on counted down

closes #10

Author: Adam

src/assets/timer.svg

@@ -16,9 +16,12 @@ import 'normalize.css'
 import './index.scss'
 
 import { store, epicMiddleware } from '@state/index'
+import { requestPermission } from './utils/notifications'
 import { App } from './App'
 // import { register as registerSW } from './registerServiceWorker'
 
+requestPermission()
+
 render(
   <Provider store={store}>
     <DnDCProvider backend={HTML5Backend}>

src/index.tsx

@@ -13,6 +13,8 @@ import {
   countDownFinished,
 } from '@state/actions/timerActions'
 import { setActiveNext } from '@state/actions/usersActions'
+import { notify } from '../../utils/notifications'
+import timer from '../../assets/timer.svg'
 
 type startTimerEpicType = ActionsObservable<Actions[typeof START_TIMER]>
 type countDownFinishedEpicType = ActionsObservable<
@@ -51,7 +53,15 @@ export const alertEpic = (
     .ofType(COUNT_DOWN_FINISHED)
     .do(() => {
       const state = store.getState().users
-      alert(`Time's up!\nUp next is ${state.list[state.activeUser]}!`)
+
+      notify("Time's up!", {
+        body: 'Adam is up next!',
+        badge: timer,
+        icon: timer,
+        vibrate: [2000, 2000, 2000],
+      })
+
+      alert(`Time's up!\n${state.list[state.activeUser]} is up next!`)
     })
     .ignoreElements()
 

src/state/epics/timerEpics.ts

@@ -0,0 +1,26 @@
+// Definition according to https://developer.mozilla.org/en-US/docs/Web/API/notification
+interface INotificationOptions {
+  body?: string
+  data?: any
+  dir?: NotificationDirection
+  icon?: string
+  badge?: string
+  image?: string
+  lang?: string
+  tag?: string
+  vibrate?: number[]
+}
+
+export function requestPermission() {
+  Notification.requestPermission()
+}
+
+export function notify(title: string, options?: INotificationOptions) {
+  if (!('Notification' in window)) return
+
+  if ((Notification as any).permission !== 'granted') return
+
+  const notification = new Notification(title, options)
+
+  setTimeout(notification.close, 15 * 1000)
+}