[D1X] Onboarding interest display names (#4657)

* Translate interest names in onboarding

* Add comment

* Do it the normal way

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<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(