Use component for updating items

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<HTMLDivElement | null>;
+  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 (
+    <div className={className}>
+      <div className="flex justify-center items-center mr-[100px]">
+        <Button
+          className={`${
+            hasUpdate
+              ? "animate-in slide-in-from-top duration-500"
+              : "invisible"
+          }  text-center mt-5 mx-auto bg-gray-400 text-white`}
+          variant="secondary"
+          onClick={() => {
+            setHasUpdate(false);
+            pullLatestData();
+            if (contentRef.current) {
+              contentRef.current.scrollTo({
+                top: 0,
+                behavior: "smooth",
+              });
+            }
+          }}
+        >
+          <LuRefreshCcw className="w-4 h-4 mr-2" />
+          New Items To Review
+        </Button>
+      </div>
+    </div>
+  );
+}

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 (
       <DesktopRecordingView
@@ -236,9 +217,7 @@ export default function Events() {
           reachedEnd={isDone}
           isValidating={isValidating}
           severity={severity}
-          hasUpdate={hasUpdate}
           setSeverity={setSeverity}
-          setHasUpdate={setHasUpdate}
           loadNextPage={onLoadNextPage}
           markItemAsReviewed={markItemAsReviewed}
           pullLatestData={reloadData}
@@ -255,9 +234,7 @@ export default function Events() {
         isValidating={isValidating}
         filter={reviewFilter}
         severity={severity}
-        hasUpdate={hasUpdate}
         setSeverity={setSeverity}
-        setHasUpdate={setHasUpdate}
         loadNextPage={onLoadNextPage}
         markItemAsReviewed={markItemAsReviewed}
         onSelectReview={setSelectedReviewId}

web/src/views/events/DesktopEventView.tsx

@@ -1,13 +1,13 @@
+import NewReviewData from "@/components/dynamic/NewReviewData";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 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 { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { LuFolderCheck, LuRefreshCcw } from "react-icons/lu";
+import { LuFolderCheck } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
@@ -19,9 +19,7 @@ type DesktopEventViewProps = {
   isValidating: boolean;
   filter?: ReviewFilter;
   severity: ReviewSeverity;
-  hasUpdate: boolean;
   setSeverity: (severity: ReviewSeverity) => 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 && (
+          <NewReviewData
-            <div className="absolute w-full z-30">
+            className="absolute w-full z-30"
-              <div className="flex justify-center items-center mr-[100px]">
+            contentRef={contentRef}
-                <Button
+            severity={severity}
-                  className={`${
+            pullLatestData={pullLatestData}
-                    hasUpdate
+          />
-                      ? "animate-in slide-in-from-top duration-500"
-                      : "invisible"
-                  }  text-center mt-5 mx-auto bg-gray-400 text-white`}
-                  variant="secondary"
-                  onClick={() => {
-                    setHasUpdate(false);
-                    pullLatestData();
-                    if (contentRef.current) {
-                      contentRef.current.scrollTo({
-                        top: 0,
-                        behavior: "smooth",
-                      });
-                    }
-                  }}
-                >
-                  <LuRefreshCcw className="w-4 h-4 mr-2" />
-                  New Items To Review
-                </Button>
-              </div>
-            </div>
-          )}
 
           {reachedEnd && currentItems == null && (
             <div className="w-full h-full flex flex-col justify-center items-center">

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({
         </ToggleGroupItem>
       </ToggleGroup>
 
-      {hasUpdate && (
+      <NewReviewData
-        <div className="absolute w-full z-30">
+        className="absolute w-full z-30"
-          <div className="flex justify-center items-center">
+        contentRef={contentRef}
-            <Button
+        severity={severity}
-              className={`${
+        pullLatestData={pullLatestData}
-                hasUpdate
+      />
-                  ? "animate-in slide-in-from-top duration-500"
-                  : "invisible"
-              }  text-center mt-5 mx-auto bg-gray-400 text-white`}
-              variant="secondary"
-              onClick={() => {
-                setHasUpdate(false);
-                pullLatestData();
-                if (contentRef.current) {
-                  contentRef.current.scrollTo({
-                    top: 0,
-                    behavior: "smooth",
-                  });
-                }
-              }}
-            >
-              <LuRefreshCcw className="w-4 h-4 mr-2" />
-              New Items To Review
-            </Button>
-          </div>
-        </div>
-      )}
 
       <div
         ref={contentRef}

web/vite.config.ts

@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:5000',
+        target: 'http://192.168.50.106:5000',
         ws: true,
       },
       '/vod': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/clips': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/exports': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/ws': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         ws: true,
       },
       '/live': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         changeOrigin: true,
         ws: true,
       },