From a978adc5a9b502941d90c80f6d51d67a07077c5a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 28 Feb 2024 07:16:32 -0700
Subject: [PATCH] Fix reload (#10109)

* Fix reloading data

* Don't show new review data when not looking at last 24 hours

* Fix refresh button and no items text

* Cleanup
---
 web/src/pages/Events.tsx           | 12 +++++-------
 web/src/pages/Logs.tsx             |  7 ++++---
 web/src/views/events/EventView.tsx | 26 +++++++++++++++-----------
 3 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index f3d185c16..fc821a06f 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -28,9 +28,10 @@ export default function Events() {
 
   // review paging
 
+  const [beforeTs, setBeforeTs] = useState(Date.now() / 1000);
   const last24Hours = useMemo(() => {
-    return { before: Date.now() / 1000, after: getHoursAgo(24) };
-  }, []);
+    return { before: beforeTs, after: getHoursAgo(24) };
+  }, [beforeTs]);
   const selectedTimeRange = useMemo(() => {
     if (reviewSearchParams["after"] == undefined) {
       return last24Hours;
@@ -73,7 +74,7 @@ export default function Events() {
       };
       return ["review", params];
     },
-    [reviewSearchParams]
+    [reviewSearchParams, last24Hours]
   );
 
   const {
@@ -96,10 +97,7 @@ export default function Events() {
     setSize(size + 1);
   }, [size]);
 
-  const reloadData = useCallback(() => {
-    setSize(1);
-    updateSegments();
-  }, []);
+  const reloadData = useCallback(() => setBeforeTs(Date.now() / 1000), []);
 
   // preview videos
 
diff --git a/web/src/pages/Logs.tsx b/web/src/pages/Logs.tsx
index f912ed3b5..591fe30f9 100644
--- a/web/src/pages/Logs.tsx
+++ b/web/src/pages/Logs.tsx
@@ -97,8 +97,9 @@ function Logs() {
       </div>
 
       {!endVisible && (
-        <div
-          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-xl bg-accent-foreground text-white z-20 p-2"
+        <Button
+          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-xl bg-accent-foreground text-white bg-gray-400 z-20 p-2"
+          variant="secondary"
           onClick={() =>
             contentRef.current?.scrollTo({
               top: contentRef.current?.scrollHeight,
@@ -107,7 +108,7 @@ function Logs() {
           }
         >
           Jump to Bottom
-        </div>
+        </Button>
       )}
 
       <div
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index d6057a184..f678987c0 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -9,7 +9,7 @@ import { useEventUtils } from "@/hooks/use-event-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isDesktop } from "react-device-detect";
+import { isDesktop, isMobile } from "react-device-detect";
 import { LuFolderCheck } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
@@ -191,7 +191,9 @@ export default function EventView({
   return (
     <div className="flex flex-col size-full">
       <div className="relative flex justify-between mb-2">
-        <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
+        {isMobile && (
+          <Logo className="absolute inset-y-0 inset-x-1/2 -translate-x-1/2 h-8" />
+        )}
         <ToggleGroup
           className="*:px-3 *:py4 *:rounded-2xl"
           type="single"
@@ -234,14 +236,16 @@ export default function EventView({
           ref={contentRef}
           className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
         >
-          <NewReviewData
-            className="absolute w-full z-30"
-            contentRef={contentRef}
-            severity={severity}
-            pullLatestData={pullLatestData}
-          />
+          {filter?.before == undefined && (
+            <NewReviewData
+              className="absolute w-full z-30"
+              contentRef={contentRef}
+              severity={severity}
+              pullLatestData={pullLatestData}
+            />
+          )}
 
-          {reachedEnd && currentItems == null && (
+          {!isValidating && currentItems == null && (
             <div className="size-full flex flex-col justify-center items-center">
               <LuFolderCheck className="size-16" />
               There are no {severity} items to review
@@ -287,9 +291,9 @@ export default function EventView({
                   </div>
                 );
               })
-            ) : (
+            ) : severity != "alert" ? (
               <div ref={lastReviewRef} />
-            )}
+            ) : null}
           </div>
         </div>
         <div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">