From ccb5e05e3ea0c6e2d34f60edacdd5d985f404045 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 6 Mar 2024 18:17:35 -0700
Subject: [PATCH] Cleanup overlay state with types and use overlay for severity
 (#10299)

---
 web/src/hooks/use-overlay-state.tsx | 11 ++++++-----
 web/src/pages/Events.tsx            |  7 +++++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx
index bcdc2144d..5f39c6311 100644
--- a/web/src/hooks/use-overlay-state.tsx
+++ b/web/src/hooks/use-overlay-state.tsx
@@ -1,15 +1,16 @@
 import { useCallback, useMemo } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 
-export default function useOverlayState(
+export default function useOverlayState<S extends string>(
   key: string,
-): [string | undefined, (value: string, replace?: boolean) => void] {
+  defaultValue: S | undefined = undefined,
+): [S | undefined, (value: S, replace?: boolean) => void] {
   const location = useLocation();
   const navigate = useNavigate();
   const currentLocationState = location.state;
 
   const setOverlayStateValue = useCallback(
-    (value: string, replace: boolean = false) => {
+    (value: S, replace: boolean = false) => {
       const newLocationState = { ...currentLocationState };
       newLocationState[key] = value;
       navigate(location.pathname, { state: newLocationState, replace });
@@ -19,10 +20,10 @@ export default function useOverlayState(
     [key, navigate],
   );
 
-  const overlayStateValue = useMemo<string | undefined>(
+  const overlayStateValue = useMemo<S | undefined>(
     () => location.state && location.state[key],
     [location, key],
   );
 
-  return [overlayStateValue, setOverlayStateValue];
+  return [overlayStateValue ?? defaultValue, setOverlayStateValue];
 }
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index 18d5781e7..ab45850a7 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -29,7 +29,10 @@ export default function Events() {
 
   // recordings viewer
 
-  const [severity, setSeverity] = useState<ReviewSeverity>("alert");
+  const [severity, setSeverity] = useOverlayState<ReviewSeverity>(
+    "severity",
+    "alert",
+  );
   const [selectedReviewId, setSelectedReviewId] = useOverlayState("review");
 
   // review filter
@@ -339,7 +342,7 @@ export default function Events() {
         reachedEnd={isDone}
         isValidating={isValidating}
         filter={reviewFilter}
-        severity={severity}
+        severity={severity ?? "alert"}
         setSeverity={setSeverity}
         loadNextPage={onLoadNextPage}
         markItemAsReviewed={markItemAsReviewed}