Share dialog for starter packs (#4582)

src/components/StarterPack/QrCodeDialog.tsx

@@ -4,17 +4,15 @@ import ViewShot from 'react-native-view-shot'
 import * as FS from 'expo-file-system'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
 import * as Sharing from 'expo-sharing'
-import {AppBskyGraphDefs, AppBskyGraphStarterpack, AtUri} from '@atproto/api'
+import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {nanoid} from 'nanoid/non-secure'
 
 import {logger} from '#/logger'
 import {saveImageToMediaLibrary} from 'lib/media/manip'
-import {makeStarterPackLink} from 'lib/routes/links'
 import {logEvent} from 'lib/statsig/statsig'
 import {isNative, isWeb} from 'platform/detection'
-import {useShortenLink} from 'state/queries/shorten-link'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -24,44 +22,19 @@ import {Loader} from '#/components/Loader'
 import {QrCode} from '#/components/StarterPack/QrCode'
 
 export function QrCodeDialog({
-  control,
-  starterPack,
-}: {
-  control: DialogControlProps
-  starterPack: AppBskyGraphDefs.StarterPackView
-}) {
-  return (
-    <Dialog.Outer control={control}>
-      <Inner starterPack={starterPack} control={control} />
-    </Dialog.Outer>
-  )
-}
-
-function Inner({
   starterPack,
+  link,
   control,
 }: {
   starterPack: AppBskyGraphDefs.StarterPackView
+  link?: string
   control: DialogControlProps
 }) {
   const {_} = useLingui()
   const [isProcessing, setIsProcessing] = React.useState(false)
-  const [link, setLink] = React.useState<string>()
-  const shortenLink = useShortenLink()
 
   const ref = React.useRef<ViewShot>(null)
 
-  React.useEffect(() => {
-    if (link) return
-    ;(async () => {
-      const rkey = new AtUri(starterPack.uri).rkey
-      const res = await shortenLink(
-        makeStarterPackLink(starterPack.creator.did, rkey),
-      )
-      setLink(res.url)
-    })()
-  }, [link, shortenLink, starterPack.creator.did, starterPack.uri])
-
   const getCanvas = (base64: string): Promise<HTMLCanvasElement> => {
     return new Promise(resolve => {
       const image = new Image()
@@ -178,7 +151,7 @@ function Inner({
   }
 
   return (
-    <>
+    <Dialog.Outer control={control}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
@@ -195,12 +168,13 @@ function Inner({
                   <Loader size="xl" />
                 </View>
               ) : (
-                <View style={[a.w_full, a.gap_md]}>
+                <View
+                  style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
                   <Button
                     label={_(msg`Copy QR code`)}
                     variant="solid"
-                    color="primary"
+                    color="secondary"
-                    size="medium"
+                    size="small"
                     onPress={isWeb ? onCopyPress : onSharePress}>
                     <ButtonText>
                       {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
@@ -210,7 +184,7 @@ function Inner({
                     label={_(msg`Save QR code`)}
                     variant="solid"
                     color="secondary"
-                    size="medium"
+                    size="small"
                     onPress={onSavePress}>
                     <ButtonText>
                       <Trans>Save</Trans>
@@ -222,6 +196,6 @@ function Inner({
           )}
         </View>
       </Dialog.ScrollableInner>
-    </>
+    </Dialog.Outer>
   )
 }

src/components/StarterPack/ShareDialog.tsx

@@ -0,0 +1,180 @@
+import React from 'react'
+import {View} from 'react-native'
+import * as FS from 'expo-file-system'
+import {Image} from 'expo-image'
+import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
+import {AppBskyGraphDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {nanoid} from 'nanoid/non-secure'
+
+import {logger} from '#/logger'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {saveImageToMediaLibrary} from 'lib/media/manip'
+import {shareUrl} from 'lib/sharing'
+import {logEvent} from 'lib/statsig/statsig'
+import {getStarterPackOgCard} from 'lib/strings/starter-pack'
+import {isNative, isWeb} from 'platform/detection'
+import * as Toast from 'view/com/util/Toast'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {DialogControlProps} from '#/components/Dialog'
+import * as Dialog from '#/components/Dialog'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+interface Props {
+  starterPack: AppBskyGraphDefs.StarterPackView
+  link?: string
+  imageLoaded?: boolean
+  qrDialogControl: DialogControlProps
+  control: DialogControlProps
+}
+
+export function ShareDialog(props: Props) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <ShareDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function ShareDialogInner({
+  starterPack,
+  link,
+  imageLoaded,
+  qrDialogControl,
+  control,
+}: Props) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {isTabletOrDesktop} = useWebMediaQueries()
+
+  const imageUrl = getStarterPackOgCard(starterPack)
+
+  const onShareLink = async () => {
+    if (!link) return
+    shareUrl(link)
+    logEvent('starterPack:share', {
+      starterPack: starterPack.uri,
+      shareType: 'link',
+    })
+    control.close()
+  }
+
+  const onSave = async () => {
+    const res = await requestMediaLibraryPermissionsAsync()
+
+    if (!res) {
+      Toast.show(
+        _(msg`You must grant access to your photo library to save the image.`),
+      )
+      return
+    }
+
+    const cachePath = await Image.getCachePathAsync(imageUrl)
+    const filename = `${FS.documentDirectory}/${nanoid(12)}.png`
+
+    if (!cachePath) {
+      Toast.show(_(msg`An error occurred while saving the image.`))
+      return
+    }
+
+    try {
+      await FS.copyAsync({from: cachePath, to: filename})
+      await saveImageToMediaLibrary({uri: filename})
+      await FS.deleteAsync(filename)
+
+      Toast.show(_(msg`Image saved to your camera roll!`))
+      control.close()
+    } catch (e: unknown) {
+      Toast.show(_(msg`An error occurred while saving the QR code!`))
+      logger.error('Failed to save QR code', {error: e})
+      return
+    }
+  }
+
+  return (
+    <>
+      <Dialog.Handle />
+      <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
+        {!imageLoaded || !link ? (
+          <View style={[a.p_xl, a.align_center]}>
+            <Loader size="xl" />
+          </View>
+        ) : (
+          <View style={[!isTabletOrDesktop && a.gap_lg]}>
+            <View style={[a.gap_sm, isTabletOrDesktop && a.pb_lg]}>
+              <Text style={[a.font_bold, a.text_2xl]}>
+                <Trans>Invite people to this starter pack!</Trans>
+              </Text>
+              <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+                <Trans>
+                  Share this starter pack and help people join your community on
+                  Bluesky.
+                </Trans>
+              </Text>
+            </View>
+            <Image
+              source={{uri: imageUrl}}
+              style={[
+                a.rounded_sm,
+                {
+                  aspectRatio: 1200 / 630,
+                  transform: [{scale: isTabletOrDesktop ? 0.85 : 1}],
+                  marginTop: isTabletOrDesktop ? -20 : 0,
+                },
+              ]}
+              accessibilityIgnoresInvertColors={true}
+            />
+            <View
+              style={[
+                a.gap_md,
+                isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
+              ]}>
+              <Button
+                label="Share link"
+                variant="solid"
+                color="secondary"
+                size="small"
+                style={[isWeb && a.self_center]}
+                onPress={onShareLink}>
+                <ButtonText>
+                  {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share Link</Trans>}
+                </ButtonText>
+              </Button>
+              <Button
+                label="Create QR code"
+                variant="solid"
+                color="secondary"
+                size="small"
+                style={[isWeb && a.self_center]}
+                onPress={() => {
+                  control.close(() => {
+                    qrDialogControl.open()
+                  })
+                }}>
+                <ButtonText>
+                  <Trans>Create QR code</Trans>
+                </ButtonText>
+              </Button>
+              {isNative && (
+                <Button
+                  label={_(msg`Save image`)}
+                  variant="ghost"
+                  color="secondary"
+                  size="small"
+                  style={[isWeb && a.self_center]}
+                  onPress={onSave}>
+                  <ButtonText>
+                    <Trans>Save image</Trans>
+                  </ButtonText>
+                </Button>
+              )}
+            </View>
+          </View>
+        )}
+      </Dialog.ScrollableInner>
+    </>
+  )
+}

src/lib/routes/types.ts

@@ -43,7 +43,7 @@ export type CommonNavigatorParams = {
   MessagesSettings: undefined
   Feeds: undefined
   Start: {name: string; rkey: string}
-  StarterPack: {name: string; rkey: string}
+  StarterPack: {name: string; rkey: string; new?: boolean}
   StarterPackWizard: undefined
   StarterPackEdit: {
     rkey?: string
@@ -100,7 +100,7 @@ export type AllNavigatorParams = CommonNavigatorParams & {
   MessagesTab: undefined
   Messages: {animation?: 'push' | 'pop'}
   Start: {name: string; rkey: string}
-  StarterPack: {name: string; rkey: string}
+  StarterPack: {name: string; rkey: string; new?: boolean}
   StarterPackWizard: undefined
   StarterPackEdit: {
     rkey?: string

src/lib/strings/starter-pack.ts

@@ -1,4 +1,4 @@
-import {AtUri} from '@atproto/api'
+import {AppBskyGraphDefs, AtUri} from '@atproto/api'
 
 export function createStarterPackLinkFromAndroidReferrer(
   referrerQueryString: string,
@@ -77,3 +77,15 @@ export function httpStarterPackUriToAtUri(httpUri?: string): string | null {
 
   return `at://${parsed.name}/app.bsky.graph.starterpack/${parsed.rkey}`
 }
+
+export function getStarterPackOgCard(
+  didOrStarterPack: AppBskyGraphDefs.StarterPackView | string,
+  rkey?: string,
+) {
+  if (typeof didOrStarterPack === 'string') {
+    return `https://ogcard.cdn.bsky.app/start/${didOrStarterPack}/${rkey}`
+  } else {
+    const rkey = new AtUri(didOrStarterPack.uri).rkey
+    return `https://ogcard.cdn.bsky.app/start/${didOrStarterPack.creator.did}/${rkey}`
+  }
+}

src/screens/StarterPack/StarterPackScreen.tsx

@@ -1,8 +1,10 @@
 import React from 'react'
 import {View} from 'react-native'
+import {Image} from 'expo-image'
 import {
   AppBskyGraphDefs,
   AppBskyGraphStarterpack,
+  AtUri,
   ModerationOpts,
 } from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
@@ -18,8 +20,8 @@ import {useDeleteStarterPackMutation} from '#/state/queries/starter-packs'
 import {HITSLOP_20} from 'lib/constants'
 import {makeProfileLink, makeStarterPackLink} from 'lib/routes/links'
 import {CommonNavigatorParams, NavigationProp} from 'lib/routes/types'
-import {shareUrl} from 'lib/sharing'
 import {logEvent} from 'lib/statsig/statsig'
+import {getStarterPackOgCard} from 'lib/strings/starter-pack'
 import {isWeb} from 'platform/detection'
 import {useModerationOpts} from 'state/preferences/moderation-opts'
 import {RQKEY} from 'state/queries/list-members'
@@ -36,11 +38,9 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as ArrowOutOfBox} from '#/components/icons/ArrowOutOfBox'
-import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid'
 import {Pencil_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
-import {QrCode_Stroke2_Corner0_Rounded as QrCode} from '#/components/icons/QrCode'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import {ListMaybePlaceholder} from '#/components/Lists'
 import {Loader} from '#/components/Loader'
@@ -50,6 +50,7 @@ import {ReportDialog, useReportDialogControl} from '#/components/ReportDialog'
 import {FeedsList} from '#/components/StarterPack/Main/FeedsList'
 import {ProfilesList} from '#/components/StarterPack/Main/ProfilesList'
 import {QrCodeDialog} from '#/components/StarterPack/QrCodeDialog'
+import {ShareDialog} from '#/components/StarterPack/ShareDialog'
 import {Text} from '#/components/Typography'
 
 type StarterPackScreeProps = NativeStackScreenProps<
@@ -106,23 +107,40 @@ function StarterPackScreenInner({
   routeParams: StarterPackScreeProps['route']['params']
   moderationOpts: ModerationOpts
 }) {
-  const shortenLink = useShortenLink()
-
   const tabs = [
     ...(starterPack.list ? ['People'] : []),
     ...(starterPack.feeds?.length ? ['Feeds'] : []),
   ]
 
-  const onShareLink = async () => {
+  const qrCodeDialogControl = useDialogControl()
-    const res = await shortenLink(
+  const shareDialogControl = useDialogControl()
-      makeStarterPackLink(starterPack.creator.did, routeParams.rkey),
+
+  const shortenLink = useShortenLink()
+  const [link, setLink] = React.useState<string>()
+  const [imageLoaded, setImageLoaded] = React.useState(false)
+
+  const onOpenShareDialog = React.useCallback(() => {
+    const rkey = new AtUri(starterPack.uri).rkey
+    shortenLink(makeStarterPackLink(starterPack.creator.did, rkey)).then(
+      res => {
+        setLink(res.url)
+      },
     )
-    shareUrl(res.url)
+    Image.prefetch(getStarterPackOgCard(starterPack))
-    logEvent('starterPack:share', {
+      .then(() => {
-      starterPack: starterPack.uri,
+        setImageLoaded(true)
-      shareType: 'link',
+      })
-    })
+      .catch(() => {
-  }
+        setImageLoaded(true)
+      })
+    shareDialogControl.open()
+  }, [shareDialogControl, shortenLink, starterPack])
+
+  React.useEffect(() => {
+    if (routeParams.new) {
+      onOpenShareDialog()
+    }
+  }, [onOpenShareDialog, routeParams.new, shareDialogControl])
 
   return (
     <CenteredView style={[a.h_full_vh]}>
@@ -134,7 +152,7 @@ function StarterPackScreenInner({
             <Header
               starterPack={starterPack}
               routeParams={routeParams}
-              onShareLink={onShareLink}
+              onOpenShareDialog={onOpenShareDialog}
             />
           )}>
           {starterPack.list != null
@@ -164,6 +182,19 @@ function StarterPackScreenInner({
             : null}
         </PagerWithHeader>
       </View>
+
+      <QrCodeDialog
+        control={qrCodeDialogControl}
+        starterPack={starterPack}
+        link={link}
+      />
+      <ShareDialog
+        control={shareDialogControl}
+        qrDialogControl={qrCodeDialogControl}
+        starterPack={starterPack}
+        link={link}
+        imageLoaded={imageLoaded}
+      />
     </CenteredView>
   )
 }
@@ -171,11 +202,11 @@ function StarterPackScreenInner({
 function Header({
   starterPack,
   routeParams,
-  onShareLink,
+  onOpenShareDialog,
 }: {
   starterPack: AppBskyGraphDefs.StarterPackView
   routeParams: StarterPackScreeProps['route']['params']
-  onShareLink: () => void
+  onOpenShareDialog: () => void
 }) {
   const {_} = useLingui()
   const t = useTheme()
@@ -236,10 +267,17 @@ function Header({
         avatarType="starter-pack">
         <View style={[a.flex_row, a.gap_sm, a.align_center]}>
           {isOwn ? (
-            <OwnerShareMenu
+            <Button
-              starterPack={starterPack}
+              label={_(msg`Share this starter pack`)}
-              onShareLink={onShareLink}
+              hitSlop={HITSLOP_20}
-            />
+              variant="solid"
+              color="primary"
+              size="small"
+              onPress={onOpenShareDialog}>
+              <ButtonText>
+                <Trans>Share</Trans>
+              </ButtonText>
+            </Button>
           ) : (
             <Button
               label={_(msg`Follow all`)}
@@ -257,7 +295,7 @@ function Header({
           <OverflowMenu
             routeParams={routeParams}
             starterPack={starterPack}
-            onShareLink={onShareLink}
+            onOpenShareDialog={onOpenShareDialog}
           />
         </View>
       </ProfileSubpageHeader>
@@ -293,17 +331,16 @@ function Header({
 function OverflowMenu({
   starterPack,
   routeParams,
-  onShareLink,
+  onOpenShareDialog,
 }: {
   starterPack: AppBskyGraphDefs.StarterPackView
   routeParams: StarterPackScreeProps['route']['params']
-  onShareLink: () => void
+  onOpenShareDialog: () => void
 }) {
   const t = useTheme()
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {currentAccount} = useSession()
-  const qrCodeDialogControl = useDialogControl()
   const reportDialogControl = useReportDialogControl()
   const deleteDialogControl = useDialogControl()
   const navigation = useNavigation<NavigationProp>()
@@ -389,23 +426,14 @@ function OverflowMenu({
             <>
               <Menu.Group>
                 <Menu.Item
-                  label={_(msg`Share link`)}
+                  label={_(msg`Share`)}
                   testID="shareStarterPackLinkBtn"
-                  onPress={onShareLink}>
+                  onPress={onOpenShareDialog}>
                   <Menu.ItemText>
                     <Trans>Share link</Trans>
                   </Menu.ItemText>
                   <Menu.ItemIcon icon={ArrowOutOfBox} position="right" />
                 </Menu.Item>
-                <Menu.Item
-                  label={_(msg`Create QR code`)}
-                  testID="createQRCodeBtn"
-                  onPress={qrCodeDialogControl.open}>
-                  <Menu.ItemText>
-                    <Trans>Create QR code</Trans>
-                  </Menu.ItemText>
-                  <Menu.ItemIcon icon={QrCode} position="right" />
-                </Menu.Item>
               </Menu.Group>
 
               <Menu.Item
@@ -421,14 +449,13 @@ function OverflowMenu({
         </Menu.Outer>
       </Menu.Root>
 
-      <QrCodeDialog control={qrCodeDialogControl} starterPack={starterPack} />
       <ReportDialog
-        control={reportDialogControl}
         params={{
           type: 'starterpack',
           uri: starterPack.list!.uri,
           cid: starterPack.list!.cid,
         }}
+        control={reportDialogControl}
       />
 
       <Prompt.Outer control={deleteDialogControl}>
@@ -477,61 +504,3 @@ function OverflowMenu({
     </>
   )
 }
-
-function OwnerShareMenu({
-  starterPack,
-  onShareLink,
-}: {
-  starterPack: AppBskyGraphDefs.StarterPackView
-  onShareLink: () => void
-}) {
-  const {_} = useLingui()
-  const qrCodeDialogControl = useDialogControl()
-
-  return (
-    <>
-      <Menu.Root>
-        <Menu.Trigger label={_(msg`Repost or quote post`)}>
-          {({props}) => (
-            <Button
-              {...props}
-              label={_(msg`Share this starter pack`)}
-              hitSlop={HITSLOP_20}
-              variant="solid"
-              color="primary"
-              size="small">
-              <ButtonText>
-                <Trans>Share</Trans>
-              </ButtonText>
-              <ButtonIcon icon={ChevronDown} position="right" />
-            </Button>
-          )}
-        </Menu.Trigger>
-        <Menu.Outer style={{minWidth: 170}}>
-          <Menu.Group>
-            <Menu.Item
-              label={_(msg`Share link`)}
-              testID="shareStarterPackLinkBtn"
-              onPress={onShareLink}>
-              <Menu.ItemText>
-                <Trans>Share link</Trans>
-              </Menu.ItemText>
-              <Menu.ItemIcon icon={ArrowOutOfBox} position="right" />
-            </Menu.Item>
-            <Menu.Item
-              label={_(msg`Create QR code`)}
-              testID="createQRCodeBtn"
-              onPress={qrCodeDialogControl.open}>
-              <Menu.ItemText>
-                <Trans>Create QR code</Trans>
-              </Menu.ItemText>
-              <Menu.ItemIcon icon={QrCode} position="right" />
-            </Menu.Item>
-          </Menu.Group>
-        </Menu.Outer>
-      </Menu.Root>
-
-      <QrCodeDialog control={qrCodeDialogControl} starterPack={starterPack} />
-    </>
-  )
-}

src/screens/StarterPack/Wizard/index.tsx

@@ -5,6 +5,7 @@ import {
   useKeyboardController,
 } from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import {Image} from 'expo-image'
 import {
   AppBskyActorDefs,
   AppBskyGraphDefs,
@@ -25,7 +26,10 @@ import {logEvent} from 'lib/statsig/statsig'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {enforceLen} from 'lib/strings/helpers'
-import {parseStarterPackUri} from 'lib/strings/starter-pack'
+import {
+  getStarterPackOgCard,
+  parseStarterPackUri,
+} from 'lib/strings/starter-pack'
 import {isAndroid, isNative, isWeb} from 'platform/detection'
 import {useModerationOpts} from 'state/preferences/moderation-opts'
 import {useListMembersQuery} from 'state/queries/list-members'
@@ -209,10 +213,12 @@ function WizardInner({
       profilesCount: state.profiles.length,
       feedsCount: state.feeds.length,
     })
+    Image.prefetch([getStarterPackOgCard(currentProfile!.did, rkey)])
     dispatch({type: 'SetProcessing', processing: false})
     navigation.replace('StarterPack', {
       name: currentAccount!.handle,
       rkey,
+      new: true,
     })
   }