From 1b3aefac7bb7667b751a8b89412d4f6e7c5adbb4 Mon Sep 17 00:00:00 2001 From: Nicolas Mowen Date: Tue, 27 Feb 2024 08:43:32 -0700 Subject: [PATCH] Use component for updating items --- web/src/components/dynamic/NewReviewData.tsx | 67 ++++++++++++++++++++ web/src/pages/Events.tsx | 27 +------- web/src/views/events/DesktopEventView.tsx | 41 +++--------- web/src/views/events/MobileEventView.tsx | 40 ++---------- web/vite.config.ts | 12 ++-- 5 files changed, 90 insertions(+), 97 deletions(-) create mode 100644 web/src/components/dynamic/NewReviewData.tsx diff --git a/web/src/components/dynamic/NewReviewData.tsx b/web/src/components/dynamic/NewReviewData.tsx new file mode 100644 index 000000000..89bb2d467 --- /dev/null +++ b/web/src/components/dynamic/NewReviewData.tsx @@ -0,0 +1,67 @@ +import { useFrigateReviews } from "@/api/ws"; +import { ReviewSeverity } from "@/types/review"; +import { Button } from "../ui/button"; +import { LuRefreshCcw } from "react-icons/lu"; +import { MutableRefObject, useEffect, useState } from "react"; + +type NewReviewDataProps = { + className: string; + contentRef: MutableRefObject; + severity: ReviewSeverity; + pullLatestData: () => void; +}; +export default function NewReviewData({ + className, + contentRef, + severity, + pullLatestData, +}: NewReviewDataProps) { + const { payload: review } = useFrigateReviews(); + + const [reviewId, setReviewId] = useState(""); + const [hasUpdate, setHasUpdate] = useState(false); + + useEffect(() => { + if (!review) { + return; + } + + if (review.type == "end" && review.review.severity == severity) { + setReviewId(review.review.id); + } + }, [review]); + + useEffect(() => { + if (reviewId != "") { + setHasUpdate(true); + } + }, [reviewId]); + + return ( +
+
+ +
+
+ ); +} diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx index 40d71adb1..e7f0b456d 100644 --- a/web/src/pages/Events.tsx +++ b/web/src/pages/Events.tsx @@ -1,4 +1,3 @@ -import { useFrigateReviews } from "@/api/ws"; import useApiFilter from "@/hooks/use-api-filter"; import useOverlayState from "@/hooks/use-overlay-state"; import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review"; @@ -6,7 +5,7 @@ import DesktopEventView from "@/views/events/DesktopEventView"; import DesktopRecordingView from "@/views/events/DesktopRecordingView"; import MobileEventView from "@/views/events/MobileEventView"; import axios from "axios"; -import { useCallback, useEffect, useMemo, useState } from "react"; +import { useCallback, useMemo, useState } from "react"; import { isMobile } from "react-device-detect"; import useSWR from "swr"; import useSWRInfinite from "swr/infinite"; @@ -102,7 +101,7 @@ export default function Events() { const reloadData = useCallback(() => { setSize(1); updateSegments(); - }, []) + }, []); // preview videos @@ -201,24 +200,6 @@ export default function Events() { }; }, [selectedReviewId, reviewPages]); - // review updates - - const { payload: reviewUpdate } = useFrigateReviews(); - const [hasUpdate, setHasUpdate] = useState(false); - useEffect(() => { - if (!reviewUpdate || hasUpdate) { - return; - } - - if ( - reviewUpdate.type == "end" && - reviewUpdate.review.severity == severity - ) { - setHasUpdate(true); - return; - } - }, [reviewUpdate]); - if (selectedData) { return ( void; - setHasUpdate: (hasUpdated: boolean) => void; loadNextPage: () => void; markItemAsReviewed: (reviewId: string) => void; onSelectReview: (reviewId: string) => void; @@ -36,9 +34,7 @@ export default function DesktopEventView({ isValidating, filter, severity, - hasUpdate, setSeverity, - setHasUpdate, loadNextPage, markItemAsReviewed, onSelectReview, @@ -235,33 +231,12 @@ export default function DesktopEventView({ ref={contentRef} className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar" > - {hasUpdate && ( -
-
- -
-
- )} + {reachedEnd && currentItems == null && (
diff --git a/web/src/views/events/MobileEventView.tsx b/web/src/views/events/MobileEventView.tsx index cfdce9bba..187ca398a 100644 --- a/web/src/views/events/MobileEventView.tsx +++ b/web/src/views/events/MobileEventView.tsx @@ -1,11 +1,10 @@ +import NewReviewData from "@/components/dynamic/NewReviewData"; import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer"; import ActivityIndicator from "@/components/ui/activity-indicator"; -import { Button } from "@/components/ui/button"; import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"; import { FrigateConfig } from "@/types/frigateConfig"; import { ReviewSegment, ReviewSeverity } from "@/types/review"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import { LuRefreshCcw } from "react-icons/lu"; import { MdCircle } from "react-icons/md"; import useSWR from "swr"; @@ -15,9 +14,7 @@ type MobileEventViewProps = { reachedEnd: boolean; isValidating: boolean; severity: ReviewSeverity; - hasUpdate: boolean; setSeverity: (severity: ReviewSeverity) => void; - setHasUpdate: (hasUpdated: boolean) => void; loadNextPage: () => void; markItemAsReviewed: (reviewId: string) => void; pullLatestData: () => void; @@ -28,9 +25,7 @@ export default function MobileEventView({ reachedEnd, isValidating, severity, - hasUpdate, setSeverity, - setHasUpdate, loadNextPage, markItemAsReviewed, pullLatestData, @@ -209,33 +204,12 @@ export default function MobileEventView({ - {hasUpdate && ( -
-
- -
-
- )} +