diff options
Diffstat (limited to 'src/screens/Onboarding/StepSuggestedAccounts')
| -rw-r--r-- | src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx | 188 | ||||
| -rw-r--r-- | src/screens/Onboarding/StepSuggestedAccounts/index.tsx | 198 |
2 files changed, 386 insertions, 0 deletions
diff --git a/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx b/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx new file mode 100644 index 000000000..bc707ce8f --- /dev/null +++ b/src/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard.tsx @@ -0,0 +1,188 @@ +import React from 'react' +import {View, ViewStyle} from 'react-native' +import {AppBskyActorDefs, moderateProfile} from '@atproto/api' + +import {useTheme, atoms as a, flatten} from '#/alf' +import {Text} from '#/components/Typography' +import {useItemContext} from '#/components/forms/Toggle' +import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' +import {UserAvatar} from '#/view/com/util/UserAvatar' +import {useModerationOpts} from '#/state/queries/preferences' +import {RichText} from '#/components/RichText' + +export function SuggestedAccountCard({ + profile, + moderationOpts, +}: { + profile: AppBskyActorDefs.ProfileViewDetailed + moderationOpts: ReturnType<typeof useModerationOpts> +}) { + const t = useTheme() + const ctx = useItemContext() + const moderation = moderateProfile(profile, moderationOpts!) + + const styles = React.useMemo(() => { + const light = t.name === 'light' + const base: ViewStyle[] = [t.atoms.bg_contrast_50] + const hover: ViewStyle[] = [t.atoms.bg_contrast_25] + const selected: ViewStyle[] = [ + { + backgroundColor: light ? t.palette.primary_50 : t.palette.primary_950, + }, + ] + const selectedHover: ViewStyle[] = [ + { + backgroundColor: light ? t.palette.primary_25 : t.palette.primary_975, + }, + ] + const checkboxBase: ViewStyle[] = [t.atoms.bg] + const checkboxSelected: ViewStyle[] = [ + { + backgroundColor: t.palette.primary_500, + }, + ] + const avatarBase: ViewStyle[] = [t.atoms.bg_contrast_100] + const avatarSelected: ViewStyle[] = [ + { + backgroundColor: light ? t.palette.primary_100 : t.palette.primary_900, + }, + ] + + return { + base, + hover: flatten(hover), + selected: flatten(selected), + selectedHover: flatten(selectedHover), + checkboxBase: flatten(checkboxBase), + checkboxSelected: flatten(checkboxSelected), + avatarBase: flatten(avatarBase), + avatarSelected: flatten(avatarSelected), + } + }, [t]) + + return ( + <View + style={[ + a.w_full, + a.p_md, + a.pr_lg, + a.gap_md, + a.rounded_md, + styles.base, + (ctx.hovered || ctx.focused || ctx.pressed) && styles.hover, + ctx.selected && styles.selected, + ctx.selected && + (ctx.hovered || ctx.focused || ctx.pressed) && + styles.selectedHover, + ]}> + <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}> + <View style={[a.flex_row, a.flex_1, a.align_center, a.gap_md]}> + <View + style={[ + {width: 48, height: 48}, + a.relative, + a.rounded_full, + styles.avatarBase, + ctx.selected && styles.avatarSelected, + ]}> + <UserAvatar + size={48} + avatar={profile.avatar} + moderation={moderation.avatar} + /> + </View> + <View style={[a.flex_1]}> + <Text style={[a.font_bold, a.text_md, a.pb_xs]} numberOfLines={1}> + {profile.displayName} + </Text> + <Text style={[t.atoms.text_contrast_600]}>{profile.handle}</Text> + </View> + </View> + + <View + style={[ + a.justify_center, + a.align_center, + a.rounded_sm, + styles.checkboxBase, + ctx.selected && styles.checkboxSelected, + { + width: 28, + height: 28, + }, + ]}> + {ctx.selected && <Check size="sm" fill={t.palette.white} />} + </View> + </View> + + {profile.description && ( + <> + <View + style={[ + { + opacity: ctx.selected ? 0.3 : 1, + borderTopWidth: 1, + }, + a.w_full, + t.name === 'light' ? t.atoms.border : t.atoms.border_contrast, + ctx.selected && { + borderTopColor: t.palette.primary_200, + }, + ]} + /> + + <RichText + value={profile.description} + disableLinks + numberOfLines={2} + /> + </> + )} + </View> + ) +} + +export function SuggestedAccountCardPlaceholder() { + const t = useTheme() + return ( + <View + style={[ + a.w_full, + a.flex_row, + a.justify_between, + a.align_center, + a.p_md, + a.pr_lg, + a.gap_xl, + a.rounded_md, + t.atoms.bg_contrast_25, + ]}> + <View style={[a.flex_row, a.align_center, a.gap_md]}> + <View + style={[ + {width: 48, height: 48}, + a.relative, + a.rounded_full, + t.atoms.bg_contrast_100, + ]} + /> + <View style={[a.gap_xs]}> + <View + style={[ + {width: 100, height: 16}, + a.rounded_sm, + t.atoms.bg_contrast_100, + ]} + /> + <View + style={[ + {width: 60, height: 12}, + a.rounded_sm, + t.atoms.bg_contrast_100, + ]} + /> + </View> + </View> + </View> + ) +} diff --git a/src/screens/Onboarding/StepSuggestedAccounts/index.tsx b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx new file mode 100644 index 000000000..723e53a98 --- /dev/null +++ b/src/screens/Onboarding/StepSuggestedAccounts/index.tsx @@ -0,0 +1,198 @@ +import React from 'react' +import {View} from 'react-native' +import {AppBskyActorDefs} from '@atproto/api' +import {useLingui} from '@lingui/react' +import {msg, Trans} from '@lingui/macro' + +import {atoms as a, useBreakpoints} from '#/alf' +import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus' +import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' +import {Button, ButtonIcon, ButtonText} from '#/components/Button' +import {Text} from '#/components/Typography' +import {useProfilesQuery} from '#/state/queries/profile' +import {Loader} from '#/components/Loader' +import * as Toggle from '#/components/forms/Toggle' +import {useModerationOpts} from '#/state/queries/preferences' +import {useAnalytics} from '#/lib/analytics/analytics' + +import {Context} from '#/screens/Onboarding/state' +import { + Title, + Description, + OnboardingControls, +} from '#/screens/Onboarding/Layout' +import { + SuggestedAccountCard, + SuggestedAccountCardPlaceholder, +} from '#/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard' +import {INTEREST_TO_DISPLAY_NAME} from '#/screens/Onboarding/StepInterests/data' +import {aggregateInterestItems} from '#/screens/Onboarding/util' +import {IconCircle} from '#/screens/Onboarding/IconCircle' + +export function Inner({ + profiles, + onSelect, + moderationOpts, +}: { + profiles: AppBskyActorDefs.ProfileViewDetailed[] + onSelect: (dids: string[]) => void + moderationOpts: ReturnType<typeof useModerationOpts> +}) { + const {_} = useLingui() + const [dids, setDids] = React.useState<string[]>(profiles.map(p => p.did)) + + React.useEffect(() => { + onSelect(dids) + }, [dids, onSelect]) + + return ( + <Toggle.Group + values={dids} + onChange={setDids} + label={_(msg`Select some accounts below to follow`)}> + <View style={[a.gap_md]}> + {profiles.map(profile => ( + <Toggle.Item + key={profile.did} + name={profile.did} + label={_(msg`Follow ${profile.handle}`)}> + <SuggestedAccountCard + profile={profile} + moderationOpts={moderationOpts} + /> + </Toggle.Item> + ))} + </View> + </Toggle.Group> + ) +} + +export function StepSuggestedAccounts() { + const {_} = useLingui() + const {track} = useAnalytics() + const {state, dispatch} = React.useContext(Context) + const {gtMobile} = useBreakpoints() + const suggestedDids = React.useMemo(() => { + return aggregateInterestItems( + state.interestsStepResults.selectedInterests, + state.interestsStepResults.apiResponse.suggestedAccountDids, + state.interestsStepResults.apiResponse.suggestedAccountDids.default, + ) + }, [state.interestsStepResults]) + const moderationOpts = useModerationOpts() + const { + isLoading: isProfilesLoading, + isError, + data, + error, + } = useProfilesQuery({ + handles: suggestedDids, + }) + const [dids, setDids] = React.useState<string[]>([]) + const [saving, setSaving] = React.useState(false) + + const interestsText = React.useMemo(() => { + const i = state.interestsStepResults.selectedInterests.map( + i => INTEREST_TO_DISPLAY_NAME[i], + ) + return i.join(', ') + }, [state.interestsStepResults.selectedInterests]) + + const handleContinue = React.useCallback(async () => { + setSaving(true) + + if (dids.length) { + dispatch({type: 'setSuggestedAccountsStepResults', accountDids: dids}) + } + + setSaving(false) + dispatch({type: 'next'}) + track('OnboardingV2:StepSuggestedAccounts:Start', { + selectedAccountsLength: dids.length, + }) + }, [dids, setSaving, dispatch, track]) + + const handleSkip = React.useCallback(() => { + // if a user comes back and clicks skip, erase follows + dispatch({type: 'setSuggestedAccountsStepResults', accountDids: []}) + dispatch({type: 'next'}) + }, [dispatch]) + + const isLoading = isProfilesLoading && moderationOpts + + React.useEffect(() => { + track('OnboardingV2:StepSuggestedAccounts:Start') + }, [track]) + + return ( + <View style={[a.align_start]}> + <IconCircle icon={At} style={[a.mb_2xl]} /> + + <Title> + <Trans>Here are some accounts for your to follow</Trans> + </Title> + <Description> + {state.interestsStepResults.selectedInterests.length ? ( + <Trans>Based on your interest in {interestsText}</Trans> + ) : ( + <Trans>These are popular accounts you might like.</Trans> + )} + </Description> + + <View style={[a.w_full, a.pt_xl]}> + {isLoading ? ( + <View style={[a.gap_md]}> + {Array(10) + .fill(0) + .map((_, i) => ( + <SuggestedAccountCardPlaceholder key={i} /> + ))} + </View> + ) : isError || !data ? ( + <Text>{error?.toString()}</Text> + ) : ( + <Inner + profiles={data.profiles} + onSelect={setDids} + moderationOpts={moderationOpts} + /> + )} + </View> + + <OnboardingControls.Portal> + <View + style={[ + a.gap_md, + gtMobile ? {flexDirection: 'row-reverse'} : a.flex_col, + ]}> + <Button + disabled={dids.length === 0} + variant="gradient" + color="gradient_sky" + size="large" + label={_( + msg`Follow selected accounts and continue to then next step`, + )} + onPress={handleContinue}> + <ButtonText> + <Trans>Follow All</Trans> + </ButtonText> + <ButtonIcon icon={saving ? Loader : Plus} position="right" /> + </Button> + <Button + variant="solid" + color="secondary" + size="large" + label={_( + msg`Continue to the next step without following any accounts`, + )} + onPress={handleSkip}> + <ButtonText> + <Trans>Skip</Trans> + </ButtonText> + </Button> + </View> + </OnboardingControls.Portal> + </View> + ) +} |