1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import React from 'react'
import {Portal} from '#/components/Portal'
import {Layout, OnboardingControls} from '#/screens/Onboarding/Layout'
import {Context, initialState, reducer} from '#/screens/Onboarding/state'
import {StepAlgoFeeds} from '#/screens/Onboarding/StepAlgoFeeds'
import {StepFinished} from '#/screens/Onboarding/StepFinished'
import {StepFollowingFeed} from '#/screens/Onboarding/StepFollowingFeed'
import {StepInterests} from '#/screens/Onboarding/StepInterests'
import {StepModeration} from '#/screens/Onboarding/StepModeration'
import {StepSuggestedAccounts} from '#/screens/Onboarding/StepSuggestedAccounts'
import {StepTopicalFeeds} from '#/screens/Onboarding/StepTopicalFeeds'
export function Onboarding() {
const {_} = useLingui()
const [state, dispatch] = React.useReducer(reducer, {...initialState})
const interestsDisplayNames = React.useMemo(() => {
return {
news: _(msg`News`),
journalism: _(msg`Journalism`),
nature: _(msg`Nature`),
art: _(msg`Art`),
comics: _(msg`Comics`),
writers: _(msg`Writers`),
culture: _(msg`Culture`),
sports: _(msg`Sports`),
pets: _(msg`Pets`),
animals: _(msg`Animals`),
books: _(msg`Books`),
education: _(msg`Education`),
climate: _(msg`Climate`),
science: _(msg`Science`),
politics: _(msg`Politics`),
fitness: _(msg`Fitness`),
tech: _(msg`Tech`),
dev: _(msg`Software Dev`),
comedy: _(msg`Comedy`),
gaming: _(msg`Video Games`),
food: _(msg`Food`),
cooking: _(msg`Cooking`),
}
}, [_])
return (
<Portal>
<OnboardingControls.Provider>
<Context.Provider
value={React.useMemo(
() => ({state, dispatch, interestsDisplayNames}),
[state, dispatch, interestsDisplayNames],
)}>
<Layout>
{state.activeStep === 'interests' && <StepInterests />}
{state.activeStep === 'suggestedAccounts' && (
<StepSuggestedAccounts />
)}
{state.activeStep === 'followingFeed' && <StepFollowingFeed />}
{state.activeStep === 'algoFeeds' && <StepAlgoFeeds />}
{state.activeStep === 'topicalFeeds' && <StepTopicalFeeds />}
{state.activeStep === 'moderation' && <StepModeration />}
{state.activeStep === 'finished' && <StepFinished />}
</Layout>
</Context.Provider>
</OnboardingControls.Provider>
</Portal>
)
}
|
