mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 16:38:24 -06:00
Refactor general review filter to only call the update function once (#14866)
This commit is contained in:
parent
46ed520886
commit
ae30ac6e3c
@ -14,7 +14,7 @@ import MobileReviewSettingsDrawer, {
|
||||
} from "../overlay/MobileReviewSettingsDrawer";
|
||||
import useOptimisticState from "@/hooks/use-optimistic-state";
|
||||
import FilterSwitch from "./FilterSwitch";
|
||||
import { FilterList } from "@/types/filter";
|
||||
import { FilterList, GeneralFilter } from "@/types/filter";
|
||||
import CalendarFilterButton from "./CalendarFilterButton";
|
||||
import { CamerasFilterButton } from "./CamerasFilterButton";
|
||||
import PlatformAwareDialog from "../overlay/dialog/PlatformAwareDialog";
|
||||
@ -214,15 +214,7 @@ export default function ReviewFilterGroup({
|
||||
showAll={filter?.showAll == true}
|
||||
allZones={filterValues.zones}
|
||||
selectedZones={filter?.zones}
|
||||
setShowAll={(showAll) => {
|
||||
onUpdateFilter({ ...filter, showAll });
|
||||
}}
|
||||
updateLabelFilter={(newLabels) => {
|
||||
onUpdateFilter({ ...filter, labels: newLabels });
|
||||
}}
|
||||
updateZoneFilter={(newZones) =>
|
||||
onUpdateFilter({ ...filter, zones: newZones })
|
||||
}
|
||||
onUpdateFilter={onUpdateFilter}
|
||||
/>
|
||||
)}
|
||||
{isMobile && mobileSettingsFeatures.length > 0 && (
|
||||
@ -300,37 +292,40 @@ type GeneralFilterButtonProps = {
|
||||
showAll: boolean;
|
||||
allZones: string[];
|
||||
selectedZones?: string[];
|
||||
setShowAll: (showAll: boolean) => void;
|
||||
updateLabelFilter: (labels: string[] | undefined) => void;
|
||||
updateZoneFilter: (zones: string[] | undefined) => void;
|
||||
filter?: GeneralFilter;
|
||||
onUpdateFilter: (filter: ReviewFilter) => void;
|
||||
};
|
||||
|
||||
function GeneralFilterButton({
|
||||
allLabels,
|
||||
selectedLabels,
|
||||
filter,
|
||||
currentSeverity,
|
||||
showAll,
|
||||
allZones,
|
||||
selectedZones,
|
||||
setShowAll,
|
||||
updateLabelFilter,
|
||||
updateZoneFilter,
|
||||
onUpdateFilter,
|
||||
}: GeneralFilterButtonProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
|
||||
selectedLabels,
|
||||
);
|
||||
const [currentZones, setCurrentZones] = useState<string[] | undefined>(
|
||||
selectedZones,
|
||||
);
|
||||
const [currentFilter, setCurrentFilter] = useState<GeneralFilter>({
|
||||
labels: selectedLabels,
|
||||
zones: selectedZones,
|
||||
showAll: showAll,
|
||||
...filter,
|
||||
});
|
||||
|
||||
// ui
|
||||
// Update local state when props change
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentLabels(selectedLabels);
|
||||
setCurrentZones(selectedZones);
|
||||
setCurrentFilter({
|
||||
labels: selectedLabels,
|
||||
zones: selectedZones,
|
||||
showAll: showAll,
|
||||
...filter,
|
||||
});
|
||||
// only refresh when state changes
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [selectedLabels, selectedZones]);
|
||||
}, [selectedLabels, selectedZones, showAll, filter]);
|
||||
|
||||
const trigger = (
|
||||
<Button
|
||||
@ -342,10 +337,18 @@ function GeneralFilterButton({
|
||||
aria-label="Filter"
|
||||
>
|
||||
<FaFilter
|
||||
className={`${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
|
||||
className={`${
|
||||
selectedLabels?.length || selectedZones?.length
|
||||
? "text-selected-foreground"
|
||||
: "text-secondary-foreground"
|
||||
}`}
|
||||
/>
|
||||
<div
|
||||
className={`hidden md:block ${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-primary"}`}
|
||||
className={`hidden md:block ${
|
||||
selectedLabels?.length || selectedZones?.length
|
||||
? "text-selected-foreground"
|
||||
: "text-primary"
|
||||
}`}
|
||||
>
|
||||
Filter
|
||||
</div>
|
||||
@ -355,17 +358,22 @@ function GeneralFilterButton({
|
||||
<GeneralFilterContent
|
||||
allLabels={allLabels}
|
||||
selectedLabels={selectedLabels}
|
||||
currentLabels={currentLabels}
|
||||
currentSeverity={currentSeverity}
|
||||
showAll={showAll}
|
||||
allZones={allZones}
|
||||
filter={currentFilter}
|
||||
selectedZones={selectedZones}
|
||||
currentZones={currentZones}
|
||||
setCurrentZones={setCurrentZones}
|
||||
updateZoneFilter={updateZoneFilter}
|
||||
setShowAll={setShowAll}
|
||||
updateLabelFilter={updateLabelFilter}
|
||||
setCurrentLabels={setCurrentLabels}
|
||||
onUpdateFilter={setCurrentFilter}
|
||||
onApply={() => {
|
||||
if (currentFilter !== filter) {
|
||||
onUpdateFilter(currentFilter);
|
||||
}
|
||||
setOpen(false);
|
||||
}}
|
||||
onReset={() => {
|
||||
const resetFilter: GeneralFilter = {};
|
||||
setCurrentFilter(resetFilter);
|
||||
onUpdateFilter(resetFilter);
|
||||
}}
|
||||
onClose={() => setOpen(false)}
|
||||
/>
|
||||
);
|
||||
@ -377,7 +385,12 @@ function GeneralFilterButton({
|
||||
open={open}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setCurrentLabels(selectedLabels);
|
||||
setCurrentFilter({
|
||||
labels: selectedLabels,
|
||||
zones: selectedZones,
|
||||
showAll: showAll,
|
||||
...filter,
|
||||
});
|
||||
}
|
||||
|
||||
setOpen(open);
|
||||
@ -388,54 +401,50 @@ function GeneralFilterButton({
|
||||
|
||||
type GeneralFilterContentProps = {
|
||||
allLabels: string[];
|
||||
selectedLabels: string[] | undefined;
|
||||
currentLabels: string[] | undefined;
|
||||
allZones: string[];
|
||||
currentSeverity?: ReviewSeverity;
|
||||
showAll?: boolean;
|
||||
allZones?: string[];
|
||||
filter: GeneralFilter;
|
||||
selectedLabels?: string[];
|
||||
selectedZones?: string[];
|
||||
currentZones?: string[];
|
||||
setShowAll?: (showAll: boolean) => void;
|
||||
updateLabelFilter: (labels: string[] | undefined) => void;
|
||||
setCurrentLabels: (labels: string[] | undefined) => void;
|
||||
updateZoneFilter?: (zones: string[] | undefined) => void;
|
||||
setCurrentZones?: (zones: string[] | undefined) => void;
|
||||
onUpdateFilter: (filter: GeneralFilter) => void;
|
||||
onApply: () => void;
|
||||
onReset: () => void;
|
||||
onClose: () => void;
|
||||
};
|
||||
export function GeneralFilterContent({
|
||||
allLabels,
|
||||
selectedLabels,
|
||||
currentLabels,
|
||||
currentSeverity,
|
||||
showAll,
|
||||
allZones,
|
||||
selectedZones,
|
||||
currentZones,
|
||||
setShowAll,
|
||||
updateLabelFilter,
|
||||
setCurrentLabels,
|
||||
updateZoneFilter,
|
||||
setCurrentZones,
|
||||
currentSeverity,
|
||||
filter,
|
||||
onUpdateFilter,
|
||||
onApply,
|
||||
onReset,
|
||||
onClose,
|
||||
}: GeneralFilterContentProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="scrollbar-container h-auto max-h-[80dvh] overflow-y-auto overflow-x-hidden">
|
||||
{currentSeverity && setShowAll && (
|
||||
{currentSeverity && (
|
||||
<div className="my-2.5 flex flex-col gap-2.5">
|
||||
<FilterSwitch
|
||||
label="Alerts"
|
||||
disabled={currentSeverity == "alert"}
|
||||
isChecked={currentSeverity == "alert" ? true : showAll == true}
|
||||
onCheckedChange={setShowAll}
|
||||
isChecked={
|
||||
currentSeverity == "alert" ? true : filter.showAll === true
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
onUpdateFilter({ ...filter, showAll: checked })
|
||||
}
|
||||
/>
|
||||
<FilterSwitch
|
||||
label="Detections"
|
||||
disabled={currentSeverity == "detection"}
|
||||
isChecked={
|
||||
currentSeverity == "detection" ? true : showAll == true
|
||||
currentSeverity == "detection" ? true : filter.showAll === true
|
||||
}
|
||||
onCheckedChange={(checked) =>
|
||||
onUpdateFilter({ ...filter, showAll: checked })
|
||||
}
|
||||
onCheckedChange={setShowAll}
|
||||
/>
|
||||
<DropdownMenuSeparator />
|
||||
</div>
|
||||
@ -450,10 +459,11 @@ export function GeneralFilterContent({
|
||||
<Switch
|
||||
className="ml-1"
|
||||
id="allLabels"
|
||||
checked={currentLabels == undefined}
|
||||
checked={filter.labels === undefined}
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
setCurrentLabels(undefined);
|
||||
const { labels: _labels, ...rest } = filter;
|
||||
onUpdateFilter(rest);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -463,20 +473,19 @@ export function GeneralFilterContent({
|
||||
<FilterSwitch
|
||||
key={item}
|
||||
label={item.replaceAll("_", " ")}
|
||||
isChecked={currentLabels?.includes(item) ?? false}
|
||||
isChecked={filter.labels?.includes(item) ?? false}
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
const updatedLabels = currentLabels ? [...currentLabels] : [];
|
||||
|
||||
const updatedLabels = filter.labels ? [...filter.labels] : [];
|
||||
updatedLabels.push(item);
|
||||
setCurrentLabels(updatedLabels);
|
||||
onUpdateFilter({ ...filter, labels: updatedLabels });
|
||||
} else {
|
||||
const updatedLabels = currentLabels ? [...currentLabels] : [];
|
||||
const updatedLabels = filter.labels ? [...filter.labels] : [];
|
||||
|
||||
// can not deselect the last item
|
||||
if (updatedLabels.length > 1) {
|
||||
updatedLabels.splice(updatedLabels.indexOf(item), 1);
|
||||
setCurrentLabels(updatedLabels);
|
||||
onUpdateFilter({ ...filter, labels: updatedLabels });
|
||||
}
|
||||
}
|
||||
}}
|
||||
@ -484,7 +493,7 @@ export function GeneralFilterContent({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{allZones && setCurrentZones && (
|
||||
{allZones && (
|
||||
<>
|
||||
<DropdownMenuSeparator />
|
||||
<div className="mb-5 mt-2.5 flex items-center justify-between">
|
||||
@ -497,10 +506,11 @@ export function GeneralFilterContent({
|
||||
<Switch
|
||||
className="ml-1"
|
||||
id="allZones"
|
||||
checked={currentZones == undefined}
|
||||
checked={filter.zones === undefined}
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
setCurrentZones(undefined);
|
||||
const { zones: _zones, ...rest } = filter;
|
||||
onUpdateFilter(rest);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
@ -510,24 +520,24 @@ export function GeneralFilterContent({
|
||||
<FilterSwitch
|
||||
key={item}
|
||||
label={item.replaceAll("_", " ")}
|
||||
isChecked={currentZones?.includes(item) ?? false}
|
||||
isChecked={filter.zones?.includes(item) ?? false}
|
||||
onCheckedChange={(isChecked) => {
|
||||
if (isChecked) {
|
||||
const updatedZones = currentZones
|
||||
? [...currentZones]
|
||||
const updatedZones = filter.zones
|
||||
? [...filter.zones]
|
||||
: [];
|
||||
|
||||
updatedZones.push(item);
|
||||
setCurrentZones(updatedZones);
|
||||
onUpdateFilter({ ...filter, zones: updatedZones });
|
||||
} else {
|
||||
const updatedZones = currentZones
|
||||
? [...currentZones]
|
||||
const updatedZones = filter.zones
|
||||
? [...filter.zones]
|
||||
: [];
|
||||
|
||||
// can not deselect the last item
|
||||
if (updatedZones.length > 1) {
|
||||
updatedZones.splice(updatedZones.indexOf(item), 1);
|
||||
setCurrentZones(updatedZones);
|
||||
onUpdateFilter({ ...filter, zones: updatedZones });
|
||||
}
|
||||
}
|
||||
}}
|
||||
@ -543,27 +553,13 @@ export function GeneralFilterContent({
|
||||
aria-label="Apply"
|
||||
variant="select"
|
||||
onClick={() => {
|
||||
if (selectedLabels != currentLabels) {
|
||||
updateLabelFilter(currentLabels);
|
||||
}
|
||||
|
||||
if (updateZoneFilter && selectedZones != currentZones) {
|
||||
updateZoneFilter(currentZones);
|
||||
}
|
||||
|
||||
onApply();
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
<Button
|
||||
aria-label="Reset"
|
||||
onClick={() => {
|
||||
setCurrentLabels(undefined);
|
||||
setCurrentZones?.(undefined);
|
||||
updateLabelFilter(undefined);
|
||||
}}
|
||||
>
|
||||
<Button aria-label="Reset" onClick={onReset}>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
|
@ -4,7 +4,7 @@ import { Button } from "../ui/button";
|
||||
import { FaArrowDown, FaCalendarAlt, FaCog, FaFilter } from "react-icons/fa";
|
||||
import { TimeRange } from "@/types/timeline";
|
||||
import { ExportContent, ExportPreviewDialog } from "./ExportDialog";
|
||||
import { ExportMode } from "@/types/filter";
|
||||
import { ExportMode, GeneralFilter } from "@/types/filter";
|
||||
import ReviewActivityCalendar from "./ReviewActivityCalendar";
|
||||
import { SelectSeparator } from "../ui/select";
|
||||
import { ReviewFilter, ReviewSeverity, ReviewSummary } from "@/types/review";
|
||||
@ -114,12 +114,12 @@ export default function MobileReviewSettingsDrawer({
|
||||
|
||||
// filters
|
||||
|
||||
const [currentLabels, setCurrentLabels] = useState<string[] | undefined>(
|
||||
filter?.labels,
|
||||
);
|
||||
const [currentZones, setCurrentZones] = useState<string[] | undefined>(
|
||||
filter?.zones,
|
||||
);
|
||||
const [currentFilter, setCurrentFilter] = useState<GeneralFilter>({
|
||||
labels: filter?.labels,
|
||||
zones: filter?.zones,
|
||||
showAll: filter?.showAll,
|
||||
...filter,
|
||||
});
|
||||
|
||||
if (!isMobile) {
|
||||
return;
|
||||
@ -260,23 +260,21 @@ export default function MobileReviewSettingsDrawer({
|
||||
<GeneralFilterContent
|
||||
allLabels={allLabels}
|
||||
selectedLabels={filter?.labels}
|
||||
currentLabels={currentLabels}
|
||||
currentSeverity={currentSeverity}
|
||||
showAll={filter?.showAll == true}
|
||||
allZones={allZones}
|
||||
filter={currentFilter}
|
||||
selectedZones={filter?.zones}
|
||||
currentZones={currentZones}
|
||||
setCurrentZones={setCurrentZones}
|
||||
updateZoneFilter={(newZones) =>
|
||||
onUpdateFilter({ ...filter, zones: newZones })
|
||||
}
|
||||
setShowAll={(showAll) => {
|
||||
onUpdateFilter({ ...filter, showAll });
|
||||
onUpdateFilter={setCurrentFilter}
|
||||
onApply={() => {
|
||||
if (currentFilter !== filter) {
|
||||
onUpdateFilter(currentFilter);
|
||||
}
|
||||
}}
|
||||
onReset={() => {
|
||||
const resetFilter: GeneralFilter = {};
|
||||
setCurrentFilter(resetFilter);
|
||||
onUpdateFilter(resetFilter);
|
||||
}}
|
||||
setCurrentLabels={setCurrentLabels}
|
||||
updateLabelFilter={(newLabels) =>
|
||||
onUpdateFilter({ ...filter, labels: newLabels })
|
||||
}
|
||||
onClose={() => setDrawerMode("select")}
|
||||
/>
|
||||
</div>
|
||||
|
@ -10,3 +10,9 @@ export type FilterList = {
|
||||
};
|
||||
|
||||
export const LAST_24_HOURS_KEY = "last24Hours";
|
||||
|
||||
export type GeneralFilter = {
|
||||
showAll?: boolean;
|
||||
labels?: string[];
|
||||
zones?: string[];
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user