Add share warning to big share button in post ctrl (#3367)

2024-04-03 11:03:54 -07:00 · 2024-04-03 11:03:54 -07:00 · 75c9da931c
parent 907c7c0586
commit 75c9da931c
3 changed files with 87 additions and 58 deletions
--- a/src/components/Prompt.tsx
+++ b/src/components/Prompt.tsx
@ -3,11 +3,10 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {useTheme, atoms as a, useBreakpoints} from '#/alf'
-import {Text} from '#/components/Typography'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonColor, ButtonText} from '#/components/Button'
-
 import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'

 export {useDialogControl as usePromptControl} from '#/components/Dialog'

@ -80,7 +79,7 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
    <View
      style={[
        a.w_full,
-        a.gap_sm,
+        a.gap_md,
        a.justify_end,
        gtMobile
          ? [a.flex_row, a.flex_row_reverse, a.justify_start]
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@ -1,50 +1,50 @@
 import React, {memo} from 'react'
-import {StyleProp, ViewStyle, Pressable, PressableProps} from 'react-native'
-import Clipboard from '@react-native-clipboard/clipboard'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {useNavigation} from '@react-navigation/native'
+import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
 import {
  AppBskyActorDefs,
  AppBskyFeedPost,
  AtUri,
  RichText as RichTextAPI,
 } from '@atproto/api'
-import {toShareUrl} from 'lib/strings/url-helpers'
-import {useTheme} from 'lib/ThemeContext'
-import {shareUrl} from 'lib/sharing'
-import * as Toast from '../Toast'
-import {EventStopper} from '../EventStopper'
-import {useDialogControl} from '#/components/Dialog'
-import * as Prompt from '#/components/Prompt'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import Clipboard from '@react-native-clipboard/clipboard'
+import {useNavigation} from '@react-navigation/native'
+
 import {makeProfileLink} from '#/lib/routes/links'
 import {CommonNavigatorParams} from '#/lib/routes/types'
-import {getCurrentRoute} from 'lib/routes/helpers'
+import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {getTranslatorLink} from '#/locale/helpers'
-import {usePostDeleteMutation} from '#/state/queries/post'
+import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
 import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {logger} from '#/logger'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {usePostDeleteMutation} from '#/state/queries/post'
 import {useSession} from '#/state/session'
-import {isWeb} from '#/platform/detection'
-import {richTextToString} from '#/lib/strings/rich-text-helpers'
-import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
-import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
-
+import {getCurrentRoute} from 'lib/routes/helpers'
+import {shareUrl} from 'lib/sharing'
+import {toShareUrl} from 'lib/strings/url-helpers'
+import {useTheme} from 'lib/ThemeContext'
 import {atoms as a, useTheme as useAlf} from '#/alf'
-import * as Menu from '#/components/Menu'
-import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
-import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
+import {useDialogControl} from '#/components/Dialog'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
+import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
+import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '#/components/icons/Clipboard'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
+import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
 import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
-import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
-import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
+import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
+import * as Menu from '#/components/Menu'
+import * as Prompt from '#/components/Prompt'
+import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
+import {EventStopper} from '../EventStopper'
+import * as Toast from '../Toast'

 let PostDropdownBtn = ({
  testID,
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@ -12,29 +12,32 @@ import {
  AtUri,
  RichText as RichTextAPI,
 } from '@atproto/api'
-import {Text} from '../text/Text'
-import {PostDropdownBtn} from '../forms/PostDropdownBtn'
-import {HeartIcon, HeartIconSolid, CommentBottomArrow} from 'lib/icons'
-import {s} from 'lib/styles'
-import {pluralize} from 'lib/strings/helpers'
-import {useTheme} from 'lib/ThemeContext'
-import {RepostButton} from './RepostButton'
-import {Haptics} from 'lib/haptics'
-import {HITSLOP_10, HITSLOP_20} from 'lib/constants'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {HITSLOP_10, HITSLOP_20} from '#/lib/constants'
+import {Haptics} from '#/lib/haptics'
+import {CommentBottomArrow, HeartIcon, HeartIconSolid} from '#/lib/icons'
+import {makeProfileLink} from '#/lib/routes/links'
+import {shareUrl} from '#/lib/sharing'
+import {pluralize} from '#/lib/strings/helpers'
+import {toShareUrl} from '#/lib/strings/url-helpers'
+import {s} from '#/lib/styles'
+import {useTheme} from '#/lib/ThemeContext'
+import {Shadow} from '#/state/cache/types'
 import {useModalControls} from '#/state/modals'
 import {
  usePostLikeMutationQueue,
  usePostRepostMutationQueue,
 } from '#/state/queries/post'
-import {useComposerControls} from '#/state/shell/composer'
-import {Shadow} from '#/state/cache/types'
 import {useRequireAuth} from '#/state/session'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
+import {useComposerControls} from '#/state/shell/composer'
+import {useDialogControl} from '#/components/Dialog'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
-import {toShareUrl} from 'lib/strings/url-helpers'
-import {shareUrl} from 'lib/sharing'
-import {makeProfileLink} from 'lib/routes/links'
+import * as Prompt from '#/components/Prompt'
+import {PostDropdownBtn} from '../forms/PostDropdownBtn'
+import {Text} from '../text/Text'
+import {RepostButton} from './RepostButton'

 let PostCtrls = ({
  big,
@ -63,6 +66,13 @@ let PostCtrls = ({
    logContext,
  )
  const requireAuth = useRequireAuth()
+  const loggedOutWarningPromptControl = useDialogControl()
+
+  const shouldShowLoggedOutWarning = React.useMemo(() => {
+    return !!post.author.labels?.find(
+      label => label.val === '!no-unauthenticated',
+    )
+  }, [post])

  const defaultCtrlColor = React.useMemo(
    () => ({
@ -209,18 +219,38 @@ let PostCtrls = ({
        </TouchableOpacity>
      </View>
      {big && (
-        <View style={styles.ctrlBig}>
-          <TouchableOpacity
-            testID="shareBtn"
-            style={[styles.btn]}
-            onPress={onShare}
-            accessibilityRole="button"
-            accessibilityLabel={`${_(msg`Share`)}`}
-            accessibilityHint=""
-            hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
-            <ArrowOutOfBox style={[defaultCtrlColor, styles.mt1]} width={22} />
-          </TouchableOpacity>
-        </View>
+        <>
+          <View style={styles.ctrlBig}>
+            <TouchableOpacity
+              testID="shareBtn"
+              style={[styles.btn]}
+              onPress={() => {
+                if (shouldShowLoggedOutWarning) {
+                  loggedOutWarningPromptControl.open()
+                } else {
+                  onShare()
+                }
+              }}
+              accessibilityRole="button"
+              accessibilityLabel={`${_(msg`Share`)}`}
+              accessibilityHint=""
+              hitSlop={big ? HITSLOP_20 : HITSLOP_10}>
+              <ArrowOutOfBox
+                style={[defaultCtrlColor, styles.mt1]}
+                width={22}
+              />
+            </TouchableOpacity>
+          </View>
+          <Prompt.Basic
+            control={loggedOutWarningPromptControl}
+            title={_(msg`Note about sharing`)}
+            description={_(
+              msg`This post is only visible to logged-in users. It won't be visible to people who aren't logged in.`,
+            )}
+            onConfirm={onShare}
+            confirmButtonCta={_(msg`Share anyway`)}
+          />
+        </>
      )}
      <View style={big ? styles.ctrlBig : styles.ctrl}>
        <PostDropdownBtn