Use hash state for system pages

This commit is contained in:
Nicolas Mowen 2024-04-28 15:27:28 -06:00
parent 8c610bea49
commit 7e98d8c687

View File

@ -11,6 +11,7 @@ import { FaVideo } from "react-icons/fa";
import Logo from "@/components/Logo";
import useOptimisticState from "@/hooks/use-optimistic-state";
import CameraMetrics from "@/views/system/CameraMetrics";
import { useHashState } from "@/hooks/use-overlay-state";
const metrics = ["general", "storage", "cameras"] as const;
type SystemMetric = (typeof metrics)[number];
@ -18,12 +19,18 @@ type SystemMetric = (typeof metrics)[number];
function System() {
// stats page
const [page, setPage] = useState<SystemMetric>("general");
const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
const [page, setPage] = useHashState<SystemMetric>();
const [pageToggle, setPageToggle] = useOptimisticState(
page ?? "general",
setPage,
100,
);
const [lastUpdated, setLastUpdated] = useState<number>(Date.now() / 1000);
useEffect(() => {
if (pageToggle) {
document.title = `${pageToggle[0].toUpperCase()}${pageToggle.substring(1)} Stats - Frigate`;
}
}, [pageToggle]);
// stats collection