Move language preferences to new persistence + context (#1837)

src/view/screens/AppPasswords.tsx

@@ -17,6 +17,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {ViewHeader} from '../com/util/ViewHeader'
 import {CenteredView} from 'view/com/util/Views'
 import {useSetMinimalShellMode} from '#/state/shell'
+import {useLanguagePrefs} from '#/state/preferences'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
 export const AppPasswords = withAuthRequired(
@@ -161,6 +162,7 @@ function AppPassword({
 }) {
   const pal = usePalette('default')
   const store = useStores()
+  const {contentLanguages} = useLanguagePrefs()
 
   const onDelete = React.useCallback(async () => {
     store.shell.openModal({
@@ -174,8 +176,6 @@ function AppPassword({
     })
   }, [store, name])
 
-  const {contentLanguages} = store.preferences
-
   const primaryLocale =
     contentLanguages.length > 0 ? contentLanguages[0] : 'en-US'
 

src/view/screens/LanguageSettings.tsx

@@ -19,6 +19,7 @@ import {useFocusEffect} from '@react-navigation/native'
 import {LANGUAGES} from 'lib/../locale/languages'
 import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
 import {useSetMinimalShellMode} from '#/state/shell'
+import {useLanguagePrefs, useSetLanguagePrefs} from '#/state/preferences'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
 
@@ -27,6 +28,8 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
 ) {
   const pal = usePalette('default')
   const store = useStores()
+  const langPrefs = useLanguagePrefs()
+  const setLangPrefs = useSetLanguagePrefs()
   const {isTabletOrDesktop} = useWebMediaQueries()
   const {screen, track} = useAnalytics()
   const setMinimalShellMode = useSetMinimalShellMode()
@@ -45,21 +48,23 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
 
   const onChangePrimaryLanguage = React.useCallback(
     (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
-      store.preferences.setPrimaryLanguage(value)
+      if (langPrefs.primaryLanguage !== value) {
+        setLangPrefs(v => ({...v, primaryLanguage: value}))
+      }
     },
-    [store.preferences],
+    [langPrefs, setLangPrefs],
   )
 
   const myLanguages = React.useMemo(() => {
     return (
-      store.preferences.contentLanguages
+      langPrefs.contentLanguages
         .map(lang => LANGUAGES.find(l => l.code2 === lang))
         .filter(Boolean)
         // @ts-ignore
         .map(l => l.name)
         .join(', ')
     )
-  }, [store.preferences.contentLanguages])
+  }, [langPrefs.contentLanguages])
 
   return (
     <CenteredView
@@ -82,7 +87,7 @@ export const LanguageSettingsScreen = observer(function LanguageSettingsImpl(
 
           <View style={{position: 'relative'}}>
             <RNPickerSelect
-              value={store.preferences.primaryLanguage}
+              value={langPrefs.primaryLanguage}
               onValueChange={onChangePrimaryLanguage}
               items={LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
                 label: l.name,