Improve refreshing of review items (#10675)

web/src/components/dynamic/NewReviewData.tsx

@@ -1,45 +1,29 @@
-import { useFrigateReviews } from "@/api/ws";
-import { ReviewSeverity } from "@/types/review";
+import { ReviewSegment } from "@/types/review";
 import { Button } from "../ui/button";
 import { LuRefreshCcw } from "react-icons/lu";
-import { MutableRefObject, useEffect, useMemo, useState } from "react";
+import { MutableRefObject, useMemo } from "react";
 
 type NewReviewDataProps = {
   className: string;
   contentRef: MutableRefObject<HTMLDivElement | null>;
-  severity: ReviewSeverity;
-  hasUpdate: boolean;
-  setHasUpdate: (update: boolean) => void;
+  reviewItems?: ReviewSegment[] | null;
+  itemsToReview?: number;
   pullLatestData: () => void;
 };
 export default function NewReviewData({
   className,
   contentRef,
-  severity,
-  hasUpdate,
-  setHasUpdate,
+  reviewItems,
+  itemsToReview,
   pullLatestData,
 }: NewReviewDataProps) {
-  const { payload: review } = useFrigateReviews();
-
-  const startCheckTs = useMemo(() => Date.now() / 1000, []);
-  const [reviewTs, setReviewTs] = useState(startCheckTs);
-
-  useEffect(() => {
-    if (!review) {
-      return;
+  const hasUpdate = useMemo(() => {
+    if (!reviewItems || !itemsToReview) {
+      return false;
     }
 
-    if (review.type == "end" && review.review.severity == severity) {
-      setReviewTs(review.review.start_time);
-    }
-  }, [review, severity]);
-
-  useEffect(() => {
-    if (reviewTs > startCheckTs) {
-      setHasUpdate(true);
-    }
-  }, [startCheckTs, reviewTs, setHasUpdate]);
+    return reviewItems.length != itemsToReview;
+  }, [reviewItems, itemsToReview]);
 
   return (
     <div className={className}>
@@ -52,7 +36,6 @@ export default function NewReviewData({
           }  text-center mt-5 mx-auto bg-gray-400 text-white`}
           variant="secondary"
           onClick={() => {
-            setHasUpdate(false);
             pullLatestData();
             if (contentRef.current) {
               contentRef.current.scrollTo({

web/src/pages/Events.tsx

@@ -18,7 +18,9 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
 
 export default function Events() {
-  const { data: config } = useSWR<FrigateConfig>("config");
+  const { data: config } = useSWR<FrigateConfig>("config", {
+    revalidateOnFocus: false,
+  });
   const timezone = useTimezone(config);
 
   // recordings viewer
@@ -66,6 +68,9 @@ export default function Events() {
     };
   }, [last24Hours, reviewSearchParams]);
 
+  // we want to update the items whenever the severity changes
+  useEffect(() => setBeforeTs(Date.now() / 1000), [severity]);
+
   const reviewSegmentFetcher = useCallback((key: Array<string> | string) => {
     const [path, params] = Array.isArray(key) ? key : [key, undefined];
     return axios.get(path, { params }).then((res) => res.data);
@@ -93,15 +98,21 @@ export default function Events() {
 
   // review summary
 
-  const { data: reviewSummary, mutate: updateSummary } = useSWR<ReviewSummary>([
-    "review/summary",
+  const { data: reviewSummary, mutate: updateSummary } = useSWR<ReviewSummary>(
+    [
+      "review/summary",
+      {
+        timezone: timezone,
+        cameras: reviewSearchParams["cameras"] ?? null,
+        labels: reviewSearchParams["labels"] ?? null,
+      },
+    ],
     {
-      timezone: timezone,
-      cameras: reviewSearchParams["cameras"] ?? null,
-      labels: reviewSearchParams["labels"] ?? null,
+      revalidateOnFocus: true,
+      refreshInterval: 30000,
+      revalidateOnReconnect: false,
     },
-    { revalidateOnFocus: false, revalidateOnReconnect: false },
-  ]);
+  );
 
   const reloadData = useCallback(() => {
     setBeforeTs(Date.now() / 1000);

web/src/views/events/EventView.tsx

@@ -382,10 +382,6 @@ function DetectionReview({
     [previewTime, setPreviewTime],
   );
 
-  // review interaction
-
-  const [hasUpdate, setHasUpdate] = useState(false);
-
   // timeline interaction
 
   const timelineDuration = useMemo(
@@ -498,9 +494,8 @@ function DetectionReview({
           <NewReviewData
             className="absolute w-full z-30 pointer-events-none"
             contentRef={contentRef}
-            severity={severity}
-            hasUpdate={hasUpdate}
-            setHasUpdate={setHasUpdate}
+            reviewItems={currentItems}
+            itemsToReview={itemsToReview}
             pullLatestData={pullLatestData}
           />
         )}
@@ -555,7 +550,6 @@ function DetectionReview({
                 className="text-white"
                 variant="select"
                 onClick={() => {
-                  setHasUpdate(false);
                   markAllItemsAsReviewed(currentItems ?? []);
                 }}
               >