client: Read preferences (#33)

Author: mikol

src/v2/components/PotentialFireList.jsx

@@ -17,9 +17,7 @@
 // TODO:
 //   - Handle updates to existing fires.
 //   - Handle fires aging out (on a timer?).
-//   - Implement user preferences.
-//   - Implement search params.
-//   - Implement notifications.
+//   - Write user preferences.
 //   - Implement camera ID pinning.
 //   - Implement adaptive/mobile version.
 
@@ -33,6 +31,7 @@ import getEventSource from '../modules/getEventSource.mjs'
 import hasAngleOfFire from '../modules/hasAngleOfFire.mjs'
 import isPolygonWithinRegion from '../modules/isPolygonWithinRegion.mjs'
 import parseRegion from '../modules/parseRegion.mjs'
+import query from '../modules/query.mjs'
 
 import FireList from './FireList.jsx'
 
@@ -156,7 +155,7 @@ export default function PotentialFireList(props) {
       return window.location.reload()
     }
 
-    const {current: allFires} = allFiresRef
+    const {current: allFires} = allFiresRefx
     const {current: firesByKey} = firesByKeyRef
     const key = getCameraKey(fire)
 
@@ -186,24 +185,47 @@ export default function PotentialFireList(props) {
   }, [handleNotification, includesAllFires, region, updateFires])
 
   useEffect(() => {
-    const searchParams = new URLSearchParams(window.location.search)
-    const notifyParam = searchParams.get('notify')
-    const regionParam = searchParams.get('latLong')
+    // NOTE: We expect /api/getPreferences to 401 so we set `prefs` if the
+    // request is successful, but ignore it otherwise.
+    let prefs
+    query.get('/api/getPreferences').then((r) => (prefs = r.data)).finally(() => {
+      const searchParams = new URLSearchParams(window.location.search)
+      const notifyParam = searchParams.get('notify')
+      const regionParam = searchParams.get('latLong')
+      const nextState = {region: null, shouldNotify: null}
+
+      if (regionParam != null) {
+        try {
+          nextState.region = parseRegion(regionParam)
+        } catch (error) {
+          report(error)
+        }
+      }
 
-    if (notifyParam != null) {
-      if (/true|false/.test(notifyParam)) {
-        setShouldNotify(notifyParam === 'true')
+      if (notifyParam != null) {
+        if (/true|false/.test(notifyParam)) {
+          nextState.shouldNotify = notifyParam === 'true'
+        }
       }
-    }
 
-    if (regionParam != null) {
-      try {
-        setRegion(parseRegion(regionParam))
-      } catch (error) {
-        report(error)
-        setRegion(null)
+      if (prefs != null) {
+        if (nextState.region == null) {
+          nextState.region = {
+            north: prefs.region.topLat,
+            south: prefs.region.bottomLat,
+            west: prefs.region.leftLong,
+            east: prefs.region.rightLong
+          }
+        }
+
+        if (nextState.shouldNotify == null) {
+          nextState.shouldNotify = prefs.webNotify
+        }
       }
-    }
+
+      setRegion(nextState.region)
+      setShouldNotify(nextState.shouldNotify)
+    })
   }, [])
 
   useEffect(() => {