From fe403f64ab0d0e62a2d624f2d7f67092454bb4f4 Mon Sep 17 00:00:00 2001
From: Kev <kevslashnull@gmail.com>
Date: Sun, 22 Dec 2024 02:45:37 +0100
Subject: [PATCH] Ask before navigating away from composer
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This makes the 'Discard draft?' post show up if you click on a link
within the composer.

That fixes a bug where you write a reply to a post and then lose the
reply by clicking on the avatar of the person who you’re responding to.
You would not be prompted whether you want to discard your draft like
when clicking on **Cancel**. This bug also applies to hovering over the
avatar and clicking on one of the links there.
---
 src/components/Link.tsx                       |  11 +-
 src/components/ProfileHoverCard/index.web.tsx |  21 +-
 src/components/Prompt.tsx                     |  14 +-
 src/view/com/composer/Composer.tsx            | 190 ++++++++++--------
 4 files changed, 136 insertions(+), 100 deletions(-)

diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 3cd593a106..d1964180e9 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, {useContext} from 'react'
 import {GestureResponderEvent} from 'react-native'
 import {sanitizeUrl} from '@braintree/sanitize-url'
 import {StackActions, useLinkProps} from '@react-navigation/native'
@@ -17,6 +17,7 @@ import {
 import {isNative, isWeb} from '#/platform/detection'
 import {shouldClickOpenNewTab} from '#/platform/urls'
 import {useModalControls} from '#/state/modals'
+import {ComposerContext} from '#/view/com/composer/Composer'
 import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
 import {Button, ButtonProps} from '#/components/Button'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -84,9 +85,10 @@ export function useLink({
   const isExternal = isExternalUrl(href)
   const {openModal, closeModal} = useModalControls()
   const openLink = useOpenLink()
+  const composerContext = useContext(ComposerContext)
 
   const onPress = React.useCallback(
-    (e: GestureResponderEvent) => {
+    async (e: GestureResponderEvent) => {
       const exitEarlyIfFalse = outerOnPress?.(e)
 
       if (exitEarlyIfFalse === false) return
@@ -102,6 +104,10 @@ export function useLink({
         e.preventDefault()
       }
 
+      if (composerContext) {
+        await composerContext.attemptNavigation()
+      }
+
       if (requiresWarning) {
         openModal({
           name: 'link-warning',
@@ -152,6 +158,7 @@ export function useLink({
       closeModal,
       action,
       navigation,
+      composerContext,
     ],
   )
 
diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx
index 3e58ced902..a9e911180b 100644
--- a/src/components/ProfileHoverCard/index.web.tsx
+++ b/src/components/ProfileHoverCard/index.web.tsx
@@ -14,6 +14,7 @@ import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
+import {ComposerContext} from '#/view/com/composer/Composer'
 import {formatCount} from '#/view/com/util/numeric/format'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {ProfileHeaderHandle} from '#/screens/Profile/Header/Handle'
@@ -306,6 +307,8 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
         : `fadeIn ${SHOW_DURATION}ms both`,
   }
 
+  const composerContext = React.useContext(ComposerContext)
+
   return (
     <View
       // @ts-ignore View is being used as div
@@ -318,15 +321,17 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
       {props.children}
       {isVisible && (
         <Portal>
-          <div
-            ref={refs.setFloating}
-            style={floatingStyles}
-            onPointerEnter={onPointerEnterCard}
-            onPointerLeave={onPointerLeaveCard}>
-            <div style={{willChange: 'transform', ...animationStyle}}>
-              <Card did={props.did} hide={onPress} />
+          <ComposerContext.Provider value={composerContext}>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              onPointerEnter={onPointerEnterCard}
+              onPointerLeave={onPointerLeaveCard}>
+              <div style={{willChange: 'transform', ...animationStyle}}>
+                <Card did={props.did} hide={onPress} />
+              </div>
             </div>
-          </div>
+          </ComposerContext.Provider>
         </Portal>
       )}
     </View>
diff --git a/src/components/Prompt.tsx b/src/components/Prompt.tsx
index 7b33c6e256..5badcfdd51 100644
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@@ -27,10 +27,12 @@ export function Outer({
   control,
   testID,
   nativeOptions,
+  onCancel,
 }: React.PropsWithChildren<{
   control: Dialog.DialogControlProps
   testID?: string
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
+  onCancel?: () => void
 }>) {
   const {gtMobile} = useBreakpoints()
   const titleId = React.useId()
@@ -45,6 +47,7 @@ export function Outer({
     <Dialog.Outer
       control={control}
       testID={testID}
+      onClose={onCancel}
       nativeOptions={{preventExpansion: true, ...nativeOptions}}>
       <Dialog.Handle />
       <Context.Provider value={context}>
@@ -108,18 +111,21 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
 
 export function Cancel({
   cta,
+  onCancel,
 }: {
   /**
    * Optional i18n string. If undefined, it will default to "Cancel".
    */
   cta?: string
+  onCancel?: () => void
 }) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const onPress = React.useCallback(() => {
+    onCancel?.()
     close()
-  }, [close])
+  }, [onCancel, close])
 
   return (
     <Button
@@ -184,6 +190,7 @@ export function Basic({
   cancelButtonCta,
   confirmButtonCta,
   onConfirm,
+  onCancel,
   confirmButtonColor,
   showCancel = true,
 }: React.PropsWithChildren<{
@@ -200,11 +207,12 @@ export function Basic({
    * should NOT close the dialog as a side effect of this method.
    */
   onConfirm: (e: GestureResponderEvent) => void
+  onCancel?: () => void
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
 }>) {
   return (
-    <Outer control={control} testID="confirmModal">
+    <Outer control={control} testID="confirmModal" onCancel={onCancel}>
       <TitleText>{title}</TitleText>
       <DescriptionText>{description}</DescriptionText>
       <Actions>
@@ -214,7 +222,7 @@ export function Basic({
           color={confirmButtonColor}
           testID="confirmBtn"
         />
-        {showCancel && <Cancel cta={cancelButtonCta} />}
+        {showCancel && <Cancel onCancel={onCancel} cta={cancelButtonCta} />}
       </Actions>
     </Outer>
   )
diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx
index c9e40530e5..84b253428c 100644
--- a/src/view/com/composer/Composer.tsx
+++ b/src/view/com/composer/Composer.tsx
@@ -142,6 +142,10 @@ type CancelRef = {
   onPressCancel: () => void
 }
 
+export const ComposerContext = React.createContext<{
+  attemptNavigation: () => Promise<void>
+} | null>(null)
+
 type Props = ComposerOpts
 export const ComposePost = ({
   replyTo,
@@ -174,6 +178,7 @@ export const ComposePost = ({
   const [isPublishing, setIsPublishing] = useState(false)
   const [publishingStage, setPublishingStage] = useState('')
   const [error, setError] = useState('')
+  const [navigationCallback, setNavigationCallback] = useState<() => void>()
 
   const [composerState, composerDispatch] = useReducer(
     composerReducer,
@@ -255,9 +260,10 @@ export const ComposePost = ({
   const [publishOnUpload, setPublishOnUpload] = useState(false)
 
   const onClose = useCallback(() => {
+    navigationCallback?.()
     closeComposer()
     clearThumbnailCache(queryClient)
-  }, [closeComposer, queryClient])
+  }, [navigationCallback, closeComposer, queryClient])
 
   const insets = useSafeAreaInsets()
   const viewStyles = useMemo(
@@ -596,93 +602,103 @@ export const ComposePost = ({
 
   const isWebFooterSticky = !isNative && thread.posts.length > 1
   return (
-    <BottomSheetPortalProvider>
-      <VerifyEmailDialog
-        control={emailVerificationControl}
-        onCloseWithoutVerifying={() => {
-          onClose()
-        }}
-        reasonText={_(
-          msg`Before creating a post, you must first verify your email.`,
-        )}
-      />
-      <KeyboardAvoidingView
-        testID="composePostView"
-        behavior={isIOS ? 'padding' : 'height'}
-        keyboardVerticalOffset={keyboardVerticalOffset}
-        style={a.flex_1}>
-        <View
-          style={[a.flex_1, viewStyles]}
-          aria-modal
-          accessibilityViewIsModal>
-          <ComposerTopBar
-            canPost={canPost}
-            isReply={!!replyTo}
-            isPublishQueued={publishOnUpload}
-            isPublishing={isPublishing}
-            isThread={thread.posts.length > 1}
-            publishingStage={publishingStage}
-            topBarAnimatedStyle={topBarAnimatedStyle}
-            onCancel={onPressCancel}
-            onPublish={onPressPublish}>
-            {missingAltError && <AltTextReminder error={missingAltError} />}
-            <ErrorBanner
-              error={error}
-              videoState={erroredVideo}
-              clearError={() => setError('')}
-              clearVideo={
-                erroredVideoPostId
-                  ? () => clearVideo(erroredVideoPostId)
-                  : () => {}
-              }
-            />
-          </ComposerTopBar>
-
-          <Animated.ScrollView
-            ref={scrollViewRef}
-            layout={native(LinearTransition)}
-            onScroll={scrollHandler}
-            style={styles.scrollView}
-            keyboardShouldPersistTaps="always"
-            onContentSizeChange={onScrollViewContentSizeChange}
-            onLayout={onScrollViewLayout}>
-            {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
-            {thread.posts.map((post, index) => (
-              <React.Fragment key={post.id}>
-                <ComposerPost
-                  post={post}
-                  dispatch={composerDispatch}
-                  textInput={post.id === activePost.id ? textInput : null}
-                  isFirstPost={index === 0}
-                  isPartOfThread={thread.posts.length > 1}
-                  isReply={index > 0 || !!replyTo}
-                  isActive={post.id === activePost.id}
-                  canRemovePost={thread.posts.length > 1}
-                  canRemoveQuote={index > 0 || !initQuote}
-                  onSelectVideo={selectVideo}
-                  onClearVideo={clearVideo}
-                  onPublish={onComposerPostPublish}
-                  onError={setError}
-                />
-                {isWebFooterSticky && post.id === activePost.id && (
-                  <View style={styles.stickyFooterWeb}>{footer}</View>
-                )}
-              </React.Fragment>
-            ))}
-          </Animated.ScrollView>
-          {!isWebFooterSticky && footer}
-        </View>
-
-        <Prompt.Basic
-          control={discardPromptControl}
-          title={_(msg`Discard draft?`)}
-          description={_(msg`Are you sure you'd like to discard this draft?`)}
-          onConfirm={onClose}
-          confirmButtonCta={_(msg`Discard`)}
-          confirmButtonColor="negative"
+    <ComposerContext.Provider
+      value={{
+        attemptNavigation: () =>
+          new Promise(resolve => {
+            discardPromptControl.open()
+            setNavigationCallback(() => resolve)
+          }),
+      }}>
+      <BottomSheetPortalProvider>
+        <VerifyEmailDialog
+          control={emailVerificationControl}
+          onCloseWithoutVerifying={() => {
+            onClose()
+          }}
+          reasonText={_(
+            msg`Before creating a post, you must first verify your email.`,
+          )}
         />
-      </KeyboardAvoidingView>
-    </BottomSheetPortalProvider>
+        <KeyboardAvoidingView
+          testID="composePostView"
+          behavior={isIOS ? 'padding' : 'height'}
+          keyboardVerticalOffset={keyboardVerticalOffset}
+          style={a.flex_1}>
+          <View
+            style={[a.flex_1, viewStyles]}
+            aria-modal
+            accessibilityViewIsModal>
+            <ComposerTopBar
+              canPost={canPost}
+              isReply={!!replyTo}
+              isPublishQueued={publishOnUpload}
+              isPublishing={isPublishing}
+              isThread={thread.posts.length > 1}
+              publishingStage={publishingStage}
+              topBarAnimatedStyle={topBarAnimatedStyle}
+              onCancel={onPressCancel}
+              onPublish={onPressPublish}>
+              {missingAltError && <AltTextReminder error={missingAltError} />}
+              <ErrorBanner
+                error={error}
+                videoState={erroredVideo}
+                clearError={() => setError('')}
+                clearVideo={
+                  erroredVideoPostId
+                    ? () => clearVideo(erroredVideoPostId)
+                    : () => {}
+                }
+              />
+            </ComposerTopBar>
+
+            <Animated.ScrollView
+              ref={scrollViewRef}
+              layout={native(LinearTransition)}
+              onScroll={scrollHandler}
+              style={styles.scrollView}
+              keyboardShouldPersistTaps="always"
+              onContentSizeChange={onScrollViewContentSizeChange}
+              onLayout={onScrollViewLayout}>
+              {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
+              {thread.posts.map((post, index) => (
+                <React.Fragment key={post.id}>
+                  <ComposerPost
+                    post={post}
+                    dispatch={composerDispatch}
+                    textInput={post.id === activePost.id ? textInput : null}
+                    isFirstPost={index === 0}
+                    isPartOfThread={thread.posts.length > 1}
+                    isReply={index > 0 || !!replyTo}
+                    isActive={post.id === activePost.id}
+                    canRemovePost={thread.posts.length > 1}
+                    canRemoveQuote={index > 0 || !initQuote}
+                    onSelectVideo={selectVideo}
+                    onClearVideo={clearVideo}
+                    onPublish={onComposerPostPublish}
+                    onError={setError}
+                  />
+                  {isWebFooterSticky && post.id === activePost.id && (
+                    <View style={styles.stickyFooterWeb}>{footer}</View>
+                  )}
+                </React.Fragment>
+              ))}
+            </Animated.ScrollView>
+            {!isWebFooterSticky && footer}
+          </View>
+
+          <Prompt.Basic
+            control={discardPromptControl}
+            title={_(msg`Discard draft?`)}
+            description={_(msg`Are you sure you'd like to discard this draft?`)}
+            onConfirm={onClose}
+            onCancel={() => setNavigationCallback(undefined)}
+            confirmButtonCta={_(msg`Discard`)}
+            confirmButtonColor="negative"
+          />
+        </KeyboardAvoidingView>
+      </BottomSheetPortalProvider>
+    </ComposerContext.Provider>
   )
 }