Add the react-i18n package

diff --git a/package-lock.json b/package-lock.json
index 3308d27..bd2a0eb 100644 (file)
--- a/package-lock.json
+++ b/package-lock.json
@@ -4,6 +4,21 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
+    "@babel/runtime": {
+      "version": "7.1.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
+      "integrity": "sha512-Y3SCjmhSupzFB6wcv1KmmFucH6gDVnI30WjOcicV10ju0cZjak3Jcs67YLIXBrmZYw1xCrVeJPbycFwrqNyxpg==",
+      "requires": {
+        "regenerator-runtime": "0.12.1"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        }
+      }
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -1743,6 +1758,15 @@
         "object-assign": "4.1.1"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "0.8.16",
+        "gud": "1.0.0"
+      }
+    },
     "cross-spawn": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
@@ -3425,6 +3449,11 @@
       "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -3530,6 +3559,14 @@
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=",
       "dev": true
     },
+    "html-parse-stringify2": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify2/-/html-parse-stringify2-2.0.1.tgz",
+      "integrity": "sha1-3FZwtyksoVi3vJFsmmc1rIhyg0o=",
+      "requires": {
+        "void-elements": "2.0.1"
+      }
+    },
     "http-errors": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz",
@@ -3599,6 +3636,16 @@
       "integrity": "sha1-P5E2XKvmC3ftDruiS0VOPgnZWoI=",
       "dev": true
     },
+    "i18next": {
+      "version": "11.9.1",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-11.9.1.tgz",
+      "integrity": "sha512-sUAfCdKYi8EufO6B8aY5RF/hqweCpRKvbxUhlzlmlAr+LgJQ2kXe/5y02kaPu6ApFIiW5WOz8+3ehoy97LUtMw=="
+    },
+    "i18next-browser-languagedetector": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-2.2.3.tgz",
+      "integrity": "sha512-sJZ2n9Vgax0vGer23hJMwyO3FRO7P0dq2DXZPXWE329g3snfJUcw+S24Mp3lqJaxL/0McDu4BD75ds6pzIfhhw=="
+    },
     "iconv-lite": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.23.tgz",
@@ -5026,11 +5073,10 @@
       }
     },
     "prop-types": {
-      "version": "15.6.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
-      "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
+      "version": "15.6.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
+      "integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
       "requires": {
-        "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1"
       }
@@ -5187,7 +5233,7 @@
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.1"
+        "prop-types": "15.6.2"
       }
     },
     "react-ace": {
@@ -5204,7 +5250,7 @@
       "resolved": "https://registry.npmjs.org/react-autosuggest/-/react-autosuggest-9.4.2.tgz",
       "integrity": "sha512-GkLFnr+79DtDFMNxbjKzTKEwOfItw2mKiCNTD3bE+gZSPf5Y+i+W+8KySmBnDWFPF5cuJeuBhQBgcSdbp45nAg==",
       "requires": {
-        "prop-types": "15.6.1",
+        "prop-types": "15.6.2",
         "react-autowhatever": "10.1.2",
         "shallow-equal": "1.0.0"
       }
@@ -5214,7 +5260,7 @@
       "resolved": "https://registry.npmjs.org/react-autowhatever/-/react-autowhatever-10.1.2.tgz",
       "integrity": "sha512-+0XgELT1LF7hHEJv5H5Zwkfb4Q1rqmMZZ5U/XJ2J+UcSPRKnG6CqEjXUJ+hYLXDHgvDqwEN5PBdxczD5rHvOuA==",
       "requires": {
-        "prop-types": "15.6.1",
+        "prop-types": "15.6.2",
         "react-themeable": "1.1.0",
         "section-iterator": "2.0.0"
       }
@@ -5229,7 +5275,7 @@
         "dom-helpers": "3.3.1",
         "invariant": "2.2.4",
         "keycode": "2.2.0",
-        "prop-types": "15.6.1",
+        "prop-types": "15.6.2",
         "react-overlays": "0.6.12",
         "react-prop-types": "0.4.0",
         "uncontrollable": "4.1.0",
@@ -5304,6 +5350,27 @@
         }
       }
     },
+    "react-i18next": {
+      "version": "8.0.7",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-8.0.7.tgz",
+      "integrity": "sha512-oJDVe5X8QK72NYYH7/VQtopONZPcNiarlWdVuCSkn9PucQCEAOf/yRt0V2LdjC4nBY48Y20/540glwR1nlE9gA==",
+      "requires": {
+        "@babel/runtime": "7.1.2",
+        "create-react-context": "0.2.3",
+        "hoist-non-react-statics": "3.0.1",
+        "html-parse-stringify2": "2.0.1"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.0.1.tgz",
+          "integrity": "sha512-1kXwPsOi0OGQIZNVMPvgWJ9tSnGMiMfJdihqEzrPEXlHOBh9AAHXX/QYmAJTXztnz/K+PQ8ryCb4eGaN6HlGbQ==",
+          "requires": {
+            "react-is": "16.3.2"
+          }
+        }
+      }
+    },
     "react-is": {
       "version": "16.3.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.3.2.tgz",
@@ -5324,7 +5391,7 @@
       "requires": {
         "commonmark": "0.24.0",
         "commonmark-react-renderer": "4.3.4",
-        "prop-types": "15.6.1"
+        "prop-types": "15.6.2"
       }
     },
     "react-overlays": {
@@ -5334,7 +5401,7 @@
       "requires": {
         "classnames": "2.2.5",
         "dom-helpers": "3.3.1",
-        "prop-types": "15.6.1",
+        "prop-types": "15.6.2",
         "prop-types-extra": "1.1.0",
         "react-transition-group": "2.3.1",
         "warning": "3.0.0"
@@ -5368,7 +5435,7 @@
         "invariant": "2.2.4",
         "lodash": "4.17.10",
         "loose-envify": "1.3.1",
-        "prop-types": "15.6.1"
+        "prop-types": "15.6.2"
       }
     },
     "react-router": {
@@ -5443,7 +5510,7 @@
       "requires": {
         "dom-helpers": "3.3.1",
         "loose-envify": "1.3.1",
-        "prop-types": "15.6.1"
+        "prop-types": "15.6.2"
       }
     },
     "read-pkg": {
@@ -5522,7 +5589,7 @@
       "requires": {
         "error-stack-parser": "1.3.6",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.1",
+        "prop-types": "15.6.2",
         "sourcemapped-stacktrace": "1.1.8"
       }
     },
@@ -5556,7 +5623,7 @@
         "hoist-non-react-statics": "1.2.0",
         "invariant": "2.2.4",
         "is-promise": "2.1.0",
-        "prop-types": "15.6.1",
+        "prop-types": "15.6.2",
         "react-lazy-cache": "3.0.1"
       },
       "dependencies": {
@@ -6850,6 +6917,11 @@
         "indexof": "0.0.1"
       }
     },
+    "void-elements": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
+      "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w="
+    },
     "w3c-blob": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/w3c-blob/-/w3c-blob-0.0.1.tgz",

diff --git a/package.json b/package.json
index 448e075..18230f8 100644 (file)
--- a/package.json
+++ b/package.json
@@ -23,16 +23,19 @@
     "btoa": "^1.1.2",
     "classnames": "~2.2.5",
     "fetch-ponyfill": "~3.0.2",
+    "i18next": "^11.9.1",
+    "i18next-browser-languagedetector": "^2.2.3",
     "lodash": "~4.17.4",
     "moment": "^2.22.1",
     "moment-timezone": "^0.5.17",
     "pluralize": "~3.0.0",
-    "prop-types": "^15.5.8",
+    "prop-types": "^15.6.2",
     "react": "~15.5.0",
     "react-ace": "~3.5.0",
     "react-autosuggest": "~9.4.2",
     "react-bootstrap": "~0.30.3",
     "react-dom": "~15.5.0",
+    "react-i18next": "^8.0.7",
     "react-markdown": "^2.5.0",
     "react-overlays": "~0.8.3",
     "react-redux": "~4.4.5",

diff --git a/src/app.js b/src/app.js
index 841a4ab..046888b 100644 (file)
--- a/src/app.js
+++ b/src/app.js
@@ -5,6 +5,8 @@ import React from 'react'
 import { render } from 'react-dom'
 import Root from 'Root'
 import configureStore from 'configureStore'
+import { I18nextProvider } from 'react-i18next'
+import i18n from './i18n'
 
 // Set favicon
 let faviconPath = require('!!file?name=favicon.ico!../static/images/favicon.png')
@@ -17,6 +19,8 @@ document.getElementsByTagName('head')[0].appendChild(favicon)
 // Start app
 export const store = configureStore()
 render(
-       <Root store={store}/>,
+       <I18nextProvider i18n={i18n}>
+               <Root store={store}/>
+    </I18nextProvider>,
        document.getElementById('root')
 )

diff --git a/src/features/app/components/Main/Main.jsx b/src/features/app/components/Main/Main.jsx
index 14ff781..ab35f72 100644 (file)
--- a/src/features/app/components/Main/Main.jsx
+++ b/src/features/app/components/Main/Main.jsx
@@ -7,6 +7,7 @@ import actions from 'actions'
 import Tutorial from 'features/tutorial/components/Tutorial'
 import TutorialHeader from 'features/tutorial/components/TutorialHeader/TutorialHeader'
 import { Navigation, SecondaryNavigation } from '../'
+import { withNamespaces, Trans } from 'react-i18next'
 
 class Main extends React.Component {
 
@@ -32,8 +33,11 @@ class Main extends React.Component {
   render() {
     let logo = require('images/logo-bytom-white.svg')
 
-    const version = this.props.version
-    const lang = this.props.lang
+    const { i18n ,lng, version } = this.props
+
+    const changeLanguage = (lng) => {
+      i18n.changeLanguage(lng)
+    }
 
     return (
       <div className={styles.main}
@@ -50,13 +54,13 @@ class Main extends React.Component {
                 bsSize='xsmall'
                 className={styles.languagesContainer}
                 pullRight
-                onSelect={this.props.setLang}
+                onSelect={changeLanguage}
               >
                 <Dropdown.Toggle
                   className={styles.languages}
                   noCaret
                 >
-                  {lang === 'zh' ? '中' : 'EN'}
+                  {lng === 'zh' ? '中' : 'EN'}
                 </Dropdown.Toggle>
                 <Dropdown.Menu
                   className={styles.languagesMenu}
@@ -78,7 +82,7 @@ class Main extends React.Component {
 
             <div className={styles.version}>
               <span>
-                {lang==='zh'?'版本号':'Version'}: {version}
+                {lng==='zh'?'版本号':'Version'}: {version}
               </span>
             </div>
 
@@ -99,7 +103,7 @@ class Main extends React.Component {
   }
 }
 
-export default connect(
+export default withNamespaces('translations') (connect(
   (state) => ({
     canLogOut: state.core.requireClientToken,
     version:state.core.version,
@@ -117,4 +121,4 @@ export default connect(
       })
     }
   })
-)(Main)
+)(Main))

diff --git a/src/i18n.js b/src/i18n.js
new file mode 100644 (file)
index 0000000..2079f15
--- /dev/null
+++ b/src/i18n.js
@@ -0,0 +1,36 @@
+import i18n from 'i18next'
+import LanguageDetector from 'i18next-browser-languagedetector'
+
+import transaction_zh from './locales/zh/translation.json'
+import transaction_en from './locales/en/transaltion.json'
+
+i18n.use(LanguageDetector).init({
+  // we init with resources
+  resources:{
+    en: {
+      translations: transaction_en
+    },
+    zh: {
+      translations: transaction_zh
+    },
+  },
+  fallbackLng: 'en',
+  debug: false,
+
+  // have a common namespace used around the full app
+  ns: ['translations'],
+  defaultNS: 'translations',
+
+  keySeparator: false, // we use content as keys
+
+  interpolation: {
+    escapeValue: false, // not needed for react!!
+    formatSeparator: ','
+  },
+
+  react: {
+    wait: true
+  }
+})
+
+export default i18n