Ask before navigating away from composer

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,
     ],
   )
 

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>

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

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