diff options
Diffstat (limited to 'src/view/com/modals/lang-settings')
4 files changed, 65 insertions, 44 deletions
diff --git a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx index c2d0c222a..91e11a19c 100644 --- a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx +++ b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx @@ -4,6 +4,8 @@ import LinearGradient from 'react-native-linear-gradient' import {s, colors, gradients} from 'lib/styles' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' +import {Trans, msg} from '@lingui/macro' +import {useLingui} from '@lingui/react' export const ConfirmLanguagesButton = ({ onPress, @@ -13,6 +15,7 @@ export const ConfirmLanguagesButton = ({ extraText?: string }) => { const pal = usePalette('default') + const {_} = useLingui() const {isMobile} = useWebMediaQueries() return ( <View @@ -28,14 +31,16 @@ export const ConfirmLanguagesButton = ({ testID="confirmContentLanguagesBtn" onPress={onPress} accessibilityRole="button" - accessibilityLabel="Confirm content language settings" + accessibilityLabel={_(msg`Confirm content language settings`)} accessibilityHint=""> <LinearGradient colors={[gradients.blueLight.start, gradients.blueLight.end]} start={{x: 0, y: 0}} end={{x: 1, y: 1}} style={[styles.btn]}> - <Text style={[s.white, s.bold, s.f18]}>Done{extraText}</Text> + <Text style={[s.white, s.bold, s.f18]}> + <Trans>Done{extraText}</Trans> + </Text> </LinearGradient> </Pressable> </View> diff --git a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx index 910522f90..b8c125b65 100644 --- a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx +++ b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx @@ -1,7 +1,6 @@ import React from 'react' import {StyleSheet, View} from 'react-native' import {ScrollView} from '../util' -import {useStores} from 'state/index' import {Text} from '../../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' @@ -9,16 +8,24 @@ import {deviceLocales} from 'platform/detection' import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' import {LanguageToggle} from './LanguageToggle' import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' +import {Trans} from '@lingui/macro' +import {useModalControls} from '#/state/modals' +import { + useLanguagePrefs, + useLanguagePrefsApi, +} from '#/state/preferences/languages' export const snapPoints = ['100%'] export function Component({}: {}) { - const store = useStores() + const {closeModal} = useModalControls() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() const pal = usePalette('default') const {isMobile} = useWebMediaQueries() const onPressDone = React.useCallback(() => { - store.shell.closeModal() - }, [store]) + closeModal() + }, [closeModal]) const languages = React.useMemo(() => { const langs = LANGUAGES.filter( @@ -29,23 +36,23 @@ export function Component({}: {}) { // sort so that device & selected languages are on top, then alphabetically langs.sort((a, b) => { const hasA = - store.preferences.hasContentLanguage(a.code2) || + langPrefs.contentLanguages.includes(a.code2) || deviceLocales.includes(a.code2) const hasB = - store.preferences.hasContentLanguage(b.code2) || + langPrefs.contentLanguages.includes(b.code2) || deviceLocales.includes(b.code2) if (hasA === hasB) return a.name.localeCompare(b.name) if (hasA) return -1 return 1 }) return langs - }, [store]) + }, [langPrefs]) const onPress = React.useCallback( (code2: string) => { - store.preferences.toggleContentLanguage(code2) + setLangPrefs.toggleContentLanguage(code2) }, - [store], + [setLangPrefs], ) return ( @@ -63,12 +70,16 @@ export function Component({}: {}) { maxHeight: '90vh', }, ]}> - <Text style={[pal.text, styles.title]}>Content Languages</Text> + <Text style={[pal.text, styles.title]}> + <Trans>Content Languages</Trans> + </Text> <Text style={[pal.text, styles.description]}> - Which languages would you like to see in your algorithmic feeds? + <Trans> + Which languages would you like to see in your algorithmic feeds? + </Trans> </Text> <Text style={[pal.textLight, styles.description]}> - Leave them all unchecked to see any language. + <Trans>Leave them all unchecked to see any language.</Trans> </Text> <ScrollView style={styles.scrollContainer}> {languages.map(lang => ( diff --git a/src/view/com/modals/lang-settings/LanguageToggle.tsx b/src/view/com/modals/lang-settings/LanguageToggle.tsx index 187b46e8c..45b100f20 100644 --- a/src/view/com/modals/lang-settings/LanguageToggle.tsx +++ b/src/view/com/modals/lang-settings/LanguageToggle.tsx @@ -1,11 +1,10 @@ import React from 'react' import {StyleSheet} from 'react-native' import {usePalette} from 'lib/hooks/usePalette' -import {observer} from 'mobx-react-lite' import {ToggleButton} from 'view/com/util/forms/ToggleButton' -import {useStores} from 'state/index' +import {useLanguagePrefs, toPostLanguages} from '#/state/preferences/languages' -export const LanguageToggle = observer(function LanguageToggleImpl({ +export function LanguageToggle({ code2, name, onPress, @@ -17,17 +16,17 @@ export const LanguageToggle = observer(function LanguageToggleImpl({ langType: 'contentLanguages' | 'postLanguages' }) { const pal = usePalette('default') - const store = useStores() + const langPrefs = useLanguagePrefs() - const isSelected = store.preferences[langType].includes(code2) + const values = + langType === 'contentLanguages' + ? langPrefs.contentLanguages + : toPostLanguages(langPrefs.postLanguage) + const isSelected = values.includes(code2) // enforce a max of 3 selections for post languages let isDisabled = false - if ( - langType === 'postLanguages' && - store.preferences[langType].length >= 3 && - !isSelected - ) { + if (langType === 'postLanguages' && values.length >= 3 && !isSelected) { isDisabled = true } @@ -39,7 +38,7 @@ export const LanguageToggle = observer(function LanguageToggleImpl({ style={[pal.border, styles.languageToggle, isDisabled && styles.dimmed]} /> ) -}) +} const styles = StyleSheet.create({ languageToggle: { diff --git a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx index d74d884cc..05cfb8115 100644 --- a/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx +++ b/src/view/com/modals/lang-settings/PostLanguagesSettings.tsx @@ -1,8 +1,6 @@ import React from 'react' import {StyleSheet, View} from 'react-native' -import {observer} from 'mobx-react-lite' import {ScrollView} from '../util' -import {useStores} from 'state/index' import {Text} from '../../util/text/Text' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' @@ -10,16 +8,25 @@ import {deviceLocales} from 'platform/detection' import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' import {ToggleButton} from 'view/com/util/forms/ToggleButton' +import {Trans} from '@lingui/macro' +import {useModalControls} from '#/state/modals' +import { + useLanguagePrefs, + useLanguagePrefsApi, + hasPostLanguage, +} from '#/state/preferences/languages' export const snapPoints = ['100%'] -export const Component = observer(function PostLanguagesSettingsImpl() { - const store = useStores() +export function Component() { + const {closeModal} = useModalControls() + const langPrefs = useLanguagePrefs() + const setLangPrefs = useLanguagePrefsApi() const pal = usePalette('default') const {isMobile} = useWebMediaQueries() const onPressDone = React.useCallback(() => { - store.shell.closeModal() - }, [store]) + closeModal() + }, [closeModal]) const languages = React.useMemo(() => { const langs = LANGUAGES.filter( @@ -30,23 +37,23 @@ export const Component = observer(function PostLanguagesSettingsImpl() { // sort so that device & selected languages are on top, then alphabetically langs.sort((a, b) => { const hasA = - store.preferences.hasPostLanguage(a.code2) || + hasPostLanguage(langPrefs.postLanguage, a.code2) || deviceLocales.includes(a.code2) const hasB = - store.preferences.hasPostLanguage(b.code2) || + hasPostLanguage(langPrefs.postLanguage, b.code2) || deviceLocales.includes(b.code2) if (hasA === hasB) return a.name.localeCompare(b.name) if (hasA) return -1 return 1 }) return langs - }, [store]) + }, [langPrefs]) const onPress = React.useCallback( (code2: string) => { - store.preferences.togglePostLanguage(code2) + setLangPrefs.togglePostLanguage(code2) }, - [store], + [setLangPrefs], ) return ( @@ -64,20 +71,19 @@ export const Component = observer(function PostLanguagesSettingsImpl() { maxHeight: '90vh', }, ]}> - <Text style={[pal.text, styles.title]}>Post Languages</Text> + <Text style={[pal.text, styles.title]}> + <Trans>Post Languages</Trans> + </Text> <Text style={[pal.text, styles.description]}> - Which languages are used in this post? + <Trans>Which languages are used in this post?</Trans> </Text> <ScrollView style={styles.scrollContainer}> {languages.map(lang => { - const isSelected = store.preferences.hasPostLanguage(lang.code2) + const isSelected = hasPostLanguage(langPrefs.postLanguage, lang.code2) // enforce a max of 3 selections for post languages let isDisabled = false - if ( - store.preferences.postLanguage.split(',').length >= 3 && - !isSelected - ) { + if (langPrefs.postLanguage.split(',').length >= 3 && !isSelected) { isDisabled = true } @@ -104,7 +110,7 @@ export const Component = observer(function PostLanguagesSettingsImpl() { <ConfirmLanguagesButton onPress={onPressDone} /> </View> ) -}) +} const styles = StyleSheet.create({ container: { |