Fix filter args in events

This commit is contained in:
Nicolas Mowen 2024-09-13 06:24:51 -06:00
parent 90c1cc3e3b
commit f35cb39515
3 changed files with 54 additions and 4 deletions

View File

@ -1,6 +1,6 @@
import { Button } from "../ui/button"; import { Button } from "../ui/button";
import { CameraGroupConfig } from "@/types/frigateConfig"; import { CameraGroupConfig } from "@/types/frigateConfig";
import { useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { import {
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
@ -53,6 +53,20 @@ export function CamerasFilterButton({
}`; }`;
}, [allCamerasSelected, currentCameras]); }, [allCamerasSelected, currentCameras]);
// ui
useEffect(
() => {
setCurrentCameras(
selectedCameras === undefined ? [...allCameras] : selectedCameras,
);
setAllCamerasSelected(selectedCameras === undefined);
},
// only refresh when state changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[selectedCameras],
);
const trigger = ( const trigger = (
<Button <Button
className="flex items-center gap-2 capitalize" className="flex items-center gap-2 capitalize"

View File

@ -2,7 +2,7 @@ import { Button } from "../ui/button";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover"; import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import { useCallback, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { DropdownMenuSeparator } from "../ui/dropdown-menu"; import { DropdownMenuSeparator } from "../ui/dropdown-menu";
import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review"; import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
import { getEndOfDayTimestamp } from "@/utils/dateUtil"; import { getEndOfDayTimestamp } from "@/utils/dateUtil";
@ -321,6 +321,18 @@ function GeneralFilterButton({
selectedZones, selectedZones,
); );
// ui
useEffect(
() => {
setCurrentLabels(selectedLabels);
setCurrentZones(selectedZones);
},
// only refresh when state changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[selectedLabels, selectedZones],
);
const trigger = ( const trigger = (
<Button <Button
size="sm" size="sm"

View File

@ -1,5 +1,5 @@
import ActivityIndicator from "@/components/indicators/activity-indicator"; import ActivityIndicator from "@/components/indicators/activity-indicator";
import { useApiFilterArgs } from "@/hooks/use-api-filter"; import useApiFilter from "@/hooks/use-api-filter";
import { useCameraPreviews } from "@/hooks/use-camera-previews"; import { useCameraPreviews } from "@/hooks/use-camera-previews";
import { useTimezone } from "@/hooks/use-date-utils"; import { useTimezone } from "@/hooks/use-date-utils";
import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state"; import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
@ -71,7 +71,31 @@ export default function Events() {
// review filter // review filter
const [reviewFilter, setReviewFilter, reviewSearchParams] = const [reviewFilter, setReviewFilter, reviewSearchParams] =
useApiFilterArgs<ReviewFilter>(); useApiFilter<ReviewFilter>();
useSearchEffect("cameras", (cameras: string) => {
setReviewFilter({
...reviewFilter,
cameras: cameras.includes(",") ? cameras.split(",") : [cameras],
});
return true;
});
useSearchEffect("labels", (labels: string) => {
setReviewFilter({
...reviewFilter,
labels: labels.includes(",") ? labels.split(",") : [labels],
});
return true;
});
useSearchEffect("zones", (zones: string) => {
setReviewFilter({
...reviewFilter,
zones: zones.includes(",") ? zones.split(",") : [zones],
});
return true;
});
useSearchEffect("group", (reviewGroup) => { useSearchEffect("group", (reviewGroup) => {
if (config && reviewGroup && reviewGroup != "default") { if (config && reviewGroup && reviewGroup != "default") {