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( 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( + const overlayStateValue = useMemo( () => 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("alert"); + const [severity, setSeverity] = useOverlayState( + "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}