From d4e571e3fd62b696b7ee7647e1acd51cbc562cd4 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Thu, 24 Aug 2023 18:03:37 -0700
Subject: [PATCH] pulling language from OS

---
 app/mobile/src/constants/Strings.js           | 38 +++++++-------
 app/mobile/src/session/settings/Settings.jsx  | 50 ++++++++-----------
 .../src/session/settings/useSettings.hook.js  |  3 +-
 3 files changed, 43 insertions(+), 48 deletions(-)

diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js
index bbdbb6ab..76f74452 100644
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@@ -1,20 +1,6 @@
-export function getLanguageId(language) {
-  if (language === 'english') {
-    return 0;
-  }
-  if (language === 'french') {
-    return 1;
-  }
-  if (language === 'spanish') {
-    return 2;
-  }
-  if (language === 'german') {
-    return 3;
-  }
-  return 0; // default
-};
+import { NativeModules, Platform } from 'react-native'
 
-export const Strings = [
+const Strings = [
   {
     visibleRegistry: 'Visible in Registry',
     edit: 'Edit',
@@ -97,4 +83,22 @@ export const Strings = [
   }
 ];
 
-export default Strings;
+export function getLanguageStrings() {
+  const locale = Platform.OS === 'ios' ? NativeModules.SettingsManager.settings.AppleLocale || NativeModules.SettingsManager.settings.AppleLanguages[0] : NativeModules.I18nManager.localeIdentifier;
+
+  const lang = locale.slice(0, 2) || '';
+
+  if (lang === 'en') {
+    return Strings[0];
+  }
+  if (lang === 'fr') {
+    return Strings[1];
+  }
+  if (lang === 'es') {
+    return Strings[2];
+  }
+  if (lang === 'de') {
+    return Strings[3];
+  }
+  return Strings[0];
+};
diff --git a/app/mobile/src/session/settings/Settings.jsx b/app/mobile/src/session/settings/Settings.jsx
index 71469b3a..1573fafb 100644
--- a/app/mobile/src/session/settings/Settings.jsx
+++ b/app/mobile/src/session/settings/Settings.jsx
@@ -1,27 +1,27 @@
+import { useState } from 'react';
 import { ScrollView, View, Text, Switch, TouchableOpacity } from 'react-native';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { styles } from './Settings.styled';
 import { useSettings } from './useSettings.hook';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
 import Colors from 'constants/Colors';
-import Strings from 'constants/Strings';
 
 export function Settings() {
-
+  
   const { state, actions } = useSettings();
 
   return (
-      <ScrollView style={styles.content}>
-    <SafeAreaView edges={['top']}>
+    <ScrollView style={styles.content}>
+      <SafeAreaView edges={['top']}>
 
-        <Text style={styles.label}>{ Strings[state.lang].messaging }</Text>
+        <Text style={styles.label}>{ state.strings.messaging }</Text>
         <View style={styles.group}>
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
               <MatIcons name="bell-outline" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].enableNotifications }</Text>
+              <Text style={styles.optionLink}>{ state.strings.enableNotifications }</Text>
             </View>
             <View style={styles.control}>
               <Switch style={styles.notifications} trackColor={styles.track}/>
@@ -33,43 +33,33 @@ export function Settings() {
               <MatIcons name="lock-outline" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].sealedTopics }</Text>
+              <Text style={styles.optionLink}>{ state.strings.sealedTopics }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
         </View>
 
-        <Text style={styles.label}>{ Strings[state.lang].display }</Text>
+        <Text style={styles.label}>{ state.strings.display }</Text>
         <View style={styles.group}>
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
               <MatIcons name="progress-clock" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].hourMode }</Text>
-            </View>
-            <View style={styles.control} />
-          </TouchableOpacity>
-          <View style={styles.divider} />
-          <TouchableOpacity style={styles.entry} activeOpacity={1}>
-            <View style={styles.icon}>
-              <MatIcons name="earth" size={20} color={Colors.linkText} />
-            </View>
-            <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].language }</Text>
+              <Text style={styles.optionLink}>{ state.strings.hourMode }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
         </View>
 
-        <Text style={styles.label}>{ Strings[state.lang].account }</Text>
+        <Text style={styles.label}>{ state.strings.account }</Text>
         <View style={styles.group}>
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
               <MatIcons name="logout" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].logout }</Text>
+              <Text style={styles.optionLink}>{ state.strings.logout }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
@@ -79,7 +69,7 @@ export function Settings() {
               <MatIcons name="login" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].changeLogin }</Text>
+              <Text style={styles.optionLink}>{ state.strings.changeLogin }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
@@ -89,20 +79,20 @@ export function Settings() {
               <MatIcons name="trash-can-outline" size={20} color={Colors.dangerText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.dangerLink}>{ Strings[state.lang].deleteAccount }</Text>
+              <Text style={styles.dangerLink}>{ state.strings.deleteAccount }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
         </View>
 
-        <Text style={styles.label}>{ Strings[state.lang].blocked }</Text>
+        <Text style={styles.label}>{ state.strings.blocked }</Text>
         <View style={styles.group}>
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
               <MatIcons name="account-multiple-outline" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].contacts }</Text>
+              <Text style={styles.optionLink}>{ state.strings.contacts }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
@@ -112,7 +102,7 @@ export function Settings() {
               <MatIcons name="book-open-outline" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].topics }</Text>
+              <Text style={styles.optionLink}>{ state.strings.topics }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
@@ -122,13 +112,13 @@ export function Settings() {
               <MatIcons name="comment-text-multiple-outline" size={20} color={Colors.linkText} />
             </View>
             <View style={styles.option}>
-              <Text style={styles.optionLink}>{ Strings[state.lang].messages }</Text>
+              <Text style={styles.optionLink}>{ state.strings.messages }</Text>
             </View>
             <View style={styles.control} />
           </TouchableOpacity>
         </View>
 
-        <Text style={styles.label}>{ Strings[state.lang].support }</Text>
+        <Text style={styles.label}>{ state.strings.support }</Text>
         <View style={styles.group}>
           <TouchableOpacity style={styles.entry} activeOpacity={1}>
             <View style={styles.icon}>
@@ -141,7 +131,7 @@ export function Settings() {
           </TouchableOpacity>
         </View>
 
-    </SafeAreaView>
-      </ScrollView>
+      </SafeAreaView>
+    </ScrollView>
   );
 }
diff --git a/app/mobile/src/session/settings/useSettings.hook.js b/app/mobile/src/session/settings/useSettings.hook.js
index 0c4ca665..18672647 100644
--- a/app/mobile/src/session/settings/useSettings.hook.js
+++ b/app/mobile/src/session/settings/useSettings.hook.js
@@ -1,9 +1,10 @@
 import { useState, useEffect, useRef, useContext } from 'react';
+import { getLanguageStrings } from 'constants/Strings';
 
 export function useSettings() {
 
   const [state, setState] = useState({
-    lang: 0,
+    strings: getLanguageStrings(),
   });
 
   const updateState = (value) => {