Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[D1X] Onboarding interest display names (#4657)

* Translate interest names in onboarding

* Add comment

* Do it the normal way

authored by

Eric Bailey and committed by
GitHub
368cd7bb c4dce4ce

+44 -35
+5 -6
src/screens/Onboarding/StepInterests/InterestButton.tsx
··· 1 1 import React from 'react' 2 - import {View, ViewStyle, TextStyle} from 'react-native' 2 + import {TextStyle, View, ViewStyle} from 'react-native' 3 3 4 - import {useTheme, atoms as a, native} from '#/alf' 4 + import {capitalize} from '#/lib/strings/capitalize' 5 + import {useInterestsDisplayNames} from '#/screens/Onboarding/state' 6 + import {atoms as a, native, useTheme} from '#/alf' 5 7 import * as Toggle from '#/components/forms/Toggle' 6 8 import {Text} from '#/components/Typography' 7 - import {capitalize} from '#/lib/strings/capitalize' 8 - 9 - import {Context} from '#/screens/Onboarding/state' 10 9 11 10 export function InterestButton({interest}: {interest: string}) { 12 11 const t = useTheme() 13 - const {interestsDisplayNames} = React.useContext(Context) 12 + const interestsDisplayNames = useInterestsDisplayNames() 14 13 const ctx = Toggle.useItemContext() 15 14 16 15 const styles = React.useMemo(() => {
+7 -2
src/screens/Onboarding/StepInterests/index.tsx
··· 15 15 OnboardingControls, 16 16 TitleText, 17 17 } from '#/screens/Onboarding/Layout' 18 - import {ApiResponseMap, Context} from '#/screens/Onboarding/state' 18 + import { 19 + ApiResponseMap, 20 + Context, 21 + useInterestsDisplayNames, 22 + } from '#/screens/Onboarding/state' 19 23 import {InterestButton} from '#/screens/Onboarding/StepInterests/InterestButton' 20 24 import {atoms as a, useBreakpoints, useTheme} from '#/alf' 21 25 import {Button, ButtonIcon, ButtonText} from '#/components/Button' ··· 33 37 const t = useTheme() 34 38 const {gtMobile} = useBreakpoints() 35 39 const {track} = useAnalytics() 40 + const interestsDisplayNames = useInterestsDisplayNames() 36 41 37 - const {state, dispatch, interestsDisplayNames} = React.useContext(Context) 42 + const {state, dispatch} = React.useContext(Context) 38 43 const [saving, setSaving] = React.useState(false) 39 44 const [interests, setInterests] = React.useState<string[]>( 40 45 state.interestsStepResults.selectedInterests.map(i => i),
+32 -27
src/screens/Onboarding/state.ts
··· 1 1 import React from 'react' 2 + import {msg} from '@lingui/macro' 3 + import {useLingui} from '@lingui/react' 2 4 3 5 import {logger} from '#/logger' 4 6 import {AvatarColor, Emoji} from '#/screens/Onboarding/StepProfile/types' ··· 68 70 } 69 71 } 70 72 71 - export const INTEREST_TO_DISPLAY_NAME_DEFAULTS: { 72 - [key: string]: string 73 - } = { 74 - news: 'News', 75 - journalism: 'Journalism', 76 - nature: 'Nature', 77 - art: 'Art', 78 - comics: 'Comics', 79 - writers: 'Writers', 80 - culture: 'Culture', 81 - sports: 'Sports', 82 - pets: 'Pets', 83 - animals: 'Animals', 84 - books: 'Books', 85 - education: 'Education', 86 - climate: 'Climate', 87 - science: 'Science', 88 - politics: 'Politics', 89 - fitness: 'Fitness', 90 - tech: 'Tech', 91 - dev: 'Software Dev', 92 - comedy: 'Comedy', 93 - gaming: 'Video Games', 94 - food: 'Food', 95 - cooking: 'Cooking', 73 + export function useInterestsDisplayNames() { 74 + const {_} = useLingui() 75 + 76 + return React.useMemo<Record<string, string>>(() => { 77 + return { 78 + // Keep this alphabetized 79 + animals: _(msg`Animals`), 80 + art: _(msg`Art`), 81 + books: _(msg`Books`), 82 + comedy: _(msg`Comedy`), 83 + comics: _(msg`Comics`), 84 + culture: _(msg`Culture`), 85 + dev: _(msg`Software Dev`), 86 + education: _(msg`Education`), 87 + food: _(msg`Food`), 88 + gaming: _(msg`Video Games`), 89 + journalism: _(msg`Journalism`), 90 + movies: _(msg`Movies`), 91 + nature: _(msg`Nature`), 92 + news: _(msg`News`), 93 + pets: _(msg`Pets`), 94 + photography: _(msg`Photography`), 95 + politics: _(msg`Politics`), 96 + science: _(msg`Science`), 97 + sports: _(msg`Sports`), 98 + tech: _(msg`Tech`), 99 + tv: _(msg`TV`), 100 + writers: _(msg`Writers`), 101 + } 102 + }, [_]) 96 103 } 97 104 98 105 export const initialState: OnboardingState = { ··· 120 127 export const Context = React.createContext<{ 121 128 state: OnboardingState 122 129 dispatch: React.Dispatch<OnboardingAction> 123 - interestsDisplayNames: {[key: string]: string} 124 130 }>({ 125 131 state: {...initialState}, 126 132 dispatch: () => {}, 127 - interestsDisplayNames: INTEREST_TO_DISPLAY_NAME_DEFAULTS, 128 133 }) 129 134 130 135 export function reducer(