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

@@ -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(() => {
+  const reloadData = useCallback(() => setBeforeTs(Date.now() / 1000), []);
-    setSize(1);
-    updateSegments();
-  }, []);
 
   // preview videos
 

web/src/pages/Logs.tsx

@@ -97,8 +97,9 @@ function Logs() {
       </div>
 
       {!endVisible && (
-        <div
+        <Button
-          className="absolute bottom-8 left-[50%] -translate-x-[50%] rounded-xl bg-accent-foreground text-white z-20 p-2"
+          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

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">
+        {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"
         >
+          {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">