diff options
Diffstat (limited to 'src/screens/Onboarding/StepSuggestedAccounts/index.tsx')
| -rw-r--r-- | src/screens/Onboarding/StepSuggestedAccounts/index.tsx | 198 |
1 files changed, 198 insertions, 0 deletions
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> + ) +} |