[D1X] Onboarding interest display names (#4657)

* Translate interest names in onboarding

* Add comment

* Do it the normal way
zio/stable
Eric Bailey 2024-06-26 16:35:42 -05:00 committed by GitHub
parent c4dce4ce45
commit 368cd7bb0e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 44 additions and 35 deletions

View File

@ -1,16 +1,15 @@
import React from 'react'
import {View, ViewStyle, TextStyle} from 'react-native'
import {TextStyle, View, ViewStyle} from 'react-native'
import {useTheme, atoms as a, native} from '#/alf'
import {capitalize} from '#/lib/strings/capitalize'
import {useInterestsDisplayNames} from '#/screens/Onboarding/state'
import {atoms as a, native, useTheme} from '#/alf'
import * as Toggle from '#/components/forms/Toggle'
import {Text} from '#/components/Typography'
import {capitalize} from '#/lib/strings/capitalize'
import {Context} from '#/screens/Onboarding/state'
export function InterestButton({interest}: {interest: string}) {
const t = useTheme()
const {interestsDisplayNames} = React.useContext(Context)
const interestsDisplayNames = useInterestsDisplayNames()
const ctx = Toggle.useItemContext()
const styles = React.useMemo(() => {

View File

@ -15,7 +15,11 @@ import {
OnboardingControls,
TitleText,
} from '#/screens/Onboarding/Layout'
import {ApiResponseMap, Context} from '#/screens/Onboarding/state'
import {
ApiResponseMap,
Context,
useInterestsDisplayNames,
} from '#/screens/Onboarding/state'
import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {Button, ButtonIcon, ButtonText} from '#/components/Button'
@ -33,8 +37,9 @@ export function StepInterests() {
const t = useTheme()
const {gtMobile} = useBreakpoints()
const {track} = useAnalytics()
const interestsDisplayNames = useInterestsDisplayNames()
const {state, dispatch, interestsDisplayNames} = React.useContext(Context)
const {state, dispatch} = React.useContext(Context)
const [saving, setSaving] = React.useState(false)
const [interests, setInterests] = React.useState<string[]>(
state.interestsStepResults.selectedInterests.map(i => i),

View File

@ -1,4 +1,6 @@
import React from 'react'
import {msg} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {logger} from '#/logger'
import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types'
@ -68,31 +70,36 @@ export type ApiResponseMap = {
}
}
export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: {
[key: string]: string
} = {
news: 'News',
journalism: 'Journalism',
nature: 'Nature',
art: 'Art',
comics: 'Comics',
writers: 'Writers',
culture: 'Culture',
sports: 'Sports',
pets: 'Pets',
animals: 'Animals',
books: 'Books',
education: 'Education',
climate: 'Climate',
science: 'Science',
politics: 'Politics',
fitness: 'Fitness',
tech: 'Tech',
dev: 'Software Dev',
comedy: 'Comedy',
gaming: 'Video Games',
food: 'Food',
cooking: 'Cooking',
export function useInterestsDisplayNames() {
const {_} = useLingui()
return React.useMemo<Record<string, string>>(() => {
return {
// Keep this alphabetized
animals: _(msg`Animals`),
art: _(msg`Art`),
books: _(msg`Books`),
comedy: _(msg`Comedy`),
comics: _(msg`Comics`),
culture: _(msg`Culture`),
dev: _(msg`Software Dev`),
education: _(msg`Education`),
food: _(msg`Food`),
gaming: _(msg`Video Games`),
journalism: _(msg`Journalism`),
movies: _(msg`Movies`),
nature: _(msg`Nature`),
news: _(msg`News`),
pets: _(msg`Pets`),
photography: _(msg`Photography`),
politics: _(msg`Politics`),
science: _(msg`Science`),
sports: _(msg`Sports`),
tech: _(msg`Tech`),
tv: _(msg`TV`),
writers: _(msg`Writers`),
}
}, [_])
}
export const initialState: OnboardingState = {
@ -120,11 +127,9 @@ export const initialState: OnboardingState = {
export const Context = React.createContext<{
state: OnboardingState
dispatch: React.Dispatch<OnboardingAction>
interestsDisplayNames: {[key: string]: string}
}>({
state: {...initialState},
dispatch: () => {},
interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS,
})
export function reducer(