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"
-                    size="medium"
+                    color="secondary"
+                    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>
   )
 }