fix: everytime no query param or selected language by user, set browser language

Author: satanmourner

src/core/hooks/useSwitchLanguage.tsx

@@ -1,16 +1,23 @@
-import i18next from 'i18next';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSearchParams } from 'react-router-dom';
 import { supportedLanguages } from 'src/constants/constants';
 
 const useSwitchLanguage = (defaultLanguage = 'en') => {
-  const [selectedLanguage, setSelectedLanguage] = useState(() => {
-    return localStorage.getItem('i18nextLng') || defaultLanguage;
-  });
+  const { i18n } = useTranslation();
+  const [selectedLanguage, setSelectedLanguage] = useState(i18n.language || defaultLanguage);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const queryLang = searchParams.get('lang');
 
   const switchLanguage = language => {
     if (supportedLanguages.map(lang => lang.value).includes(language)) {
       setSelectedLanguage(language);
-      i18next.changeLanguage(language);
+      i18n.changeLanguage(language);
+      localStorage.setItem('lang', language);
+      if (queryLang) {
+        searchParams.set('lang', language);
+        setSearchParams(searchParams);
+      }
       window.location.reload();
     } else {
       console.warn(`Language '${language}' is not supported.`);

src/core/translation/i18n.ts

@@ -22,12 +22,21 @@ const resources = {
   },
 };
 
+const savedLang = localStorage.getItem('lang');
+const queryLang = new URLSearchParams(window.location.search).get('lang');
+const browserLang = navigator.language.split('-')[0];
+if (queryLang) {
+  localStorage.setItem('lang', queryLang);
+}
+
+const language = queryLang || savedLang || browserLang || 'en';
+
 i18next
   .use(detector)
   .use(initReactI18next)
   .init({
     resources,
-    lng: localStorage.getItem('i18nextLng') || navigator.language || 'en',
+    lng: language,
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false,

src/modules/settings/components/Language/useLanguage.tsx

@@ -1,9 +1,10 @@
-import i18next from 'i18next';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from 'src/constants/constants';
 import useSwitchLanguage from 'src/core/hooks/useSwitchLanguage';
 
 export const useLanguage = () => {
+  const { i18n } = useTranslation();
   const { switchLanguage, selectedLanguage: initialLanguage } = useSwitchLanguage();
   const getLanguageOption = lang => {
     const languageMap = supportedLanguages.reduce((map, { value, label }) => {
@@ -22,7 +23,7 @@ export const useLanguage = () => {
   // Reset the selected language to the last saved state
   const onCancel = () => {
     setUnsavedValue(unsavedValue);
-    i18next.changeLanguage(unsavedValue.value);
+    i18n.changeLanguage(unsavedValue.value);
   };
 
   return { onSave, onCancel, unsavedValue, setUnsavedValue };