feat: automatically change language on first launch (#1278)

* feat: automatically change language to browser language on first launch(#1238)

* Update web/src/store/module/global.ts

* chroe: rename languageCodeCovert to convertLanguageCodeToLocale

---------
Co-authored-by: boojack <stevenlgtm@gmail.com>

web/package.json

@@ -16,6 +16,7 @@
     "dayjs": "^1.11.3",
     "highlight.js": "^11.6.0",
     "i18next": "^21.9.2",
+    "i18next-browser-languagedetector": "^7.0.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.105.0",
     "qrcode.react": "^3.1.0",

web/src/i18n.ts

 import i18n from "i18next";
 import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
 import enLocale from "./locales/en.json";
 import zhLocale from "./locales/zh.json";
 import viLocale from "./locales/vi.json";
@@ -15,7 +16,15 @@ import hantLocale from "./locales/zh-Hant.json";
 import trLocale from "./locales/tr.json";
 import koLocale from "./locales/ko.json";
 
-i18n.use(initReactI18next).init({
+const DETECTION_OPTIONS = {
+  order: ["navigator"],
+};
+
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    detection: DETECTION_OPTIONS,
     resources: {
       en: {
         translation: enLocale,
@@ -60,8 +69,7 @@ i18n.use(initReactI18next).init({
         translation: koLocale,
       },
     },
-  lng: "en",
     fallbackLng: "en",
-});
+  });
 
 export default i18n;

web/src/store/module/global.ts

@@ -2,6 +2,8 @@ import * as api from "../../helpers/api";
 import * as storage from "../../helpers/storage";
 import store, { useAppSelector } from "../";
 import { setAppearance, setGlobalState, setLocale } from "../reducer/global";
+import i18n from "../../i18n";
+import { convertLanguageCodeToLocale } from "../../utils/convertLanguageCodeToLocale";
 
 export const initialGlobalState = async () => {
   const defaultGlobalState = {
@@ -46,7 +48,7 @@ export const initialGlobalState = async () => {
           externalUrl: "",
         },
       };
-      defaultGlobalState.locale = customizedProfile.locale;
+      defaultGlobalState.locale = storageLocale || convertLanguageCodeToLocale(i18n.language);
       defaultGlobalState.appearance = customizedProfile.appearance;
     }
   } catch (error) {

web/src/utils/convertLanguageCodeToLocale.ts

+export const convertLanguageCodeToLocale = (codename: string): Locale => {
+  if (codename === "zh-TW" || codename === "zh-HK") {
+    return "hant";
+  }
+  const shortCode = codename.substring(0, 2);
+  return shortCode as Locale;
+};