OSDN Git Service

add i18n for the welcome page.
authorZhiting Lin <zlin035@uottawa.ca>
Thu, 18 Oct 2018 02:42:02 +0000 (10:42 +0800)
committerZhiting Lin <zlin035@uottawa.ca>
Thu, 18 Oct 2018 02:42:02 +0000 (10:42 +0800)
src/features/app/components/Container.jsx
src/features/configuration/components/Index/Index.jsx
src/i18n.js [deleted file]
src/locales/en/translation.json
src/locales/zh/translation.json

index 94de606..8bec953 100644 (file)
@@ -47,9 +47,6 @@ class Container extends React.Component {
       window.ipcRenderer.on('btmAmountUnitState', (event, arg) => {
         this.props.uptdateBtmAmountUnit(arg)
       })
-      window.ipcRenderer.on('lang', (event, arg) => {
-        this.props.uptdateLang(arg)
-      })
       window.ipcRenderer.on('ConfiguredNetwork', (event, arg) => {
         if(arg === 'startNode'){
           this.props.fetchInfo().then(() => {
@@ -89,9 +86,7 @@ class Container extends React.Component {
 
   render() {
     let layout
-    const lang = this.props.lang
-
-    const { i18n } = this.props
+    const { t, i18n } = this.props
     i18n.on('languageChanged', function(lng) {
       if(lng === 'zh'){
         moment.locale('zh-cn')
@@ -105,7 +100,7 @@ class Container extends React.Component {
     } else if (!this.props.configured) {
       layout = <Config>{this.props.children}</Config>
     } else if (!this.props.configKnown) {
-      return <Loading>{lang === 'zh'?  '正在连接到Bytom Core...' : 'Connecting to Bytom Core...'}</Loading>
+      return <Loading>{t('welcome.connect')}</Loading>
     } else if (!this.props.accountInit && this.state.noAccountItem){
       layout = <Register>{this.props.children}</Register>
     } else{
@@ -142,7 +137,6 @@ export default connect(
     showRoot: () => dispatch(actions.app.showRoot),
     showConfiguration: () => dispatch(actions.app.showConfiguration()),
     uptdateBtmAmountUnit: (param) => dispatch(actions.core.updateBTMAmountUnit(param)),
-    uptdateLang: (param) => dispatch(actions.core.updateLang(param)),
     updateConfiguredStatus: () => dispatch(actions.core.updateConfiguredStatus),
     markFlashDisplayed: (key) => dispatch(actions.app.displayedFlash(key)),
     fetchAccountItem: () => dispatch(actions.account.fetchItems())
index 0992a64..57b232e 100644 (file)
@@ -5,6 +5,7 @@ import actions from 'actions'
 import React from 'react'
 import styles from './Index.scss'
 import {connect} from 'react-redux'
+import {withNamespaces} from 'react-i18next'
 
 class Index extends React.Component {
   constructor(props) {
@@ -29,7 +30,7 @@ class Index extends React.Component {
       submitting
     } = this.props
 
-    const lang = this.props.lang
+    const t = this.props.t
 
     const typeChange = (event) => {
       type.onChange(event).value
@@ -51,19 +52,19 @@ class Index extends React.Component {
         type='submit'
         className={`btn btn-primary btn-lg ${styles.submit}`}
         disabled={ !type.value || submitting}>
-          &nbsp;{lang === 'zh' ? '加入网络' :'Joining network'}
+          &nbsp;{t('welcome.join')}
       </button>
     ]
 
     if (submitting) {
       configSubmit.push(<SubmitIndicator
-        text={lang === 'zh' ? '加入网络...' :'Joining network...'}
+        text={t('welcome.joining')}
       />)
     }
 
     return (
       <form  onSubmit={handleSubmit(this.submitWithValidation)} >
-        <h2 className={styles.title}>{lang === 'zh' ? '配置 Bytom Core' : 'Configure Bytom Core' }</h2>
+        <h2 className={styles.title}>{t('welcome.title')}</h2>
 
         <div className={styles.choices}>
 
@@ -74,10 +75,10 @@ class Index extends React.Component {
                     {...typeProps}
                     value='mainnet' />
               <div className={`${styles.choice} ${styles.join}`}>
-                <span className={styles.choice_title}>{lang === 'zh' ? '加入 Bytom 主网' : 'Join the Bytom Mainnet'}</span>
+                <span className={styles.choice_title}>{t('welcome.mainnetTitle')}</span>
 
                 <p>
-                  {lang === 'zh' ? '普通用户选择加入。这是实际的Bytom网络,包含真实的交易信息。' : 'For common users to enter. Mainnet is the production network, that carry real Bytom transactions.'}
+                  {t('welcome.mainnetMsg')}
                 </p>
               </div>
             </label>
@@ -90,10 +91,10 @@ class Index extends React.Component {
                     {...typeProps}
                     value='testnet' />
               <div className={`${styles.choice} ${styles.testnet}`}>
-                  <span className={styles.choice_title}>{lang === 'zh' ? '加入 Bytom 测试网络' : 'Join the Bytom Testnet' }</span>
+                  <span className={styles.choice_title}>{t('welcome.testnetTitle') }</span>
 
                   <p>
-                    {lang === 'zh' ? '开发者选择加入。这是Bytom的测试网络,用于Bytom的相关测试。' : 'For developers or bytom testers to enter. Testnet is an alternative Bytom blockchain, and to be used for testing.' }
+                    {t('welcome.testnetMsg')}
                   </p>
               </div>
             </label>
@@ -106,10 +107,10 @@ class Index extends React.Component {
                      {...typeProps}
                      value='solonet' />
               <div className={`${styles.choice} ${styles.new}`}>
-                <span className={styles.choice_title}>{lang === 'zh' ? '创建 Bytom 单机网络' : 'Create the Bytom Soloent' }</span>
+                <span className={styles.choice_title}>{t('welcome.solonetTitle') }</span>
 
                 <p>
-                  {lang === 'zh' ? '创建一个沙盒私有网络供用户运行和测试功能。' : 'For users/developers to run and test wallet\'s new function. Solonet is a private sandbox blockchain network.' }
+                  {t('welcome.solonetMsg')}
                 </p>
               </div>
             </label>
@@ -139,7 +140,7 @@ const config = {
   ]
 }
 
-export default connect(
+export default  withNamespaces('translations') (connect(
   mapStateToProps,
   mapDispatchToProps
-)(reduxForm(config)(Index))
\ No newline at end of file
+)(reduxForm(config)(Index)))
\ No newline at end of file
diff --git a/src/i18n.js b/src/i18n.js
deleted file mode 100644 (file)
index dfcad38..0000000
+++ /dev/null
@@ -1,36 +0,0 @@
-import i18n from 'i18next'
-import LanguageDetector from 'i18next-browser-languagedetector'
-
-import transaction_zh from './locales/zh/translation.json'
-import transaction_en from './locales/en/translation.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',
-
-  interpolation: {
-    escapeValue: false, // not needed for react!!
-    prefix: '__',
-    suffix: '__'
-  },
-
-  react: {
-    wait: true,
-    bindStore: false
-  }
-})
-
-export default i18n
index 2f594de..d39e887 100644 (file)
     "repeatPlaceHolder":"Please repeat the key password...",
     "errorTitle":"Error in initialization"
   },
+  "welcome":{
+    "connect":"Connecting to Bytom Core...",
+    "join":"Joining network",
+    "joining":"Joining network...",
+    "title":"Configure Bytom Core",
+    "mainnetTitle":"Join the Bytom Mainnet",
+    "mainnetMsg":"For common users to enter. Mainnet is the production network, that carry real Bytom transactions.",
+    "testnetTitle":"Join the Bytom Testnet",
+    "testnetMsg":"For developers or bytom testers to enter. Testnet is an alternative Bytom blockchain, and to be used for testing.",
+    "solonetTitle":"Create the Bytom Soloent",
+    "solonetMsg":"For users/developers to run and test wallet's new function. Solonet is a private sandbox blockchain network."
+  },
   "backup":{
     "title":"Backup and Restore",
     "backup":"Back Up",
index a7e7edf..6170e5c 100644 (file)
     "repeatPlaceHolder":"请重复输入密钥密码...",
     "errorTitle":"初始化错误"
   },
+  "welcome":{
+    "connect":"正在连接到Bytom Core...",
+    "join":"加入网络",
+    "joining":"加入网络...",
+    "title":"配置 Bytom Core",
+    "mainnetTitle":"加入 Bytom 主网",
+    "mainnetMsg":"普通用户选择加入。这是实际的Bytom网络,包含真实的交易信息。",
+    "testnetTitle":"加入 Bytom 测试网络",
+    "testnetMsg":"开发者选择加入。这是Bytom的测试网络,用于Bytom的相关测试。",
+    "solonetTitle":"创建 Bytom 单机网络",
+    "solonetMsg":"创建一个沙盒私有网络供用户运行和测试功能。"
+  },
   "backup":{
     "title":"备份与恢复",
     "backup":"备份",