Automatically close resolved notifications (#183)

* Automatically close notifications for answered questions

* Close student notifications when a question is finished/cancelled

* Update CHANGELOG.md

CHANGELOG.md

@@ -11,6 +11,7 @@ with the current date and the next changes should go under a **[Next]** header.
 * Use enter key to submit new question, new course, or new queue. ([@rohinb2](https://github.com/rohinb2) in [#161](https://github.com/illinois/queue/pull/161))
 * Specify which queue is being deleted. ([@james9909](https://github.com/james9909) in [#179](https://github.com/illinois/queue/pull/179))
 * Switch to maintaining our own user sessions outside of Shibboleth. ([@nwalters512](https://github.com/nwalters512) in [#182](https://github.com/illinois/queue/pull/182))
+* Automatically close resolved notifications. ([@james9909](https://github.com/james9909) in [#183](https://github.com/illinois/queue/pull/183))
 
 ## 17 January 2019
 

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,26 +69,43 @@ 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
-    // If question is marked as being answered and it is the student who ask this question
+    const { activeStaff } = state.activeStaff
+    if (isOnDutyStaff(activeStaff, user)) {
+      // Close question creation notification
+      closeNotification(question.queueId, question.id)
+    }
+
     const markedBeingAnswered =
       !state.questions.questions[question.id].beingAnswered &&
       question.beingAnswered
-    if (markedBeingAnswered && user.id === question.askedById) {
-      const name = question.answeredBy.name || question.answeredBy.netid
-      const title = `${name} is answering your question`
+    if (user.id === question.askedById) {
+      const { id, queueId } = question
 
-      const options = {
-        icon: `${baseUrl}/static/notif_icon.png`,
+      // If question is marked as being answered and it is the user who asked this question
+      if (markedBeingAnswered) {
+        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, queueId, id)
+      } else {
+        closeNotification(queueId, id)
       }
-      sendNotificationIfEnabled(title, options)
     }
+  } else if (action.type === DELETE_QUESTION.SUCCESS) {
+    const { questionId, queueId } = action
+    closeNotification(queueId, questionId)
   }
   return next(action)
 }