From 4c4113b106b97ca2b38ca7260c8acb41b7e4443e Mon Sep 17 00:00:00 2001
From: Vlad Mitkovsky <linkedin@mitkovsky.com>
Date: Fri, 26 Mar 2021 20:08:34 -0300
Subject: [PATCH] =?UTF-8?q?VC-1407:=20UI=20Language=20won=E2=80=99t=20be?=
 =?UTF-8?q?=20the=20same=20after=20app=20restart=20(#617)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

https://jesusfilmmedia.atlassian.net/browse/VC-1407

Co-authored-by: Vlad Mitkovsky <vlad@mitkovsky.com>
---
 src/actions/auth.ts                        | 12 ++++++++----
 src/domain/Common/LanguageSwitch/index.tsx | 11 ++++++++++-
 src/i18n/index.ts                          | 17 +++++++++++++----
 3 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/actions/auth.ts b/src/actions/auth.ts
index 40c542a0d..6949cd5c6 100644
--- a/src/actions/auth.ts
+++ b/src/actions/auth.ts
@@ -16,6 +16,7 @@ import request from 'actions/utils';
 import { TAdventureSingle, TDataState } from 'utils/types';
 import { ThunkDispatch } from 'redux-thunk';
 import { Action } from 'redux';
+import i18next from 'i18next';
 
 import ROUTES from './routes';
 import {
@@ -93,12 +94,15 @@ export function userBlockedAction() {
 
 // Check current system language against the one already stored.
 // Update it on the server if different.
-export function checkCurrentLanguage() {
+export function checkCurrentLanguage(prefLang = '') {
   return async (dispatch, getState): void => {
     const languageStored = getState().auth.language;
-    const languageCurrent = (
-      getLocales()[0]?.languageCode || 'EN'
-    ).toUpperCase();
+    const languageCurrent =
+      prefLang.toUpperCase() || i18next.language.toUpperCase();
+
+    if (prefLang !== i18next.language) {
+      i18next.changeLanguage(prefLang.toLowerCase());
+    }
 
     if (languageStored !== languageCurrent) {
       const { user } = getState().auth;
diff --git a/src/domain/Common/LanguageSwitch/index.tsx b/src/domain/Common/LanguageSwitch/index.tsx
index 647f7789b..a0b1b622a 100644
--- a/src/domain/Common/LanguageSwitch/index.tsx
+++ b/src/domain/Common/LanguageSwitch/index.tsx
@@ -1,8 +1,14 @@
+import Select from 'domain/Common/Select';
+
 import React, { ReactElement, useEffect, useState } from 'react';
 import i18next from 'i18next';
-import Select from 'domain/Common/Select';
 import VokeIcon from 'components/VokeIcon';
 import Text from 'components/Text';
+import { useDispatch } from 'react-redux';
+import { checkCurrentLanguage, updateMe } from 'actions/auth';
+import { Alert } from 'react-native';
+import { setPrefLang } from 'actions/info';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import styles from './styles';
 
@@ -15,6 +21,7 @@ type Option = {
 };
 
 const LanguageSwitch = (): ReactElement => {
+  const dispatch = useDispatch();
   const lang = languageCodes[i18next.language.substr(0, 2).toLowerCase()];
   const availableTranslations = i18next.languages;
   const [modalVisible, setModalVisible] = useState(false);
@@ -61,6 +68,8 @@ const LanguageSwitch = (): ReactElement => {
       }
     });
     setSelectOptions(newSelectOptions);
+    AsyncStorage.setItem('prefLanguage', option.label.toLowerCase());
+    dispatch(checkCurrentLanguage(option.label.toLowerCase()));
   };
 
   return (
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 73451857a..faf0131e4 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -6,6 +6,9 @@ import i18n, {
 import { NativeModules, Platform } from 'react-native';
 import { initReactI18next, reactI18nextModule } from 'react-i18next';
 import { findBestAvailableLanguage } from 'react-native-localize';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+import store from '../store';
 
 import oneSkyTranslations from './locales/translations.json';
 import en_US from './locales/en-US.json';
@@ -85,10 +88,16 @@ const aliasedResourceLanguages: Resource = aliasLanguages(
 
 const languageDetector: LanguageDetectorModule = {
   type: 'languageDetector',
-  detect: () => {
-    return (
-      findBestAvailableLanguage(Object.keys(aliasedResourceLanguages)) || {}
-    ).languageTag;
+  async: true, // flags below detection to be async
+  detect: async callback => {
+    // Preferred user language (selected by the user in Profile)
+    // is being saved in AsyncStorage (Redux isn't available here).
+    const prefLanguage = await AsyncStorage.getItem('prefLanguage');
+    const selectLanguage =
+      prefLanguage ||
+      (findBestAvailableLanguage(Object.keys(aliasedResourceLanguages)) || {})
+        .languageTag;
+    callback(selectLanguage);
   },
   init: () => {},
   cacheUserLanguage: () => {},