fix: adjust pali lng (#648)

syscoin · Oct 14, 2024 · fb44a44 · fb44a44
1 parent 3d4ac91
commit fb44a44
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 53 deletions.
diff --git a/source/pages/Settings/Languages.tsx b/source/pages/Settings/Languages.tsx
@@ -1,44 +1,80 @@
 import { Form } from 'antd';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { useNavigate } from 'react-router-dom';
 
 import checked from 'assets/icons/greenChecked.svg';
-import { Layout, DefaultModal, NeutralButton } from 'components/index';
+import { DefaultModal, Layout, NeutralButton } from 'components/index';
 import { setLanguageInLocalStorage } from 'scripts/Background';
 import { RootState } from 'state/store';
 import { i18next } from 'utils/i18n';
+import { chromeStorage } from 'utils/storageAPI';
 import { PaliLanguages } from 'utils/types';
 
 const Languages = () => {
   const { timer } = useSelector((state: RootState) => state.vault);
 
   const [confirmed, setConfirmed] = useState<boolean>(false);
-  const currLang = window.localStorage.getItem('language');
   const [currentLang, setCurrentLang] = useState<PaliLanguages>(
-    (currLang ?? 'en') as PaliLanguages
+    PaliLanguages.EN
   );
   const { t } = useTranslation();
 
+  useEffect(() => {
+    const fetchLanguage = async () => {
+      const storedLang = await chromeStorage
+        .getItem('language')
+        .then((state) => JSON.parse(state));
+      setCurrentLang(storedLang ?? PaliLanguages.EN);
+    };
+
+    fetchLanguage().then((lng) => lng);
+  }, []);
+
   const availableLanguages = [
     { id: 1, name: t('settings.english'), value: PaliLanguages.EN },
     { id: 2, name: t('settings.spanish'), value: PaliLanguages.ES },
   ];
 
   const navigate = useNavigate();
 
-  const onSubmit = () => {
-    setLanguageInLocalStorage(currentLang);
+  const onSubmit = async () => {
+    await setLanguageInLocalStorage(currentLang);
 
-    i18next.changeLanguage(currentLang);
+    await i18next.changeLanguage(currentLang);
     setConfirmed(true);
   };
 
   const handleLanguageChange = (e) => {
     setCurrentLang(e.target.value);
   };
 
+  const RenderLanguages = () => (
+    <div className="align-center flex flex-row gap-2 justify-center w-full text-center">
+      <div className="flex flex-col gap-4 w-full">
+        {availableLanguages.map((lng) => (
+          <div
+            key={lng.id}
+            className="flex items-center justify-between border-b border-dashed border-gray-600 pb-2"
+            onClick={(e) => handleLanguageChange(e)}
+          >
+            <button
+              value={lng.value}
+              className="bg-transparent text-sm font-light"
+              type="button"
+            >
+              {lng.name}
+            </button>
+            {currentLang === lng.value && (
+              <img src={checked} alt={`Selected: ${lng.name}`} />
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+
   return (
     <Layout title={t('settings.languages')} id="auto-lock-timer-title">
       <DefaultModal
@@ -73,28 +109,7 @@ const Languages = () => {
             },
           ]}
         >
-          <div className="align-center flex flex-row gap-2 justify-center w-full text-center">
-            <div className="flex flex-col gap-4 w-full">
-              {availableLanguages.map((lng) => (
-                <div
-                  key={lng.id}
-                  className="flex items-center justify-between border-b border-dashed border-gray-600 pb-2"
-                  onClick={(e) => handleLanguageChange(e)}
-                >
-                  <button
-                    value={lng.value}
-                    className="bg-transparent text-sm font-light"
-                    type="button"
-                  >
-                    {lng.name}
-                  </button>
-                  {currentLang === lng.value && (
-                    <img src={checked} alt={`Selected: ${lng.name}`} />
-                  )}
-                </div>
-              ))}
-            </div>
-          </div>
+          {RenderLanguages()}
         </Form.Item>
 
         <div className="absolute bottom-12 md:static">

diff --git a/source/scripts/Background/index.ts b/source/scripts/Background/index.ts
@@ -10,6 +10,7 @@ import store from 'state/store';
 import { rehydrate as vaultRehydrate, setIsPolling } from 'state/vault';
 import { TransactionsType } from 'state/vault/types';
 import { log } from 'utils/logger';
+import { chromeStorage } from 'utils/storageAPI';
 import { PaliLanguages } from 'utils/types';
 
 import MasterController, { IMasterController } from './controllers';
@@ -531,8 +532,13 @@ export const dispatchChangeNetworkBgEvent = (
   });
 };
 
-export const setLanguageInLocalStorage = (lang: PaliLanguages) => {
-  chrome.storage.local.set({ language: lang });
+export const setLanguageInLocalStorage = async (lang: PaliLanguages) => {
+  try {
+    const serializedState = JSON.stringify(lang);
+    await chromeStorage.setItem('language', serializedState);
+  } catch (e) {
+    console.error('<!> Error saving language', e);
+  }
 };
 
 const isPollingRunNotValid = () => {

diff --git a/source/utils/i18n.ts b/source/utils/i18n.ts
@@ -3,16 +3,20 @@ import i18next from 'i18next';
 import HttpApi from 'i18next-http-backend';
 import { initReactI18next } from 'react-i18next';
 
+import { chromeStorage } from 'utils/storageAPI';
+
 export const availableLanguages = ['en', 'es', 'pt-br'];
 export const defaultLocale = 'en';
 const LOCALE_VERSION = '1.5.1';
 
-const determineLngFn = (code: string): string => {
+const determineLngFn = async (code: string): Promise<string> => {
   let { language } = i18next;
-  // const storageLanguage = chrome.storage.local.get('language');
-  const storageLanguage = 'en';
-  if (storageLanguage) {
-    return storageLanguage;
+  const storageLanguage = async () =>
+    await chromeStorage.getItem('language').then((lng) => JSON.parse(lng));
+
+  const lng = (await storageLanguage()) ?? defaultLocale;
+  if (lng) {
+    return lng;
   }
   if (!code || code.length === 0) {
     language = defaultLocale;
@@ -39,22 +43,28 @@ const determineLngFn = (code: string): string => {
   return language;
 };
 
-i18next
-  .use(HttpApi)
-  .use(initReactI18next)
-  .init({
-    backend: {
-      loadPath: `../assets/locales/{{lng}}.json`,
-      queryStringParams: { v: LOCALE_VERSION },
-    },
-    react: {
-      useSuspense: true,
-    },
-    load: 'languageOnly',
-    lowerCaseLng: true,
-    fallbackLng: determineLngFn,
-    keySeparator: '.',
-    interpolation: { escapeValue: true },
-  });
+const initI18next = async () => {
+  const fallbackLng = await determineLngFn('');
+
+  i18next
+    .use(HttpApi)
+    .use(initReactI18next)
+    .init({
+      backend: {
+        loadPath: `../assets/locales/{{lng}}.json`,
+        queryStringParams: { v: LOCALE_VERSION },
+      },
+      react: {
+        useSuspense: true,
+      },
+      load: 'languageOnly',
+      lowerCaseLng: true,
+      fallbackLng,
+      keySeparator: '.',
+      interpolation: { escapeValue: true },
+    });
+};
+
+initI18next();
 
 export { i18next };