fix: simplify language codes

components/LanguageSelector.tsx

@@ -2,14 +2,24 @@ import React from 'react';
 import i18n, { SUPPORTED_LANGUAGES } from '../i18n';
 import { View } from 'react-native';
 import { Picker } from './ui/Picker';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 export const LanguageSelector: React.FC<LanguageSelectorProps> = (props) => {
+  const langauges = Object.entries(SUPPORTED_LANGUAGES).map(
+    ([value, label]) => ({ label, value })
+  );
+
+  const changeLanguage = async (value: string) => {
+    await i18n.changeLanguage(value);
+    await AsyncStorage.setItem('language', i18n.language);
+  };
+
   return (
     <View>
       <Picker
-        items={SUPPORTED_LANGUAGES}
+        items={langauges}
         selectedValue={i18n.language}
-        onValueChange={(value) => i18n.changeLanguage(value)}
+        onValueChange={changeLanguage}
         triggerComponent={props.triggerComponent}
       />
     </View>

i18n.ts

@@ -4,20 +4,34 @@ import { initReactI18next } from 'react-i18next';
 
 import en from './locales/en.json';
 import fil from './locales/fil.json';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 const resources = { en, fil };
 
-export const SUPPORTED_LANGUAGES = [
-  { label: 'English', value: 'en' },
-  { label: 'Filipino', value: 'fil' },
-];
+export const SUPPORTED_LANGUAGES = {
+  en: 'English',
+  fil: 'Filipino',
+};
 
-i18next.use(initReactI18next).init({
-  compatibilityJSON: 'v3',
-  resources,
-  lng: locale,
-  fallbackLng: 'en',
-  supportedLngs: SUPPORTED_LANGUAGES.map(({ value }) => value),
-});
+i18next
+  .use(initReactI18next)
+  .init({
+    compatibilityJSON: 'v3',
+    resources,
+    lng: getLanguageCode(locale),
+    fallbackLng: getLanguageCode,
+    supportedLngs: Object.keys(SUPPORTED_LANGUAGES),
+  })
+  .then(async () => {
+    const language = await AsyncStorage.getItem('language');
+    if (language !== i18next.language) {
+      i18next.changeLanguage(language);
+    }
+  });
 
 export default i18next;
+
+function getLanguageCode(code: string) {
+  const [language] = code.split('-');
+  return language;
+}

machines/app.ts

@@ -5,7 +5,7 @@ import {
   getDeviceName,
   getDeviceNameSync,
 } from 'react-native-device-info';
-import { EventFrom, spawn, StateFrom, send } from 'xstate';
+import { EventFrom, spawn, StateFrom, send, assign } from 'xstate';
 import { createModel } from 'xstate/lib/model';
 import { authMachine, createAuthMachine } from './auth';
 import { createSettingsMachine, settingsMachine } from './settings';
@@ -24,14 +24,13 @@ const model = createModel(
   },
   {
     events: {
-      'xstate.init': () => ({}),
-      'ACTIVE': () => ({}),
-      'INACTIVE': () => ({}),
-      'OFFLINE': () => ({}),
-      'ONLINE': (networkType: NetInfoStateType) => ({ networkType }),
-      'REQUEST_DEVICE_INFO': () => ({}),
-      'READY': (data?: unknown) => ({ data }),
-      'APP_INFO_RECEIVED': (info: AppInfo) => ({ info }),
+      ACTIVE: () => ({}),
+      INACTIVE: () => ({}),
+      OFFLINE: () => ({}),
+      ONLINE: (networkType: NetInfoStateType) => ({ networkType }),
+      REQUEST_DEVICE_INFO: () => ({}),
+      READY: (data?: unknown) => ({ data }),
+      APP_INFO_RECEIVED: (info: AppInfo) => ({ info }),
     },
   }
 );
@@ -141,7 +140,7 @@ export const appMachine = model.createMachine(
         },
       })),
 
-      spawnStoreActor: model.assign({
+      spawnStoreActor: assign({
         serviceRefs: (context) => ({
           ...context.serviceRefs,
           store: spawn(storeMachine, storeMachine.id),

machines/settings.ts

@@ -21,6 +21,7 @@ const model = createModel(
       UPDATE_VC_LABEL: (label: string) => ({ label }),
       TOGGLE_BIOMETRIC_UNLOCK: (enable: boolean) => ({ enable }),
       STORE_RESPONSE: (response: unknown) => ({ response }),
+      CHANGE_LANGUAGE: (language: string) => ({ language }),
     },
   }
 );
@@ -101,8 +102,8 @@ export const settingsMachine = model.createMachine(
       }),
 
       toggleBiometricUnlock: model.assign({
-        isBiometricUnlockEnabled: (_, event) => event.enable
-      })
+        isBiometricUnlockEnabled: (_, event) => event.enable,
+      }),
     },
 
     services: {},

screens/BiometricScreen.tsx

@@ -20,7 +20,7 @@ export const BiometricScreen: React.FC<RootRouteProps> = (props) => {
       </Centered>
 
       <Button
-        title={t('Unlock with Fingerprint')}
+        title={t('unlock')}
         margin="8 0"
         onPress={controller.useBiometrics}
         disabled={controller.isSuccessBio}

screens/Home/MyVcsTab.tsx

@@ -42,7 +42,9 @@ export const MyVcsTab: React.FC<HomeScreenTabProps> = (props) => {
                 <Button
                   type="clear"
                   disabled={controller.isRefreshingVcs}
-                  title={t('addVcButton')}
+                  title={t('addVcButton', {
+                    vcLabel: controller.vcLabel.singular,
+                  })}
                   onPress={controller.ADD_VC}
                 />
               </Column>

screens/MainLayout.tsx

@@ -15,7 +15,11 @@ export const MainLayout: React.FC<RootRouteProps> = () => {
   const options: BottomTabNavigationOptions = {
     headerLeft: () => <Icon name="notifications" color={Colors.Orange} />,
     headerLeftContainerStyle: { paddingStart: 16 },
-    headerRight: () => <LanguageSelector />,
+    headerRight: () => (
+      <LanguageSelector
+        triggerComponent={<Icon name="language" color={Colors.Orange} />}
+      />
+    ),
     headerRightContainerStyle: { paddingEnd: 16 },
     headerTitleAlign: 'center',
     tabBarShowLabel: false,

screens/Profile/Credits.tsx

@@ -70,7 +70,7 @@ export const Credits: React.FC<CreditsProps> = (props) => {
               <Button
                 type="clear"
                 icon={<Icon name="chevron-left" color={Colors.Orange} />}
-                title={t('back')}
+                title=""
                 onPress={() => setIsViewing(false)}
               />
             </View>

screens/Profile/ProfileScreen.tsx

@@ -25,11 +25,7 @@ const LanguageSetting: React.FC = () => {
             </ListItem.Title>
           </ListItem.Content>
           <Text margin="0 12 0 0" color={Colors.Grey}>
-            {
-              SUPPORTED_LANGUAGES.find(
-                (lang) => lang.value === i18next.language
-              ).label
-            }
+            {SUPPORTED_LANGUAGES[i18next.language]}
           </Text>
         </ListItem>
       }