Merge pull request #3770 from weseek/imprv/6029-6030-fetch-language-from-browser

Imprv/6029 6030 fetch language from browser

resource/locales/en_US/meta.json

@@ -1,4 +1,5 @@
 {
   "id": "en_US",
-  "displayName": "English"
+  "displayName": "English",
+  "aliases": ["en"]
 }

resource/locales/ja_JP/meta.json

@@ -1,4 +1,5 @@
 {
   "id": "ja_JP",
-  "displayName": "日本語"
+  "displayName": "日本語",
+  "aliases": ["ja"]
 }

resource/locales/zh_CN/meta.json

@@ -1,4 +1,5 @@
 {
 	"id": "zh_CN",
-	"displayName": "简体中文"
-}
+	"displayName": "简体中文",
+  "aliases": ["zh"]
+}

src/client/js/components/InstallerForm.jsx

@@ -22,7 +22,8 @@ class InstallerForm extends React.Component {
   }
 
   componentWillMount() {
-    this.changeLanguage(localeMetadatas[0]);
+    const meta = localeMetadatas.find(v => v.id === i18next.language);
+    this.setState({ selectedLang: meta });
   }
 
   // checkUserName(event) {

src/client/js/util/i18n.js

@@ -1,13 +1,22 @@
 import i18n from 'i18next';
 import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
-
 import locales from '@root/resource/locales';
 
+const aliasesMapping = {};
+Object.values(locales).forEach((locale) => {
+  if (locale.meta.aliases == null) {
+    return;
+  }
+  locale.meta.aliases.forEach((alias) => {
+    aliasesMapping[alias] = locale.meta.id;
+  });
+});
+
 // extract metadata list from 'resource/locales/${locale}/meta.json'
 export const localeMetadatas = Object.values(locales).map(locale => locale.meta);
 
-export const i18nFactory = (userLocaleId = 'en_US') => {
+export const i18nFactory = (userLocaleId) => {
   // setup LanguageDetector
   const langDetector = new LanguageDetector();
   langDetector.addDetector({
@@ -15,7 +24,18 @@ export const i18nFactory = (userLocaleId = 'en_US') => {
     lookup(options) {
       return userLocaleId;
     },
-    cacheUserlanguage(lng, options) {
+  });
+  // Wrapper to convert lang after detected from browser
+  langDetector.addDetector({
+    name: 'navigatorWrapperToConvertByAlias',
+    lookup(options) {
+      const results = langDetector.detectors.navigator.lookup(options);
+      const lang = results[0];
+      if (lang == null) {
+        return;
+      }
+
+      return aliasesMapping[lang] || lang;
     },
   });
 
@@ -29,7 +49,7 @@ export const i18nFactory = (userLocaleId = 'en_US') => {
 
       fallbackLng: 'en_US',
       detection: {
-        order: ['userSettingDetector', 'querystring', 'localStorage'],
+        order: ['userSettingDetector', 'navigatorWrapperToConvertByAlias', 'querystring'],
       },
 
       interpolation: {