fix: switch language immediately (#630)

Author: Selflocking

web/src/App.js

@@ -40,6 +40,7 @@ import VectorListPage from "./VectorListPage";
 import VectorEditPage from "./VectorEditPage";
 import SigninPage from "./SigninPage";
 import i18next from "i18next";
+import {withTranslation} from "react-i18next";
 import LanguageSelect from "./LanguageSelect";
 import ChatEditPage from "./ChatEditPage";
 import ChatListPage from "./ChatListPage";
@@ -487,4 +488,4 @@ class App extends Component {
   }
 }
 
-export default withRouter(App);
+export default withRouter(withTranslation()(App));

web/src/LanguageSelect.js

@@ -27,7 +27,6 @@ class LanguageSelect extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      classes: props,
       languages: props.languages ?? Setting.Countries.map(item => item.key),
     };
 

web/src/Setting.js

@@ -217,41 +217,14 @@ export function getLanguage() {
 
 export function setLanguage(language) {
   localStorage.setItem("language", language);
-  changeMomentLanguage(language);
   i18next.changeLanguage(language);
 }
 
 export function changeLanguage(language) {
-  localStorage.setItem("language", language);
-  changeMomentLanguage(language);
-  i18next.changeLanguage(language);
+  setLanguage(language);
   window.location.reload(true);
 }
 
-export function changeMomentLanguage(lng) {
-  return;
-  // if (lng === "zh") {
-  //   moment.locale("zh", {
-  //     relativeTime: {
-  //       future: "%s内",
-  //       past: "%s前",
-  //       s: "几秒",
-  //       ss: "%d秒",
-  //       m: "1分钟",
-  //       mm: "%d分钟",
-  //       h: "1小时",
-  //       hh: "%d小时",
-  //       d: "1天",
-  //       dd: "%d天",
-  //       M: "1个月",
-  //       MM: "%d个月",
-  //       y: "1年",
-  //       yy: "%d年",
-  //     },
-  //   });
-  // }
-}
-
 export function getTag(text, type, state) {
   let icon = null;
   let style = {};
@@ -610,8 +583,6 @@ export const Countries = [{label: "English", key: "en", country: "US", alt: "Eng
   {label: "日本語", key: "ja", country: "JP", alt: "日本語"},
   {label: "한국어", key: "ko", country: "KR", alt: "한국어"},
   {label: "Русский", key: "ru", country: "RU", alt: "Русский"},
-  {label: "TiếngViệt", key: "vi", country: "VN", alt: "TiếngViệt"},
-  {label: "Português", key: "pt", country: "BR", alt: "Português"},
 ];
 
 export function getItem(label, key, icon, children, type) {

web/src/i18n.js

@@ -15,12 +15,26 @@
 import i18n from "i18next";
 import zh from "./locales/zh/data.json";
 import en from "./locales/en/data.json";
+import es from "./locales/es/data.json";
+import fr from "./locales/fr/data.json";
+import de from "./locales/de/data.json";
+import id from "./locales/id/data.json";
+import ja from "./locales/ja/data.json";
+import ko from "./locales/ko/data.json";
+import ru from "./locales/ru/data.json";
 import * as Conf from "./Conf";
-import * as Setting from "./Setting";
+import {initReactI18next} from "react-i18next";
 
 const resources = {
   en: en,
   zh: zh,
+  es: es,
+  fr: fr,
+  de: de,
+  id: id,
+  ja: ja,
+  ko: ko,
+  ru: ru,
 };
 
 function initLanguage() {
@@ -31,29 +45,49 @@ function initLanguage() {
     } else {
       const userLanguage = navigator.language;
       switch (userLanguage) {
+      case "en":
+        language = "en";
+        break;
+      case "en-US":
+        language = "en";
+        break;
       case "zh-CN":
         language = "zh";
         break;
       case "zh":
         language = "zh";
         break;
-      case "en":
-        language = "en";
+      case "es":
+        language = "es";
         break;
-      case "en-US":
-        language = "en";
+      case "fr":
+        language = "fr";
+        break;
+      case "de":
+        language = "de";
+        break;
+      case "id":
+        language = "id";
+        break;
+      case "ja":
+        language = "ja";
+        break;
+      case "ko":
+        language = "ko";
+        break;
+      case "ru":
+        language = "ru";
         break;
       default:
         language = Conf.DefaultLanguage;
       }
     }
   }
-  Setting.changeMomentLanguage(language);
 
   return language;
 }
 
-i18n.init({
+i18n.use(initReactI18next).init({
   lng: initLanguage(),
 
   resources: resources,