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