From 006738a918775cc1e5c726da19649dc5febcb492 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 25 Oct 2024 06:23:57 -0500
Subject: [PATCH] Ensure review and search item mobile pages reopen correctly

---
 web/src/components/mobile/MobilePage.tsx      |  8 ++++-
 .../overlay/detail/ReviewDetailDialog.tsx     | 31 ++++++++++++-------
 .../overlay/detail/SearchDetailDialog.tsx     | 25 +++++++++------
 3 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/web/src/components/mobile/MobilePage.tsx b/web/src/components/mobile/MobilePage.tsx
index 52bc4d9fe..169b5e524 100644
--- a/web/src/components/mobile/MobilePage.tsx
+++ b/web/src/components/mobile/MobilePage.tsx
@@ -25,7 +25,13 @@ export function MobilePage({
   const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
 
   const open = controlledOpen ?? uncontrolledOpen;
-  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const setOpen = (value: boolean) => {
+    if (onOpenChange) {
+      onOpenChange(value);
+    } else {
+      setUncontrolledOpen(value);
+    }
+  };
 
   return (
     <MobilePageContext.Provider value={{ open, onOpenChange: setOpen }}>
diff --git a/web/src/components/overlay/detail/ReviewDetailDialog.tsx b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
index 0b20ff9bc..2230046f3 100644
--- a/web/src/components/overlay/detail/ReviewDetailDialog.tsx
+++ b/web/src/components/overlay/detail/ReviewDetailDialog.tsx
@@ -13,7 +13,7 @@ import { getIconForLabel } from "@/utils/iconUtil";
 import { useApiHost } from "@/api";
 import { ReviewDetailPaneType, ReviewSegment } from "@/types/review";
 import { Event } from "@/types/event";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { cn } from "@/lib/utils";
 import { FrigatePlusDialog } from "../dialog/FrigatePlusDialog";
 import ObjectLifecycle from "./ObjectLifecycle";
@@ -91,6 +91,22 @@ export default function ReviewDetailDialog({
     review != undefined,
   );
 
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (!open) {
+        // short timeout to allow the mobile page animation
+        // to complete before updating the state
+        setTimeout(() => {
+          setReview(undefined);
+          setSelectedEvent(undefined);
+          setPane("overview");
+        }, 300);
+      }
+    },
+    [setReview, setIsOpen],
+  );
+
   useEffect(() => {
     setIsOpen(review != undefined);
     // we know that these deps are correct
@@ -109,16 +125,7 @@ export default function ReviewDetailDialog({
 
   return (
     <>
-      <Overlay
-        open={isOpen ?? false}
-        onOpenChange={(open) => {
-          if (!open) {
-            setReview(undefined);
-            setSelectedEvent(undefined);
-            setPane("overview");
-          }
-        }}
-      >
+      <Overlay open={isOpen ?? false} onOpenChange={handleOpenChange}>
         <FrigatePlusDialog
           upload={upload}
           onClose={() => setUpload(undefined)}
@@ -140,7 +147,7 @@ export default function ReviewDetailDialog({
         >
           <span tabIndex={0} className="sr-only" />
           {pane == "overview" && (
-            <Header className="justify-center" onClose={() => setIsOpen(false)}>
+            <Header className="justify-center">
               <Title>Review Item Details</Title>
               <Description className="sr-only">Review item details</Description>
               <div
diff --git a/web/src/components/overlay/detail/SearchDetailDialog.tsx b/web/src/components/overlay/detail/SearchDetailDialog.tsx
index 78796036f..9159813f4 100644
--- a/web/src/components/overlay/detail/SearchDetailDialog.tsx
+++ b/web/src/components/overlay/detail/SearchDetailDialog.tsx
@@ -109,6 +109,20 @@ export default function SearchDetailDialog({
 
   const [isOpen, setIsOpen] = useState(search != undefined);
 
+  const handleOpenChange = useCallback(
+    (open: boolean) => {
+      setIsOpen(open);
+      if (!open) {
+        // short timeout to allow the mobile page animation
+        // to complete before updating the state
+        setTimeout(() => {
+          setSearch(undefined);
+        }, 300);
+      }
+    },
+    [setSearch],
+  );
+
   useEffect(() => {
     if (search) {
       setIsOpen(search != undefined);
@@ -158,14 +172,7 @@ export default function SearchDetailDialog({
   const Description = isDesktop ? DialogDescription : MobilePageDescription;
 
   return (
-    <Overlay
-      open={isOpen}
-      onOpenChange={() => {
-        if (search) {
-          setSearch(undefined);
-        }
-      }}
-    >
+    <Overlay open={isOpen} onOpenChange={handleOpenChange}>
       <Content
         className={cn(
           "scrollbar-container overflow-y-auto",
@@ -174,7 +181,7 @@ export default function SearchDetailDialog({
           isMobile && "px-4",
         )}
       >
-        <Header onClose={() => setIsOpen(false)}>
+        <Header>
           <Title>Tracked Object Details</Title>
           <Description className="sr-only">Tracked object details</Description>
         </Header>