[D1X] Onboarding interest display names (#4657)

* Translate interest names in onboarding

* Add comment

* Do it the normal way

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(() => {

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<string[]>(
     state.interestsStepResults.selectedInterests.map(i => i),

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: {
+export function useInterestsDisplayNames() {
-  [key: string]: string
+  const {_} = useLingui()
-} = {
+
-  news: 'News',
+  return React.useMemo<Record<string, string>>(() => {
-  journalism: 'Journalism',
+    return {
-  nature: 'Nature',
+      // Keep this alphabetized
-  art: 'Art',
+      animals: _(msg`Animals`),
-  comics: 'Comics',
+      art: _(msg`Art`),
-  writers: 'Writers',
+      books: _(msg`Books`),
-  culture: 'Culture',
+      comedy: _(msg`Comedy`),
-  sports: 'Sports',
+      comics: _(msg`Comics`),
-  pets: 'Pets',
+      culture: _(msg`Culture`),
-  animals: 'Animals',
+      dev: _(msg`Software Dev`),
-  books: 'Books',
+      education: _(msg`Education`),
-  education: 'Education',
+      food: _(msg`Food`),
-  climate: 'Climate',
+      gaming: _(msg`Video Games`),
-  science: 'Science',
+      journalism: _(msg`Journalism`),
-  politics: 'Politics',
+      movies: _(msg`Movies`),
-  fitness: 'Fitness',
+      nature: _(msg`Nature`),
-  tech: 'Tech',
+      news: _(msg`News`),
-  dev: 'Software Dev',
+      pets: _(msg`Pets`),
-  comedy: 'Comedy',
+      photography: _(msg`Photography`),
-  gaming: 'Video Games',
+      politics: _(msg`Politics`),
-  food: 'Food',
+      science: _(msg`Science`),
-  cooking: 'Cooking',
+      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(