robinwobin.dev
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
i18n interests, allow for fallbacks (#2692)
authored by
Eric Bailey
and committed by
GitHub
bb7ce215
40581746
+3
src/lib/strings/capitalize.ts
+3
src/lib/strings/capitalize.ts
+4
-2
src/screens/Onboarding/StepInterests/InterestButton.tsx
+4
-2
src/screens/Onboarding/StepInterests/InterestButton.tsx
···
4
4
import {useTheme, atoms as a, native} from '#/alf'
5
5
import * as Toggle from '#/components/forms/Toggle'
6
6
import {Text} from '#/components/Typography'
7
+
import {capitalize} from '#/lib/strings/capitalize'
7
8
8
-
import {INTEREST_TO_DISPLAY_NAME} from '#/screens/Onboarding/StepInterests/data'
9
+
import {Context} from '#/screens/Onboarding/state'
9
10
10
11
export function InterestButton({interest}: {interest: string}) {
11
12
const t = useTheme()
13
+
const {interestsDisplayNames} = React.useContext(Context)
12
14
const ctx = Toggle.useItemContext()
13
15
14
16
const styles = React.useMemo(() => {
···
72
74
native({paddingTop: 2}),
73
75
ctx.selected ? styles.textSelected : {},
74
76
]}>
75
-
{INTEREST_TO_DISPLAY_NAME[interest]}
77
+
{interestsDisplayNames[interest] || capitalize(interest)}
76
78
</Text>
77
79
</View>
78
80
)
-36
src/screens/Onboarding/StepInterests/data.ts
-36
src/screens/Onboarding/StepInterests/data.ts
···
1
-
export const INTEREST_TO_DISPLAY_NAME: {
2
-
[key: string]: string
3
-
} = {
4
-
news: 'News',
5
-
journalism: 'Journalism',
6
-
nature: 'Nature',
7
-
art: 'Art',
8
-
comics: 'Comics',
9
-
writers: 'Writers',
10
-
culture: 'Culture',
11
-
sports: 'Sports',
12
-
pets: 'Pets',
13
-
animals: 'Animals',
14
-
books: 'Books',
15
-
education: 'Education',
16
-
climate: 'Climate',
17
-
science: 'Science',
18
-
politics: 'Politics',
19
-
fitness: 'Fitness',
20
-
tech: 'Tech',
21
-
dev: 'Software Dev',
22
-
comedy: 'Comedy',
23
-
gaming: 'Video Games',
24
-
food: 'Food',
25
-
cooking: 'Cooking',
26
-
}
27
-
28
-
export type ApiResponseMap = {
29
-
interests: string[]
30
-
suggestedAccountDids: {
31
-
[key: string]: string[]
32
-
}
33
-
suggestedFeedUris: {
34
-
[key: string]: string[]
35
-
}
36
-
}
+6
-7
src/screens/Onboarding/StepInterests/index.tsx
+6
-7
src/screens/Onboarding/StepInterests/index.tsx
···
17
17
import {useAnalytics} from '#/lib/analytics/analytics'
18
18
import {Text} from '#/components/Typography'
19
19
import {useOnboardingDispatch} from '#/state/shell'
20
+
import {capitalize} from '#/lib/strings/capitalize'
20
21
21
-
import {Context} from '#/screens/Onboarding/state'
22
+
import {Context, ApiResponseMap} from '#/screens/Onboarding/state'
22
23
import {
23
24
Title,
24
25
Description,
25
26
OnboardingControls,
26
27
} from '#/screens/Onboarding/Layout'
27
-
import {
28
-
ApiResponseMap,
29
-
INTEREST_TO_DISPLAY_NAME,
30
-
} from '#/screens/Onboarding/StepInterests/data'
31
28
import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
32
29
import {IconCircle} from '#/screens/Onboarding/IconCircle'
33
30
···
36
33
const t = useTheme()
37
34
const {track} = useAnalytics()
38
35
const {gtMobile} = useBreakpoints()
39
-
const {state, dispatch} = React.useContext(Context)
36
+
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
40
37
const [saving, setSaving] = React.useState(false)
41
38
const [interests, setInterests] = React.useState<string[]>(
42
39
state.interestsStepResults.selectedInterests.map(i => i),
···
202
199
<Toggle.Item
203
200
key={interest}
204
201
name={interest}
205
-
label={INTEREST_TO_DISPLAY_NAME[interest]}>
202
+
label={
203
+
interestsDisplayNames[interest] || capitalize(interest)
204
+
}>
206
205
<InterestButton interest={interest} />
207
206
</Toggle.Item>
208
207
))}
+4
-4
src/screens/Onboarding/StepSuggestedAccounts/index.tsx
+4
-4
src/screens/Onboarding/StepSuggestedAccounts/index.tsx
···
14
14
import * as Toggle from '#/components/forms/Toggle'
15
15
import {useModerationOpts} from '#/state/queries/preferences'
16
16
import {useAnalytics} from '#/lib/analytics/analytics'
17
+
import {capitalize} from '#/lib/strings/capitalize'
17
18
18
19
import {Context} from '#/screens/Onboarding/state'
19
20
import {
···
25
26
SuggestedAccountCard,
26
27
SuggestedAccountCardPlaceholder,
27
28
} from '#/screens/Onboarding/StepSuggestedAccounts/SuggestedAccountCard'
28
-
import {INTEREST_TO_DISPLAY_NAME} from '#/screens/Onboarding/StepInterests/data'
29
29
import {aggregateInterestItems} from '#/screens/Onboarding/util'
30
30
import {IconCircle} from '#/screens/Onboarding/IconCircle'
31
31
···
70
70
export function StepSuggestedAccounts() {
71
71
const {_} = useLingui()
72
72
const {track} = useAnalytics()
73
-
const {state, dispatch} = React.useContext(Context)
73
+
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
74
74
const {gtMobile} = useBreakpoints()
75
75
const suggestedDids = React.useMemo(() => {
76
76
return aggregateInterestItems(
···
93
93
94
94
const interestsText = React.useMemo(() => {
95
95
const i = state.interestsStepResults.selectedInterests.map(
96
-
i => INTEREST_TO_DISPLAY_NAME[i],
96
+
i => interestsDisplayNames[i] || capitalize(i),
97
97
)
98
98
return i.join(', ')
99
-
}, [state.interestsStepResults.selectedInterests])
99
+
}, [state.interestsStepResults.selectedInterests, interestsDisplayNames])
100
100
101
101
const handleContinue = React.useCallback(async () => {
102
102
setSaving(true)
+4
-4
src/screens/Onboarding/StepTopicalFeeds.tsx
+4
-4
src/screens/Onboarding/StepTopicalFeeds.tsx
···
10
10
import * as Toggle from '#/components/forms/Toggle'
11
11
import {Loader} from '#/components/Loader'
12
12
import {useAnalytics} from '#/lib/analytics/analytics'
13
+
import {capitalize} from '#/lib/strings/capitalize'
13
14
14
15
import {Context} from '#/screens/Onboarding/state'
15
16
import {
···
18
19
OnboardingControls,
19
20
} from '#/screens/Onboarding/Layout'
20
21
import {FeedCard} from '#/screens/Onboarding/StepAlgoFeeds/FeedCard'
21
-
import {INTEREST_TO_DISPLAY_NAME} from '#/screens/Onboarding/StepInterests/data'
22
22
import {aggregateInterestItems} from '#/screens/Onboarding/util'
23
23
import {IconCircle} from '#/screens/Onboarding/IconCircle'
24
24
25
25
export function StepTopicalFeeds() {
26
26
const {_} = useLingui()
27
27
const {track} = useAnalytics()
28
-
const {state, dispatch} = React.useContext(Context)
28
+
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
29
29
const [selectedFeedUris, setSelectedFeedUris] = React.useState<string[]>([])
30
30
const [saving, setSaving] = React.useState(false)
31
31
const suggestedFeedUris = React.useMemo(() => {
···
38
38
39
39
const interestsText = React.useMemo(() => {
40
40
const i = state.interestsStepResults.selectedInterests.map(
41
-
i => INTEREST_TO_DISPLAY_NAME[i],
41
+
i => interestsDisplayNames[i] || capitalize(i),
42
42
)
43
43
return i.join(', ')
44
-
}, [state.interestsStepResults.selectedInterests])
44
+
}, [state.interestsStepResults.selectedInterests, interestsDisplayNames])
45
45
46
46
const saveFeeds = React.useCallback(async () => {
47
47
setSaving(true)
+34
-1
src/screens/Onboarding/index.tsx
+34
-1
src/screens/Onboarding/index.tsx
···
1
1
import React from 'react'
2
+
import {useLingui} from '@lingui/react'
3
+
import {msg} from '@lingui/macro'
2
4
3
5
import {Portal} from '#/components/Portal'
4
6
···
13
15
import {StepModeration} from '#/screens/Onboarding/StepModeration'
14
16
15
17
export function Onboarding() {
18
+
const {_} = useLingui()
16
19
const [state, dispatch] = React.useReducer(reducer, {...initialState})
17
20
21
+
const interestsDisplayNames = React.useMemo(() => {
22
+
return {
23
+
news: _(msg`News`),
24
+
journalism: _(msg`Journalism`),
25
+
nature: _(msg`Nature`),
26
+
art: _(msg`Art`),
27
+
comics: _(msg`Comics`),
28
+
writers: _(msg`Writers`),
29
+
culture: _(msg`Culture`),
30
+
sports: _(msg`Sports`),
31
+
pets: _(msg`Pets`),
32
+
animals: _(msg`Animals`),
33
+
books: _(msg`Books`),
34
+
education: _(msg`Education`),
35
+
climate: _(msg`Climate`),
36
+
science: _(msg`Science`),
37
+
politics: _(msg`Politics`),
38
+
fitness: _(msg`Fitness`),
39
+
tech: _(msg`Tech`),
40
+
dev: _(msg`Software Dev`),
41
+
comedy: _(msg`Comedy`),
42
+
gaming: _(msg`Video Games`),
43
+
food: _(msg`Food`),
44
+
cooking: _(msg`Cooking`),
45
+
}
46
+
}, [_])
47
+
18
48
return (
19
49
<Portal>
20
50
<OnboardingControls.Provider>
21
51
<Context.Provider
22
-
value={React.useMemo(() => ({state, dispatch}), [state, dispatch])}>
52
+
value={React.useMemo(
53
+
() => ({state, dispatch, interestsDisplayNames}),
54
+
[state, dispatch, interestsDisplayNames],
55
+
)}>
23
56
<Layout>
24
57
{state.activeStep === 'interests' && <StepInterests />}
25
58
{state.activeStep === 'suggestedAccounts' && (
+39
-1
src/screens/Onboarding/state.ts
+39
-1
src/screens/Onboarding/state.ts
···
1
1
import React from 'react'
2
2
3
-
import {ApiResponseMap} from '#/screens/Onboarding/StepInterests/data'
4
3
import {logger} from '#/logger'
5
4
6
5
export type OnboardingState = {
···
59
58
feedUris: string[]
60
59
}
61
60
61
+
export type ApiResponseMap = {
62
+
interests: string[]
63
+
suggestedAccountDids: {
64
+
[key: string]: string[]
65
+
}
66
+
suggestedFeedUris: {
67
+
[key: string]: string[]
68
+
}
69
+
}
70
+
62
71
export const initialState: OnboardingState = {
63
72
hasPrev: false,
64
73
totalSteps: 7,
···
84
93
},
85
94
}
86
95
96
+
export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
97
+
[key: string]: string
98
+
} = {
99
+
news: 'News',
100
+
journalism: 'Journalism',
101
+
nature: 'Nature',
102
+
art: 'Art',
103
+
comics: 'Comics',
104
+
writers: 'Writers',
105
+
culture: 'Culture',
106
+
sports: 'Sports',
107
+
pets: 'Pets',
108
+
animals: 'Animals',
109
+
books: 'Books',
110
+
education: 'Education',
111
+
climate: 'Climate',
112
+
science: 'Science',
113
+
politics: 'Politics',
114
+
fitness: 'Fitness',
115
+
tech: 'Tech',
116
+
dev: 'Software Dev',
117
+
comedy: 'Comedy',
118
+
gaming: 'Video Games',
119
+
food: 'Food',
120
+
cooking: 'Cooking',
121
+
}
122
+
87
123
export const Context = React.createContext<{
88
124
state: OnboardingState
89
125
dispatch: React.Dispatch<OnboardingAction>
126
+
interestsDisplayNames: {[key: string]: string}
90
127
}>({
91
128
state: {...initialState},
92
129
dispatch: () => {},
130
+
interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS,
93
131
})
94
132
95
133
export function reducer(
+9
-1
src/screens/Onboarding/util.ts
+9
-1
src/screens/Onboarding/util.ts
···
31
31
const selected = interests.length
32
32
const all = interests
33
33
.map(i => {
34
-
const suggestions = shuffle(map[i])
34
+
// suggestions from server
35
+
const rawSuggestions = map[i]
36
+
37
+
// safeguard against a missing interest->suggestion mapping
38
+
if (!rawSuggestions || !rawSuggestions.length) {
39
+
return []
40
+
}
41
+
42
+
const suggestions = shuffle(rawSuggestions)
35
43
36
44
if (selected === 1) {
37
45
return suggestions // return all