forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[D1X] Onboarding interest display names (#4657)
* Translate interest names in onboarding
* Add comment
* Do it the normal way
authored by
Eric Bailey
and committed by
GitHub
368cd7bb
c4dce4ce
+44
-35
+5
-6
src/screens/Onboarding/StepInterests/InterestButton.tsx
+5
-6
src/screens/Onboarding/StepInterests/InterestButton.tsx
···
1
1
import React from 'react'
2
-
import {View, ViewStyle, TextStyle} from 'react-native'
2
+
import {TextStyle, View, ViewStyle} from 'react-native'
3
3
4
-
import {useTheme, atoms as a, native} from '#/alf'
4
+
import {capitalize} from '#/lib/strings/capitalize'
5
+
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
6
+
import {atoms as a, native, useTheme} from '#/alf'
5
7
import * as Toggle from '#/components/forms/Toggle'
6
8
import {Text} from '#/components/Typography'
7
-
import {capitalize} from '#/lib/strings/capitalize'
8
-
9
-
import {Context} from '#/screens/Onboarding/state'
10
9
11
10
export function InterestButton({interest}: {interest: string}) {
12
11
const t = useTheme()
13
-
const {interestsDisplayNames} = React.useContext(Context)
12
+
const interestsDisplayNames = useInterestsDisplayNames()
14
13
const ctx = Toggle.useItemContext()
15
14
16
15
const styles = React.useMemo(() => {
+7
-2
src/screens/Onboarding/StepInterests/index.tsx
+7
-2
src/screens/Onboarding/StepInterests/index.tsx
···
15
15
OnboardingControls,
16
16
TitleText,
17
17
} from '#/screens/Onboarding/Layout'
18
-
import {ApiResponseMap, Context} from '#/screens/Onboarding/state'
18
+
import {
19
+
ApiResponseMap,
20
+
Context,
21
+
useInterestsDisplayNames,
22
+
} from '#/screens/Onboarding/state'
19
23
import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
20
24
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
21
25
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
···
33
37
const t = useTheme()
34
38
const {gtMobile} = useBreakpoints()
35
39
const {track} = useAnalytics()
40
+
const interestsDisplayNames = useInterestsDisplayNames()
36
41
37
-
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
42
+
const {state, dispatch} = React.useContext(Context)
38
43
const [saving, setSaving] = React.useState(false)
39
44
const [interests, setInterests] = React.useState<string[]>(
40
45
state.interestsStepResults.selectedInterests.map(i => i),
+32
-27
src/screens/Onboarding/state.ts
+32
-27
src/screens/Onboarding/state.ts
···
1
1
import React from 'react'
2
+
import {msg} from '@lingui/macro'
3
+
import {useLingui} from '@lingui/react'
2
4
3
5
import {logger} from '#/logger'
4
6
import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types'
···
68
70
}
69
71
}
70
72
71
-
export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
72
-
[key: string]: string
73
-
} = {
74
-
news: 'News',
75
-
journalism: 'Journalism',
76
-
nature: 'Nature',
77
-
art: 'Art',
78
-
comics: 'Comics',
79
-
writers: 'Writers',
80
-
culture: 'Culture',
81
-
sports: 'Sports',
82
-
pets: 'Pets',
83
-
animals: 'Animals',
84
-
books: 'Books',
85
-
education: 'Education',
86
-
climate: 'Climate',
87
-
science: 'Science',
88
-
politics: 'Politics',
89
-
fitness: 'Fitness',
90
-
tech: 'Tech',
91
-
dev: 'Software Dev',
92
-
comedy: 'Comedy',
93
-
gaming: 'Video Games',
94
-
food: 'Food',
95
-
cooking: 'Cooking',
73
+
export function useInterestsDisplayNames() {
74
+
const {_} = useLingui()
75
+
76
+
return React.useMemo<Record<string, string>>(() => {
77
+
return {
78
+
// Keep this alphabetized
79
+
animals: _(msg`Animals`),
80
+
art: _(msg`Art`),
81
+
books: _(msg`Books`),
82
+
comedy: _(msg`Comedy`),
83
+
comics: _(msg`Comics`),
84
+
culture: _(msg`Culture`),
85
+
dev: _(msg`Software Dev`),
86
+
education: _(msg`Education`),
87
+
food: _(msg`Food`),
88
+
gaming: _(msg`Video Games`),
89
+
journalism: _(msg`Journalism`),
90
+
movies: _(msg`Movies`),
91
+
nature: _(msg`Nature`),
92
+
news: _(msg`News`),
93
+
pets: _(msg`Pets`),
94
+
photography: _(msg`Photography`),
95
+
politics: _(msg`Politics`),
96
+
science: _(msg`Science`),
97
+
sports: _(msg`Sports`),
98
+
tech: _(msg`Tech`),
99
+
tv: _(msg`TV`),
100
+
writers: _(msg`Writers`),
101
+
}
102
+
}, [_])
96
103
}
97
104
98
105
export const initialState: OnboardingState = {
···
120
127
export const Context = React.createContext<{
121
128
state: OnboardingState
122
129
dispatch: React.Dispatch<OnboardingAction>
123
-
interestsDisplayNames: {[key: string]: string}
124
130
}>({
125
131
state: {...initialState},
126
132
dispatch: () => {},
127
-
interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS,
128
133
})
129
134
130
135
export function reducer(