Reduce rerenders on some components (#10068)

* Remove direct callback

* don't rerender for callback

* Move websocket to top level events

* Be smarter about updating timeago

* Cleanup

web/src/views/events/DesktopEventView.tsx

@@ -1,4 +1,3 @@
-import { useFrigateEvents } from "@/api/ws";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
@@ -19,6 +18,8 @@ type DesktopEventViewProps = {
   reachedEnd: boolean;
   isValidating: boolean;
   filter?: ReviewFilter;
+  hasUpdate: boolean;
+  setHasUpdate: (hasUpdated: boolean) => void;
   loadNextPage: () => void;
   markItemAsReviewed: (reviewId: string) => void;
   onSelectReview: (reviewId: string) => void;
@@ -32,6 +33,8 @@ export default function DesktopEventView({
   reachedEnd,
   isValidating,
   filter,
+  hasUpdate,
+  setHasUpdate,
   loadNextPage,
   markItemAsReviewed,
   onSelectReview,
@@ -177,25 +180,6 @@ export default function DesktopEventView({
     return data;
   }, [minimap]);
 
-  // new data alert
-
-  const { payload: eventUpdate } = useFrigateEvents();
-  const [hasUpdate, setHasUpdate] = useState(false);
-  useEffect(() => {
-    if (!eventUpdate) {
-      return;
-    }
-
-    // if event is ended and was saved, update events list
-    if (
-      eventUpdate.type == "end" &&
-      (eventUpdate.after.has_clip || eventUpdate.after.has_snapshot)
-    ) {
-      setHasUpdate(true);
-      return;
-    }
-  }, [eventUpdate]);
-
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -306,8 +290,8 @@ export default function DesktopEventView({
                       <PreviewThumbnailPlayer
                         review={value}
                         relevantPreview={relevantPreview}
-                        setReviewed={() => markItemAsReviewed(value.id)}
-                        onClick={() => onSelectReview(value.id)}
+                        setReviewed={markItemAsReviewed}
+                        onClick={onSelectReview}
                       />
                     </div>
                     {lastRow && !reachedEnd && <ActivityIndicator />}

web/src/views/events/MobileEventView.tsx

@@ -1,9 +1,11 @@
 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";
 
@@ -12,16 +14,22 @@ type MobileEventViewProps = {
   relevantPreviews?: Preview[];
   reachedEnd: boolean;
   isValidating: boolean;
+  hasUpdate: boolean;
+  setHasUpdate: (hasUpdated: boolean) => void;
   loadNextPage: () => void;
   markItemAsReviewed: (reviewId: string) => void;
+  pullLatestData: () => void;
 };
 export default function MobileEventView({
   reviewPages,
   relevantPreviews,
   reachedEnd,
   isValidating,
+  hasUpdate,
+  setHasUpdate,
   loadNextPage,
   markItemAsReviewed,
+  pullLatestData,
 }: MobileEventViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
@@ -198,6 +206,34 @@ export default function MobileEventView({
         </ToggleGroupItem>
       </ToggleGroup>
 
+      {hasUpdate && (
+        <div className="absolute w-full z-30">
+          <div className="flex justify-center items-center">
+            <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>
+      )}
+
       <div
         ref={contentRef}
         className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"
@@ -223,7 +259,7 @@ export default function MobileEventView({
                     review={value}
                     relevantPreview={relevantPreview}
                     autoPlayback={minimapBounds.end == value.start_time}
-                    setReviewed={() => markItemAsReviewed(value.id)}
+                    setReviewed={markItemAsReviewed}
                   />
                 </div>
                 {lastRow && !reachedEnd && <ActivityIndicator />}