diff --git a/src/screens/Onboarding/StepInterests/InterestButton.tsx b/src/screens/Onboarding/StepInterests/InterestButton.tsx index cc692daf..24b34041 100644 --- a/src/screens/Onboarding/StepInterests/InterestButton.tsx +++ b/src/screens/Onboarding/StepInterests/InterestButton.tsx @@ -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(() => { diff --git a/src/screens/Onboarding/StepInterests/index.tsx b/src/screens/Onboarding/StepInterests/index.tsx index 866ea5c2..ded473ff 100644 --- a/src/screens/Onboarding/StepInterests/index.tsx +++ b/src/screens/Onboarding/StepInterests/index.tsx @@ -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( state.interestsStepResults.selectedInterests.map(i => i), diff --git a/src/screens/Onboarding/state.ts b/src/screens/Onboarding/state.ts index 8f61cb22..1e8db8b8 100644 --- a/src/screens/Onboarding/state.ts +++ b/src/screens/Onboarding/state.ts @@ -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>(() => { + 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 - interestsDisplayNames: {[key: string]: string} }>({ state: {...initialState}, dispatch: () => {}, - interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS, }) export function reducer(