forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
1import {useCallback, useState} from 'react'
2import {View} from 'react-native'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import {Trans} from '@lingui/react/macro'
6
7import {interests, useInterestsDisplayNames} from '#/lib/interests'
8import {capitalize} from '#/lib/strings/capitalize'
9import {logger} from '#/logger'
10import {
11 OnboardingControls,
12 OnboardingDescriptionText,
13 OnboardingPosition,
14 OnboardingTitleText,
15} from '#/screens/Onboarding/Layout'
16import {useOnboardingInternalState} from '#/screens/Onboarding/state'
17import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
18import {atoms as a} from '#/alf'
19import {Button, ButtonIcon, ButtonText} from '#/components/Button'
20import * as Toggle from '#/components/forms/Toggle'
21import {Loader} from '#/components/Loader'
22import {useAnalytics} from '#/analytics'
23
24export function StepInterests() {
25 const {_} = useLingui()
26 const ax = useAnalytics()
27 const interestsDisplayNames = useInterestsDisplayNames()
28
29 const {state, dispatch} = useOnboardingInternalState()
30 const [saving, setSaving] = useState(false)
31 const [selectedInterests, setSelectedInterests] = useState<string[]>(
32 state.interestsStepResults.selectedInterests.map(i => i),
33 )
34
35 const saveInterests = useCallback(async () => {
36 setSaving(true)
37
38 try {
39 setSaving(false)
40 dispatch({
41 type: 'setInterestsStepResults',
42 selectedInterests,
43 })
44 dispatch({type: 'next'})
45 ax.metric('onboarding:interests:nextPressed', {
46 selectedInterests,
47 selectedInterestsLength: selectedInterests.length,
48 })
49 } catch (e: any) {
50 logger.info(`onboading: error saving interests`)
51 logger.error(e)
52 }
53 }, [ax, selectedInterests, setSaving, dispatch])
54
55 return (
56 <View style={[a.align_start, a.gap_sm]} testID="onboardingInterests">
57 <OnboardingPosition />
58 <OnboardingTitleText>
59 <Trans>What are your interests?</Trans>
60 </OnboardingTitleText>
61 <OnboardingDescriptionText>
62 <Trans>We'll use this to help customize your experience.</Trans>
63 </OnboardingDescriptionText>
64
65 <View style={[a.w_full, a.pt_lg]}>
66 <Toggle.Group
67 values={selectedInterests}
68 onChange={setSelectedInterests}
69 label={_(msg`Select your interests from the options below`)}>
70 <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
71 {interests.map(interest => (
72 <Toggle.Item
73 key={interest}
74 name={interest}
75 label={interestsDisplayNames[interest] || capitalize(interest)}>
76 <InterestButton interest={interest} />
77 </Toggle.Item>
78 ))}
79 </View>
80 </Toggle.Group>
81 </View>
82
83 <OnboardingControls.Portal>
84 <Button
85 disabled={saving}
86 testID="onboardingContinue"
87 variant="solid"
88 color="primary"
89 size="large"
90 label={_(msg`Continue to next step`)}
91 onPress={saveInterests}>
92 <ButtonText>
93 <Trans>Continue</Trans>
94 </ButtonText>
95 {saving && <ButtonIcon icon={Loader} />}
96 </Button>
97 </OnboardingControls.Portal>
98 </View>
99 )
100}