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

@@ -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 (

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>
   )
 }