From 64a1ebaa0f3361684af26e5468af491f50664494 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Thu, 22 Feb 2024 06:58:27 -0700
Subject: [PATCH] Be smarter about paging empty

---
 web/src/views/events/DesktopEventView.tsx | 66 +++++++++++-----------
 web/src/views/events/MobileEventView.tsx  | 68 ++++++++++++-----------
 2 files changed, 71 insertions(+), 63 deletions(-)

diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index 67ac11714..ddf3c0aea 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/web/src/views/events/DesktopEventView.tsx
@@ -116,15 +116,15 @@ export default function DesktopEventView() {
     [reviewPages]
   );
 
-  useEffect(() => {
-    if (!reviewItems || !reviewItems.all) {
-      return
+  const currentItems = useMemo(() => {
+    const current = reviewItems[severity];
+
+    if (!current || current.length == 0) {
+      return null;
     }
 
-    if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) {
-      setSize(size + 1)
-    }
-  }, [reviewItems, severity])
+    return current;
+  }, [reviewItems, severity]);
 
   // review interaction
 
@@ -311,32 +311,36 @@ export default function DesktopEventView() {
         ref={contentRef}
         className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
       >
-        {reviewItems[severity]?.map((value, segIdx) => {
-          const lastRow = segIdx == reviewItems[severity].length - 1;
-          const relevantPreview = Object.values(allPreviews || []).find(
-            (preview) =>
-              preview.camera == value.camera &&
-              preview.start < value.start_time &&
-              preview.end > value.end_time
-          );
+        {currentItems ? (
+          currentItems.map((value, segIdx) => {
+            const lastRow = segIdx == reviewItems[severity].length - 1;
+            const relevantPreview = Object.values(allPreviews || []).find(
+              (preview) =>
+                preview.camera == value.camera &&
+                preview.start < value.start_time &&
+                preview.end > value.end_time
+            );
 
-          return (
-            <div
-              key={value.id}
-              ref={lastRow ? lastReviewRef : minimapRef}
-              data-start={value.start_time}
-            >
-              <div className="h-[234px] aspect-video rounded-lg overflow-hidden">
-                <PreviewThumbnailPlayer
-                  review={value}
-                  relevantPreview={relevantPreview}
-                  setReviewed={() => setReviewed(value.id)}
-                />
+            return (
+              <div
+                key={value.id}
+                ref={lastRow ? lastReviewRef : minimapRef}
+                data-start={value.start_time}
+              >
+                <div className="h-[234px] aspect-video rounded-lg overflow-hidden">
+                  <PreviewThumbnailPlayer
+                    review={value}
+                    relevantPreview={relevantPreview}
+                    setReviewed={() => setReviewed(value.id)}
+                  />
+                </div>
+                {lastRow && !isDone && <ActivityIndicator />}
               </div>
-              {lastRow && !isDone && <ActivityIndicator />}
-            </div>
-          );
-        })}
+            );
+          })
+        ) : (
+          <div ref={lastReviewRef} />
+        )}
       </div>
       <div className="absolute top-12 right-0 bottom-0">
         {after != 0 && (
diff --git a/web/src/views/events/MobileEventView.tsx b/web/src/views/events/MobileEventView.tsx
index 5cb4b1e52..c48d5f4b0 100644
--- a/web/src/views/events/MobileEventView.tsx
+++ b/web/src/views/events/MobileEventView.tsx
@@ -106,15 +106,15 @@ export default function MobileEventView() {
     [reviewPages]
   );
 
-  useEffect(() => {
-    if (!reviewItems || !reviewItems.all) {
-      return
+  const currentItems = useMemo(() => {
+    const current = reviewItems[severity];
+
+    if (!current || current.length == 0) {
+      return null;
     }
 
-    if (reviewItems.all.length > 0 && reviewItems[severity].length == 0) {
-      setSize(size + 1)
-    }
-  }, [reviewItems, severity, size])
+    return current;
+  }, [reviewItems, severity]);
 
   // review interaction
 
@@ -288,33 +288,37 @@ export default function MobileEventView() {
         ref={contentRef}
         className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"
       >
-        {reviewItems[severity]?.map((value, segIdx) => {
-          const lastRow = segIdx == reviewItems[severity].length - 1;
-          const relevantPreview = Object.values(allPreviews || []).find(
-            (preview) =>
-              preview.camera == value.camera &&
-              preview.start < value.start_time &&
-              preview.end > value.end_time
-          );
+        {currentItems ? (
+          currentItems.map((value, segIdx) => {
+            const lastRow = segIdx == reviewItems[severity].length - 1;
+            const relevantPreview = Object.values(allPreviews || []).find(
+              (preview) =>
+                preview.camera == value.camera &&
+                preview.start < value.start_time &&
+                preview.end > value.end_time
+            );
 
-          return (
-            <div
-              key={value.id}
-              ref={lastRow ? lastReviewRef : minimapRef}
-              data-start={value.start_time}
-            >
-              <div className="w-full aspect-video rounded-lg overflow-hidden">
-                <PreviewThumbnailPlayer
-                  review={value}
-                  relevantPreview={relevantPreview}
-                  autoPlayback={minimapBounds.end == value.start_time}
-                  setReviewed={() => setReviewed(value.id)}
-                />
+            return (
+              <div
+                key={value.id}
+                ref={lastRow ? lastReviewRef : minimapRef}
+                data-start={value.start_time}
+              >
+                <div className="w-full aspect-video rounded-lg overflow-hidden">
+                  <PreviewThumbnailPlayer
+                    review={value}
+                    relevantPreview={relevantPreview}
+                    autoPlayback={minimapBounds.end == value.start_time}
+                    setReviewed={() => setReviewed(value.id)}
+                  />
+                </div>
+                {lastRow && !isDone && <ActivityIndicator />}
               </div>
-              {lastRow && !isDone && <ActivityIndicator />}
-            </div>
-          );
-        })}
+            );
+          })
+        ) : (
+          <div ref={lastReviewRef} />
+        )}
       </div>
     </>
   );