From 6b0701c73c3941a0bcdb3b915999cd9051903e5b Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Wed, 21 Feb 2024 09:40:30 -0700
Subject: [PATCH] Only show the last 24 hours by default

---
 web/src/utils/iconUtil.tsx                | 11 +++++++++++
 web/src/views/events/DesktopEventView.tsx | 21 ++++++++++++++++++---
 web/src/views/events/MobileEventView.tsx  | 21 ++++++++++++++++++---
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/web/src/utils/iconUtil.tsx b/web/src/utils/iconUtil.tsx
index 8517f519c..f31aec318 100644
--- a/web/src/utils/iconUtil.tsx
+++ b/web/src/utils/iconUtil.tsx
@@ -5,9 +5,11 @@ import {
   FaCat,
   FaDog,
   FaFedex,
+  FaFire,
   FaUps,
 } from "react-icons/fa";
 import { LuBox, LuLassoSelect } from "react-icons/lu";
+import { MdRecordVoiceOver } from "react-icons/md";
 
 export function getIconForLabel(label: string, className?: string) {
   switch (label) {
@@ -15,12 +17,21 @@ export function getIconForLabel(label: string, className?: string) {
       return <FaCarSide key={label} className={className} />;
     case "cat":
       return <FaCat key={label} className={className} />;
+    case "bark":
     case "dog":
       return <FaDog key={label} className={className} />;
+    case "fire_alarm":
+      return <FaFire key={label} className={className} />;
     case "package":
       return <LuBox key={label} className={className} />;
     case "person":
       return <BsPersonWalking key={label} className={className} />;
+    case "crying":
+    case "laughter":
+    case "scream":
+    case "speech":
+    case "yell":
+      return <MdRecordVoiceOver key={label} className={className} />;
     default:
       return <LuLassoSelect key={label} className={className} />;
   }
diff --git a/web/src/views/events/DesktopEventView.tsx b/web/src/views/events/DesktopEventView.tsx
index 6b8c61dca..c1827f3c2 100644
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/web/src/views/events/DesktopEventView.tsx
@@ -28,6 +28,20 @@ export default function DesktopEventView() {
 
   // review paging
 
+  const [after, setAfter] = useState(0);
+  useEffect(() => {
+    const now = new Date();
+    now.setHours(now.getHours() - 24);
+    setAfter(now.getTime() / 1000);
+
+    const intervalId: NodeJS.Timeout = setInterval(() => {
+      const now = new Date();
+      now.setHours(now.getHours() - 24);
+      setAfter(now.getTime() / 1000);
+    }, 60000);
+    return () => clearInterval(intervalId);
+  }, [60000]);
+
   const reviewSearchParams = {};
   const reviewSegmentFetcher = useCallback((key: any) => {
     const [path, params] = Array.isArray(key) ? key : [key, undefined];
@@ -39,18 +53,19 @@ export default function DesktopEventView() {
       if (index > 0) {
         const lastDate = prevData[prevData.length - 1].start_time;
         const pagedParams = reviewSearchParams
-          ? { before: lastDate, limit: API_LIMIT }
+          ? { before: lastDate, after: after, limit: API_LIMIT }
           : {
               ...reviewSearchParams,
               before: lastDate,
+              after: after,
               limit: API_LIMIT,
             };
         return ["review", pagedParams];
       }
 
       const params = reviewSearchParams
-        ? { limit: API_LIMIT }
-        : { ...reviewSearchParams, limit: API_LIMIT };
+        ? { limit: API_LIMIT, after: after }
+        : { ...reviewSearchParams, limit: API_LIMIT, after: after };
       return ["review", params];
     },
     [reviewSearchParams]
diff --git a/web/src/views/events/MobileEventView.tsx b/web/src/views/events/MobileEventView.tsx
index e4fd1f29b..49d7b1d98 100644
--- a/web/src/views/events/MobileEventView.tsx
+++ b/web/src/views/events/MobileEventView.tsx
@@ -18,6 +18,20 @@ export default function MobileEventView() {
 
   // review paging
 
+  const [after, setAfter] = useState(0);
+  useEffect(() => {
+    const now = new Date();
+    now.setHours(now.getHours() - 24);
+    setAfter(now.getTime() / 1000);
+
+    const intervalId: NodeJS.Timeout = setInterval(() => {
+      const now = new Date();
+      now.setHours(now.getHours() - 24);
+      setAfter(now.getTime() / 1000);
+    }, 60000);
+    return () => clearInterval(intervalId);
+  }, [60000]);
+
   const reviewSearchParams = {};
   const reviewSegmentFetcher = useCallback((key: any) => {
     const [path, params] = Array.isArray(key) ? key : [key, undefined];
@@ -29,18 +43,19 @@ export default function MobileEventView() {
       if (index > 0) {
         const lastDate = prevData[prevData.length - 1].start_time;
         const pagedParams = reviewSearchParams
-          ? { before: lastDate, limit: API_LIMIT }
+          ? { before: lastDate, after: after, limit: API_LIMIT }
           : {
               ...reviewSearchParams,
               before: lastDate,
+              after: after,
               limit: API_LIMIT,
             };
         return ["review", pagedParams];
       }
 
       const params = reviewSearchParams
-        ? { limit: API_LIMIT }
-        : { ...reviewSearchParams, limit: API_LIMIT };
+        ? { limit: API_LIMIT, after: after }
+        : { ...reviewSearchParams, limit: API_LIMIT, after: after };
       return ["review", params];
     },
     [reviewSearchParams]