From a48548fd8ed53ae3eb08a0e05bb89f641c112b95 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Mon, 15 Apr 2024 13:42:43 -0700
Subject: [PATCH] ensure dialog is closed on unmount

Revert "properly check if the ref is null"

This reverts commit 8f563808a5d39389b0bc47a31e73cd147d1e7e8b.

properly check if the ref is null

ensure dialog is closed on unmount
---
 src/components/Dialog/index.tsx        |  6 +++
 src/view/screens/Storybook/Dialogs.tsx | 75 ++++++++++++++++++++++++++
 2 files changed, 81 insertions(+)

diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx
index 55798db7f5..4ef2d2ecaa 100644
--- a/src/components/Dialog/index.tsx
+++ b/src/components/Dialog/index.tsx
@@ -150,6 +150,12 @@ export function Outer({
     [open, close],
   )
 
+  React.useEffect(() => {
+    return () => {
+      setDialogIsOpen(control.id, false)
+    }
+  }, [control.id, setDialogIsOpen])
+
   const context = React.useMemo(() => ({close}), [close])
 
   return (
diff --git a/src/view/screens/Storybook/Dialogs.tsx b/src/view/screens/Storybook/Dialogs.tsx
index f68f9f4ddf..6d166d4b64 100644
--- a/src/view/screens/Storybook/Dialogs.tsx
+++ b/src/view/screens/Storybook/Dialogs.tsx
@@ -14,6 +14,43 @@ export function Dialogs() {
   const prompt = Prompt.usePromptControl()
   const testDialog = Dialog.useDialogControl()
   const {closeAllDialogs} = useDialogStateControlContext()
+  const unmountTestDialog = Dialog.useDialogControl()
+  const [shouldRenderUnmountTest, setShouldRenderUnmountTest] =
+    React.useState(false)
+  const unmountTestInterval = React.useRef<number>()
+
+  const onUnmountTestStartPressWithClose = () => {
+    setShouldRenderUnmountTest(true)
+
+    setTimeout(() => {
+      unmountTestDialog.open()
+    }, 1000)
+
+    setTimeout(() => {
+      unmountTestDialog.close()
+    }, 4950)
+
+    setInterval(() => {
+      setShouldRenderUnmountTest(prev => !prev)
+    }, 5000)
+  }
+
+  const onUnmountTestStartPressWithoutClose = () => {
+    setShouldRenderUnmountTest(true)
+
+    setTimeout(() => {
+      unmountTestDialog.open()
+    }, 1000)
+
+    setInterval(() => {
+      setShouldRenderUnmountTest(prev => !prev)
+    }, 5000)
+  }
+
+  const onUnmountTestEndPress = () => {
+    setShouldRenderUnmountTest(false)
+    clearInterval(unmountTestInterval.current)
+  }
 
   return (
     <View style={[a.gap_md]}>
@@ -70,6 +107,33 @@ export function Dialogs() {
         <ButtonText>Open Tester</ButtonText>
       </Button>
 
+      <Button
+        variant="solid"
+        color="primary"
+        size="small"
+        onPress={onUnmountTestStartPressWithClose}
+        label="two">
+        <ButtonText>Start Unmount Test With `.close()` call</ButtonText>
+      </Button>
+
+      <Button
+        variant="solid"
+        color="primary"
+        size="small"
+        onPress={onUnmountTestStartPressWithoutClose}
+        label="two">
+        <ButtonText>Start Unmount Test Without `.close()` call</ButtonText>
+      </Button>
+
+      <Button
+        variant="solid"
+        color="primary"
+        size="small"
+        onPress={onUnmountTestEndPress}
+        label="two">
+        <ButtonText>End Unmount Test</ButtonText>
+      </Button>
+
       <Prompt.Outer control={prompt}>
         <Prompt.TitleText>This is a prompt</Prompt.TitleText>
         <Prompt.DescriptionText>
@@ -257,6 +321,17 @@ export function Dialogs() {
           </View>
         </Dialog.ScrollableInner>
       </Dialog.Outer>
+
+      {shouldRenderUnmountTest && (
+        <Dialog.Outer control={unmountTestDialog}>
+          <Dialog.Handle />
+
+          <Dialog.Inner label="test">
+            <H3 nativeID="dialog-title">Unmount Test Dialog</H3>
+            <P nativeID="dialog-description">Will unmount in about 5 seconds</P>
+          </Dialog.Inner>
+        </Dialog.Outer>
+      )}
     </View>
   )
 }