diff --git a/src/screens/Onboarding/StepInterests/InterestButton.tsx b/src/screens/Onboarding/StepInterests/InterestButton.tsx index cc692dafd8..24b34041e0 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 866ea5c2f7..ded473ff59 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 da94a8f6f1..1e8db8b8ad 100644 --- a/src/screens/Onboarding/state.ts +++ b/src/screens/Onboarding/state.ts @@ -1,5 +1,6 @@ import React from 'react' -import {t} from '@lingui/macro' +import {msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' import {logger} from '#/logger' import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types' @@ -69,32 +70,36 @@ export type ApiResponseMap = { } } -export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: { - [key: string]: string -} = { - // Keep this alphabetized - animals: t`Animals`, - art: t`Art`, - books: t`Books`, - comedy: t`Comedy`, - comics: t`Comics`, - culture: t`Culture`, - dev: t`Software Dev`, - education: t`Education`, - food: t`Food`, - gaming: t`Video Games`, - journalism: t`Journalism`, - movies: t`Movies`, - nature: t`Nature`, - news: t`News`, - pets: t`Pets`, - photography: t`Photography`, - politics: t`Politics`, - science: t`Science`, - sports: t`Sports`, - tech: t`Tech`, - tv: t`TV`, - writers: t`Writers`, +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 = { @@ -122,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(