notification fixes

- goes away when starting timer
- goes away after 120 seconds

closes #12

Author: beeequeue

src/state/actions/timerActions.ts

@@ -6,6 +6,7 @@ export const START_TIMER = 'START_TIMER'
 export const STOP_TIMER = 'STOP_TIMER'
 export const COUNT_DOWN_ONE_SECOND = 'COUNT_DOWN_ONE_SECOND'
 export const COUNT_DOWN_FINISHED = 'COUNT_DOWN_FINISHED'
+export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'
 
 export type Actions = {
   readonly SET_TIME: {
@@ -24,6 +25,10 @@ export type Actions = {
   readonly COUNT_DOWN_FINISHED: {
     type: typeof COUNT_DOWN_FINISHED
   }
+  readonly ADD_NOTIFICATION: {
+    type: typeof ADD_NOTIFICATION
+    payload: Notification
+  }
 }
 
 export type RootAction = Actions[keyof Actions]
@@ -48,3 +53,10 @@ export const countDownOneSecond = (): Actions[typeof COUNT_DOWN_ONE_SECOND] => (
 export const countDownFinished = (): Actions[typeof COUNT_DOWN_FINISHED] => ({
   type: COUNT_DOWN_FINISHED,
 })
+
+export const addNotification = (
+  notification: Notification
+): Actions[typeof ADD_NOTIFICATION] => ({
+  type: ADD_NOTIFICATION,
+  payload: notification,
+})

src/state/epics/timerEpics.ts

@@ -11,6 +11,7 @@ import {
   stopTimer,
   countDownOneSecond,
   countDownFinished,
+  addNotification,
 } from '@state/actions/timerActions'
 import { setActiveNext } from '@state/actions/usersActions'
 import { notify } from '../../utils/notifications'
@@ -51,19 +52,19 @@ export const alertEpic = (
 ) =>
   action$
     .ofType(COUNT_DOWN_FINISHED)
-    .do(() => {
+    .flatMap((): any => {
       const state = store.getState().users
 
-      notify("Time's up!", {
-        body: `${state.list[state.activeUser]} is up next!`,
-        badge: timer,
-        icon: timer,
-        vibrate: [2000, 2000, 2000],
-      })
-
-      alert(`Time's up!\n${state.list[state.activeUser]} is up next!`)
+      return [
+        notify("Time's up!", {
+          body: `${state.list[state.activeUser]} is up next!`,
+          badge: timer,
+          icon: timer,
+          vibrate: [2000, 2000, 2000],
+        }),
+      ]
     })
-    .ignoreElements()
+    .mergeMap(n => [addNotification(n as any)])
 
 export const timerEpics = combineEpics(
   startTimerEpic,

src/state/reducers/timerReducers.ts

@@ -5,19 +5,22 @@ import {
   COUNT_DOWN_ONE_SECOND,
   START_TIMER,
   STOP_TIMER,
+  ADD_NOTIFICATION,
 } from '@state/actions/timerActions'
 import { Time } from '../../time'
 
 export type IStateTimer = {
   readonly counting: boolean
   readonly timeLeft: Time
   readonly duration: Time
+  readonly notifications: ReadonlyArray<Notification>
 }
 
 const initialState: IStateTimer = {
   counting: false,
   timeLeft: new Time(),
   duration: new Time(),
+  notifications: [],
 }
 
 const cachedSettings = JSON.parse(
@@ -37,7 +40,7 @@ if (cachedSettings) {
 }
 
 export const timerReducers = (
-  state = Object.assign({}, initialState, cachedSettings),
+  state: IStateTimer = Object.assign({}, initialState, cachedSettings),
   action: RootAction
 ) => {
   switch (action.type) {
@@ -50,10 +53,13 @@ export const timerReducers = (
       })
 
     case START_TIMER:
+      state.notifications.forEach(notification => notification.close())
+
       return Object.assign({}, state, {
         timeLeft:
           state.timeLeft.toSeconds() !== 0 ? state.timeLeft : state.duration,
         counting: true,
+        notifications: [],
       })
 
     case STOP_TIMER:
@@ -66,6 +72,11 @@ export const timerReducers = (
         timeLeft: state.timeLeft.reduceByOneSecond(),
       })
 
+    case ADD_NOTIFICATION:
+      return Object.assign({}, state, {
+        notifications: [action.payload, ...state.notifications],
+      })
+
     default:
       return state
   }

src/utils/notifications.ts

@@ -9,6 +9,7 @@ interface INotificationOptions {
   lang?: string
   tag?: string
   vibrate?: number[]
+  onClose?: (e: Event) => any
 }
 
 export function requestPermission() {
@@ -18,11 +19,19 @@ export function requestPermission() {
 }
 
 export function notify(title: string, options?: INotificationOptions) {
-  if (!('Notification' in window)) return
+  const notification = new Notification(title, options)
 
-  if ((Notification as any).permission !== 'granted') return
+  notification.onclick = e => {
+    notification.close()
+  }
 
-  const notification = new Notification(title, options)
+  notification.onclose = e => {
+    if (!options || typeof options.onClose !== 'function') return
+
+    options.onClose(e)
+  }
+
+  setTimeout(() => notification.close(), 120 * 1000)
 
-  setTimeout(notification.close, 15 * 1000)
+  return notification
 }