acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

Share dialog for starter packs (#4582)

Browse Source
This commit is contained in:
Hailey
2024-06-20 13:12:48 -07:00
committed by GitHub
parent 95fa536837
commit 0dadfa2f16
6 changed files with 277 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/StarterPack/QrCodeDialog.tsx
+10 -36
View File
@@ -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>
)
}
src/components/StarterPack/ShareDialog.tsx
+180
View File
@@ -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
+2 -2
View File
@@ -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
+13 -1
View File
@@ -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
+65 -96
View File
@@ -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 res = await shortenLink(
makeStarterPackLink(starterPack.creator.did, routeParams.rkey),
const qrCodeDialogControl = useDialogControl()
const shareDialogControl = useDialogControl()
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)
logEvent('starterPack:share', {
starterPack: starterPack.uri,
shareType: 'link',
})
}
Image.prefetch(getStarterPackOgCard(starterPack))
.then(() => {
setImageLoaded(true)
})
.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
starterPack={starterPack}
onShareLink={onShareLink}
/>
<Button
label={_(msg`Share this starter pack`)}
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
+7 -1
View File
@@ -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,
})
}