client: Initialize Notification component to track window activity

Author: mikol

src/v2/components/PotentialFireList.jsx

@@ -39,7 +39,9 @@ import FireList from './FireList.jsx'
 const ShouldNotify = {
   MIN_INTERVAL_SECONDS: 30,
   MAX_RECENT_NOTIFICATIONS: 2,
-  MAX_RECENT_SECONDS: 5 * 60
+  MAX_RECENT_SECONDS: 5 * 60,
+  // XXX: Used to instantiate empty Notification to track window activity.
+  NO_NOTIFICATION: {}
 }
 
 const TIMESTAMP_LIMIT = 2 * Duration.HOUR
@@ -60,7 +62,7 @@ export default function PotentialFireList(props) {
   const [indexOfOldFires, setIndexOfOldFires] = useState(-1)
   const [region, setRegion] = useState(null)
   const [shouldNotify, setShouldNotify] = useState(false)
-  const [notification, setNotification] = useState(null)
+  const [notification, setNotification] = useState(ShouldNotify.NO_NOTIFICATION)
 
   const allFiresRef = useRef([])
   const eventSourceRef = useRef()
@@ -79,6 +81,10 @@ export default function PotentialFireList(props) {
   }, [])
 
   const handleNotification = useCallback(() => {
+    if (!shouldNotify) {
+      return setNotification(ShouldNotify.NO_NOTIFICATION)
+    }
+
     const {current: allFires} = allFiresRef
     const fire = allFires[0]
     const {
@@ -97,16 +103,16 @@ export default function PotentialFireList(props) {
     const mru = notifiedFires.length > 0 ? notifiedFires[0].timestamp : 0
 
     // At least MIN_INTERVAL_SECONDS between notifications.
-    if (timestamp - mru > ShouldNotify.MIN_INTERVAL_SECONDS) {
-      return
+    if (timestamp - mru <= ShouldNotify.MIN_INTERVAL_SECONDS) {
+      return setNotification(ShouldNotify.NO_NOTIFICATION)
     }
 
     const timestampLimit = timestamp - ShouldNotify.MAX_RECENT_SECONDS
     const recentlyNotifiedFires = notifiedFires.filter((x) => x.timestamp > timestampLimit)
 
     // At most MAX_RECENT_NOTIFICATIONS every MAX_RECENT_SECONDS.
     if (recentlyNotifiedFires.length >= ShouldNotify.MAX_RECENT_NOTIFICATIONS) {
-      return
+      return setNotification(ShouldNotify.NO_NOTIFICATION)
     }
 
     // -------------------------------------------------------------------------
@@ -122,7 +128,7 @@ export default function PotentialFireList(props) {
         tag: `${timestamp}`
       }
     })
-  }, [])
+  }, [shouldNotify])
 
   const handleToggleAllFires = useCallback(() => {
     const shouldIncludeAllFires = !includesAllFires
@@ -169,15 +175,15 @@ export default function PotentialFireList(props) {
       allFires.sort((a, b) => b.sortId - a.sortId)
 
       const first = allFires[0]
-      if (shouldNotify && first != null && first.isRealTime) {
-        if (first.timestamp === timestamp && first.cameraID === cameraID) {
+      if (first != null) {
+        if (first.isRealTime && first.timestamp === timestamp && first.cameraID === cameraID) {
           handleNotification()
         }
       }
 
       updateFires(includesAllFires)
     }
-  }, [handleNotification, includesAllFires, region, shouldNotify, updateFires])
+  }, [handleNotification, includesAllFires, region, updateFires])
 
   useEffect(() => {
     const searchParams = new URLSearchParams(window.location.search)
@@ -225,7 +231,7 @@ export default function PotentialFireList(props) {
 
   return 0,
   <>
-    { shouldNotify && notification && <Notification disableActiveWindow {...notification}/> }
+    <Notification disableActiveWindow title="" {...notification}/>
     <FireList
       fires={fires}
       firesByKey={firesByKeyRef.current}