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 { useCallback, useMemo } from "react";
import { useLocation, useNavigate } from "react-router-dom"; import { useLocation, useNavigate } from "react-router-dom";
export default function useOverlayState( export default function useOverlayState<S extends string>(
key: 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 location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const currentLocationState = location.state; const currentLocationState = location.state;
const setOverlayStateValue = useCallback( const setOverlayStateValue = useCallback(
(value: string, replace: boolean = false) => { (value: S, replace: boolean = false) => {
const newLocationState = { ...currentLocationState }; const newLocationState = { ...currentLocationState };
newLocationState[key] = value; newLocationState[key] = value;
navigate(location.pathname, { state: newLocationState, replace }); navigate(location.pathname, { state: newLocationState, replace });
@ -19,10 +20,10 @@ export default function useOverlayState(
[key, navigate], [key, navigate],
); );
const overlayStateValue = useMemo<string | undefined>( const overlayStateValue = useMemo<S | undefined>(
() => location.state && location.state[key], () => location.state && location.state[key],
[location, 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 // recordings viewer
const [severity, setSeverity] = useState<ReviewSeverity>("alert"); const [severity, setSeverity] = useOverlayState<ReviewSeverity>(
"severity",
"alert",
);
const [selectedReviewId, setSelectedReviewId] = useOverlayState("review"); const [selectedReviewId, setSelectedReviewId] = useOverlayState("review");
// review filter // review filter
@ -339,7 +342,7 @@ export default function Events() {
reachedEnd={isDone} reachedEnd={isDone}
isValidating={isValidating} isValidating={isValidating}
filter={reviewFilter} filter={reviewFilter}
severity={severity} severity={severity ?? "alert"}
setSeverity={setSeverity} setSeverity={setSeverity}
loadNextPage={onLoadNextPage} loadNextPage={onLoadNextPage}
markItemAsReviewed={markItemAsReviewed} markItemAsReviewed={markItemAsReviewed}