Automatically close resolved notifications

src/redux/questionNotificationMiddleware.js

@@ -1,8 +1,14 @@
 /* eslint-env browser */
-import { CREATE_QUESTION, UPDATE_QUESTION } from '../constants/ActionTypes'
+import {
+  CREATE_QUESTION,
+  DELETE_QUESTION,
+  UPDATE_QUESTION,
+} from '../constants/ActionTypes'
 import { baseUrl } from '../util'
 
-function sendNotificationIfEnabled(title, options) {
+const notifications = {}
+
+function sendNotificationIfEnabled(title, options, queueId, questionId) {
   if (
     typeof window !== 'undefined' &&
     window.localStorage &&
@@ -13,11 +19,27 @@ function sendNotificationIfEnabled(title, options) {
       n.onclick = () => {
         window.focus()
         n.close()
+        delete notifications[queueId][questionId]
+      }
+      if (!(queueId in notifications)) {
+        notifications[queueId] = {}
       }
+      notifications[queueId][questionId] = n
     }
   }
 }
 
+function closeNotification(queueId, questionId) {
+  if (!(queueId in notifications)) {
+    return
+  }
+  if (!(questionId in notifications[queueId])) {
+    return
+  }
+  notifications[queueId][questionId].close()
+  delete notifications[queueId][questionId]
+}
+
 function isOnDutyStaff(activeStaff, user) {
   return Object.keys(activeStaff).some(
     key => activeStaff[key].userId === user.id
@@ -34,7 +56,7 @@ export default store => next => action => {
     // On duty staff cannot ask questions, so no need to filter by askedById
     if (isOnDutyStaff(activeStaff, user)) {
       const title = 'New question'
-      const { name, location, queueId } = action.question
+      const { id, name, location, queueId } = action.question
       const queue = state.queues.queues[queueId]
       let body = ''
 
@@ -47,25 +69,37 @@ export default store => next => action => {
       const options = {
         body,
         icon: `${baseUrl}/static/notif_icon.png`,
+        tag: `queue-${queueId}/question-${id}`,
       }
-      sendNotificationIfEnabled(title, options)
+      sendNotificationIfEnabled(title, options, queueId, id)
     }
     // Notification for question being answered by staff to student
     // Note: Only UPDATE_QUESTION action will happen on student's side, but not UPDATE_QUESTION_ANSWERING
   } else if (action.type === UPDATE_QUESTION.SUCCESS) {
     const { question } = action
+    const { activeStaff } = state.activeStaff
     // If question is marked as being answered and it is the student who ask this question
     const markedBeingAnswered =
       !state.questions.questions[question.id].beingAnswered &&
       question.beingAnswered
-    if (markedBeingAnswered && user.id === question.askedById) {
+    if (isOnDutyStaff(activeStaff, user)) {
+      closeNotification(question.queueId, question.id)
+    } else if (markedBeingAnswered && user.id === question.askedById) {
+      const { id, queueId } = question
       const name = question.answeredBy.name || question.answeredBy.netid
       const title = `${name} is answering your question`
 
       const options = {
         icon: `${baseUrl}/static/notif_icon.png`,
+        tag: `queue-${queueId}/question-${id}`,
       }
-      sendNotificationIfEnabled(title, options)
+      sendNotificationIfEnabled(title, options, queueId, id)
+    }
+  } else if (action.type === DELETE_QUESTION.SUCCESS) {
+    const { activeStaff } = state.activeStaff
+    const { questionId, queueId } = action
+    if (isOnDutyStaff(activeStaff, user)) {
+      closeNotification(queueId, questionId)
     }
   }
   return next(action)