From cd29dba761dde1e5050675cbc3002b317c5648b4 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Fri, 5 Apr 2024 12:52:53 -0700
Subject: [PATCH] fix dialog back button for android (#3428)

* fix types

* remove unused async

* add try/catch
---
 src/components/Dialog/index.web.tsx | 53 ++++++++++++++++++++---------
 src/components/Prompt.tsx           |  3 +-
 src/view/com/composer/Composer.tsx  |  6 +---
 3 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/components/Dialog/index.web.tsx b/src/components/Dialog/index.web.tsx
index 038f6295..8383979b 100644
--- a/src/components/Dialog/index.web.tsx
+++ b/src/components/Dialog/index.web.tsx
@@ -1,20 +1,24 @@
 import React, {useImperativeHandle} from 'react'
-import {View, TouchableWithoutFeedback} from 'react-native'
-import {FocusScope} from '@tamagui/focus-scope'
-import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'
+import {TouchableWithoutFeedback, View} from 'react-native'
+import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {FocusScope} from '@tamagui/focus-scope'
 
-import {useTheme, atoms as a, useBreakpoints, web, flatten} from '#/alf'
+import {logger} from '#/logger'
+import {useDialogStateControlContext} from '#/state/dialogs'
+import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {Context} from '#/components/Dialog/context'
+import {
+  DialogControlProps,
+  DialogInnerProps,
+  DialogOuterProps,
+} from '#/components/Dialog/types'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Portal} from '#/components/Portal'
 
-import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
-import {Context} from '#/components/Dialog/context'
-import {Button, ButtonIcon} from '#/components/Button'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {useDialogStateControlContext} from '#/state/dialogs'
-
-export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
+export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export {Input} from '#/components/forms/TextField'
 
@@ -37,14 +41,31 @@ export function Outer({
     setDialogIsOpen(control.id, true)
   }, [setIsOpen, setDialogIsOpen, control.id])
 
-  const close = React.useCallback(async () => {
+  const onCloseInner = React.useCallback(async () => {
     setIsVisible(false)
     await new Promise(resolve => setTimeout(resolve, 150))
     setIsOpen(false)
     setIsVisible(true)
     setDialogIsOpen(control.id, false)
     onClose?.()
-  }, [onClose, setIsOpen, setDialogIsOpen, control.id])
+  }, [control.id, onClose, setDialogIsOpen])
+
+  const close = React.useCallback<DialogControlProps['close']>(
+    cb => {
+      try {
+        if (cb && typeof cb === 'function') {
+          cb()
+        }
+      } catch (e: any) {
+        logger.error(`Dialog closeCallback failed`, {
+          message: e.message,
+        })
+      } finally {
+        onCloseInner()
+      }
+    },
+    [onCloseInner],
+  )
 
   useImperativeHandle(
     control.ref,
@@ -52,7 +73,7 @@ export function Outer({
       open,
       close,
     }),
-    [open, close],
+    [close, open],
   )
 
   React.useEffect(() => {
@@ -65,7 +86,7 @@ export function Outer({
     document.addEventListener('keydown', handler)
 
     return () => document.removeEventListener('keydown', handler)
-  }, [isOpen, close])
+  }, [close, isOpen])
 
   const context = React.useMemo(
     () => ({
@@ -82,7 +103,7 @@ export function Outer({
             <TouchableWithoutFeedback
               accessibilityHint={undefined}
               accessibilityLabel={_(msg`Close active dialog`)}
-              onPress={close}>
+              onPress={onCloseInner}>
               <View
                 style={[
                   web(a.fixed),
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 3344b051..c92fe265 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -135,8 +135,7 @@ export function Action({
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(() => {
-    close()
-    onPress()
+    close(onPress)
   }, [close, onPress])
 
   return (
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index 05367f07..a3ee97a2 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -508,11 +508,7 @@ export const ComposePost = observer(function ComposePost({
         title={_(msg`Discard draft?`)}
         description={_(msg`Are you sure you'd like to discard this draft?`)}
         onConfirm={() => {
-          if (isWeb) {
-            onClose()
-          } else {
-            discardPromptControl.close(onClose)
-          }
+          discardPromptControl.close(onClose)
         }}
         confirmButtonCta={_(msg`Discard`)}
         confirmButtonColor="negative"