fix cancel post behavior

- prompt now appears for the cancel button
- no prompt when post is empty
- appease eslint

1 files changed, 23 insertions, 18 deletions

diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index abac291a2..52b90b6c7 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -82,7 +82,7 @@ export const ComposePost = observer(function ComposePost({
 
   // HACK
   // there's a bug with @mattermost/react-native-paste-input where if the input
-  // is focused during unmount, an exception will throw (seems that a blur method isnt implemented)
+  // is focused during unmount, an exception will throw (seems that a blur method isn't implemented)
   // manually blurring before closing gets around that
   // -prf
   const hackfixOnClose = useCallback(() => {
@@ -90,6 +90,21 @@ export const ComposePost = observer(function ComposePost({
     onClose()
   }, [textInput, onClose])
 
+  const onPressCancel = useCallback(() => {
+    if (graphemeLength > 0 || !gallery.isEmpty) {
+      store.shell.openModal({
+        name: 'confirm',
+        title: 'Cancel draft',
+        onPressConfirm: onClose,
+        onPressCancel: () => {
+          store.shell.closeModal()
+        },
+        message: "Are you sure you'd like to cancel this draft?",
+      })
+    }
+    hackfixOnClose()
+  }, [store, hackfixOnClose, graphemeLength, gallery, onClose])
+
   // initial setup
   useEffect(() => {
     autocompleteView.setup()
@@ -99,24 +114,14 @@ export const ComposePost = observer(function ComposePost({
   const onEscape = useCallback(
     (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
-        const {shell} = store
-
-        if (shell.activeModals.some(modal => modal.name === 'confirm')) {
+        if (store.shell.activeModals.some(modal => modal.name === 'confirm')) {
           store.shell.closeModal()
         }
 
-        shell.openModal({
-          name: 'confirm',
-          title: 'Cancel draft',
-          onPressConfirm: onClose,
-          onPressCancel: () => {
-            store.shell.closeModal()
-          },
-          message: "Are you sure you'd like to cancel this draft?",
-        })
+        onPressCancel()
       }
     },
-    [store, onClose],
+    [store, onPressCancel],
   )
   useEffect(() => {
     if (isDesktopWeb) {
@@ -135,7 +140,7 @@ export const ComposePost = observer(function ComposePost({
   const onPhotoPasted = useCallback(
     async (uri: string) => {
       track('Composer:PastedPhotos')
-      gallery.paste(uri)
+      await gallery.paste(uri)
     },
     [gallery, track],
   )
@@ -183,7 +188,7 @@ export const ComposePost = observer(function ComposePost({
         return
       }
       if (!replyTo) {
-        store.me.mainFeed.addPostToTop(createdPost.uri)
+        await store.me.mainFeed.addPostToTop(createdPost.uri)
       }
       onPost?.()
       hackfixOnClose()
@@ -223,8 +228,8 @@ export const ComposePost = observer(function ComposePost({
         <View style={styles.topbar}>
           <TouchableOpacity
             testID="composerCancelButton"
-            onPress={hackfixOnClose}
-            onAccessibilityEscape={hackfixOnClose}
+            onPress={onPressCancel}
+            onAccessibilityEscape={onPressCancel}
             accessibilityRole="button"
             accessibilityLabel="Cancel"
             accessibilityHint="Closes post composer">