Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Cleanup overlay state with types and use overlay for severity (#10299)

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-06 18:17:35 -07:00 committed by GitHub
parent 3d90f50d84
commit ccb5e05e3e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/hooks/use-overlay-state.tsx
View File

@ -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];
}

7
web/src/pages/Events.tsx
View File

@ -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}