From 949bbb86e97f7fc64c804a3293b0bb89db52c493 Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Fri, 12 Oct 2018 14:18:18 +0800
Subject: [PATCH] update console and modal i18n

---
 src/features/app/components/Modal/Modal.jsx        | 12 +++++------
 .../core/components/CoreIndex/CoreIndex.jsx        |  1 -
 src/features/mockhsm/components/List.jsx           | 16 +++++---------
 .../components/ConsoleSection/ConsoleSection.jsx   | 25 ++++++++++------------
 src/i18n.js                                        |  2 +-
 src/locales/en/transaltion.json                    | 15 ++++++++++++-
 src/locales/zh/translation.json                    | 14 +++++++++++-
 7 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/features/app/components/Modal/Modal.jsx b/src/features/app/components/Modal/Modal.jsx
index c4107ed..1d1ca24 100644
--- a/src/features/app/components/Modal/Modal.jsx
+++ b/src/features/app/components/Modal/Modal.jsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { connect } from 'react-redux'
 import styles from './Modal.scss'
 import actions from 'actions'
+import {withNamespaces} from 'react-i18next'
 
 class Modal extends React.Component {
   render() {
@@ -10,9 +11,9 @@ class Modal extends React.Component {
       isShowing,
       body,
       acceptAction,
-      cancelAction
+      cancelAction,
+      t
     } = this.props
-    const lang = this.props.lang
 
     if (!isShowing) return null
 
@@ -32,13 +33,13 @@ class Modal extends React.Component {
           {
             boxStyle &&
               <div className={styles.title}>
-                <p>{ lang === 'zh' ? '命令行' : 'Console'}</p>
+                <p>{ t('console.title')}</p>
                 <button className={`btn ${styles.close}`} onClick={accept}>X</button>
               </div>
           }
           {body}
           {!noCloseBtn && <button className={`btn btn-${this.props.options.danger ? 'danger' : 'primary'} ${styles.accept}`} onClick={accept}>
-            { lang === 'zh' ?  '关闭' : 'OK' }</button>}
+            { t('form.ok') }</button>}
           {!noCloseBtn && cancel && <button className={`btn btn-link ${styles.cancel}`} onClick={cancel}>Cancel</button>}
         </div>
       </div>
@@ -52,9 +53,8 @@ const mapStateToProps = (state) => ({
   acceptAction: state.app.modal.accept,
   cancelAction: state.app.modal.cancel,
   options: state.app.modal.options,
-  lang: state.core.lang
 })
 
 // NOTE: ommitting a function for `mapDispatchToProps` passes `dispatch` as a
 // prop to the component
-export default connect(mapStateToProps)(Modal)
+export default connect(mapStateToProps)(withNamespaces('translations')(Modal))
diff --git a/src/features/core/components/CoreIndex/CoreIndex.jsx b/src/features/core/components/CoreIndex/CoreIndex.jsx
index eaa6728..6fe94af 100644
--- a/src/features/core/components/CoreIndex/CoreIndex.jsx
+++ b/src/features/core/components/CoreIndex/CoreIndex.jsx
@@ -56,7 +56,6 @@ class CoreIndex extends React.Component {
     this.props.showModal(
       <ConsoleSection
         cmd={this.props.cmd}
-        lang={this.props.core.lang}
       />
     )
   }
diff --git a/src/features/mockhsm/components/List.jsx b/src/features/mockhsm/components/List.jsx
index a3048b8..da6915a 100644
--- a/src/features/mockhsm/components/List.jsx
+++ b/src/features/mockhsm/components/List.jsx
@@ -1,33 +1,27 @@
 import { BaseList, TableList } from 'features/shared/components'
 import ListItem from './ListItem'
+import {withNamespaces} from 'react-i18next'
 
 const type = 'key'
 
 class KeyList extends BaseList.ItemList {
 }
 
-const mapStateToProps = (state) => {
-  let titles
-  if(state.core.lang === 'zh'){
-    titles = ['别名','主公钥']
-  }else{
-    titles = ['Alias', 'xpub']
-  }
-
+const mapStateToProps = (state, props) => {
   return {
     ...BaseList.mapStateToProps(type, ListItem, {
       skipQuery: true,
       label: 'Keys',
       wrapperComponent: TableList,
       wrapperProps: {
-        titles: titles
+        titles: props.t('key.formTitle', { returnObjects: true })
       }
     })(state)
   }
 }
 
-export default BaseList.connect(
+export default withNamespaces('translations') (BaseList.connect(
   mapStateToProps,
   BaseList.mapDispatchToProps(type),
   KeyList
-)
+))
diff --git a/src/features/shared/components/ConsoleSection/ConsoleSection.jsx b/src/features/shared/components/ConsoleSection/ConsoleSection.jsx
index 3a19bd1..a4d44fe 100644
--- a/src/features/shared/components/ConsoleSection/ConsoleSection.jsx
+++ b/src/features/shared/components/ConsoleSection/ConsoleSection.jsx
@@ -4,6 +4,7 @@ import styles  from './ConsoleSection.scss'
 import commandList from './command.json'
 import ListItem from './ListItem/ListItem'
 import disableAutocomplete from 'utility/disableAutocomplete'
+import {withNamespaces, Trans} from 'react-i18next'
 
 class ConsoleSection extends React.Component {
   constructor(props) {
@@ -81,7 +82,7 @@ class ConsoleSection extends React.Component {
   }
 
   render() {
-    const lang = this.props.lang
+    const t = this.props.t
     let taskList = this.state.data.map(function(listItem) {
       return (
         <ListItem
@@ -95,18 +96,14 @@ class ConsoleSection extends React.Component {
           className={styles.reactConsoleContainer}
           ref={(el) => { this.messagesContainer = el }}
         >
-          <p>
-            {lang === 'zh' ?
-              '欢迎来到Bytom Core API 命令行。':
-            'Welcome to the Bytom Core API console.'}<br/>
-            {lang === 'zh' ? '输入':'Type' }<code>help</code>  {lang === 'zh' ?'查看所有可用命令行。':'for an overview of available commands.'}
-          </p>
+          <Trans i18nKey='console.message' parent='p'>
+            Welcome to the Bytom Core API console.<br/> Type <code>help</code> for an overview of available commands
+          </Trans>
           <p className='text-danger'>
             <strong>
-              {lang === 'zh' ? '注意' : 'WARNING'}:
-            </strong> {lang === 'zh' ?
-            '骗子可能会让你在此输入命令，以盗取你的钱包内容。 如果你没有了解命令所带来的后果，请不要在此输入命令。':
-            'Scammers have been active, telling users to type commands here, stealing their wallet contents. Do not use this console without fully understanding the ramification of a command.'}
+              {t('console.warning')}:
+            </strong>
+            {t('console.warningMessage')}
           </p>
           {taskList}
         </div>
@@ -118,10 +115,10 @@ class ConsoleSection extends React.Component {
                 type='text'
                 autoFocus='autofocus'
                 onKeyDown={(event) => this.keyDownEvent(event)}
-                placeholder={ lang === 'zh' ? '输入 \"help\" 查看所有可用的命令' : 'Enter "help" for an overview of available commands' } />
+                placeholder={t('console.placeholder')} />
             </span>
             <button type='submit' className={'btn btn-primary'} tabIndex='-1'>
-              > { lang === 'zh' ? '输入' : 'Enter' }
+              > { t('form.enter') }
             </button>
           </form>
         </div>
@@ -130,4 +127,4 @@ class ConsoleSection extends React.Component {
   }
 }
 
-export default ConsoleSection
\ No newline at end of file
+export default  withNamespaces('translations') (ConsoleSection)
\ No newline at end of file
diff --git a/src/i18n.js b/src/i18n.js
index 6658690..6ed0acb 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -28,7 +28,7 @@ i18n.use(LanguageDetector).init({
   },
 
   react: {
-    wait: true
+    wait: true,
   }
 })
 
diff --git a/src/locales/en/transaltion.json b/src/locales/en/transaltion.json
index 154a28a..ef6df7a 100644
--- a/src/locales/en/transaltion.json
+++ b/src/locales/en/transaltion.json
@@ -30,7 +30,9 @@
     "index":"Index",
     "keys": "Keys",
     "key": "Key",
-    "selectPlaceholder": "Select one..."
+    "selectPlaceholder": "Select one...",
+    "enter":"Enter",
+    "ok":"OK"
   },
   "xpub":{
     "methodOptions" : {
@@ -67,5 +69,16 @@
     "highestBlock":"Highest Block",
     "networkId":"Network Id",
     "coreStatus":"Core Status"
+  },
+  "console":{
+    "title":"Console",
+    "message":"Welcome to the Bytom Core API console.<1/> Type <2>help</2> for an overview of available commands",
+    "warning":"WARNING",
+    "warningMessage":"Scammers have been active, telling users to type commands here, stealing their wallet contents. Do not use this console without fully understanding the ramification of a command.",
+    "placeholder":"Enter \"help\" for an overview of available commands"
+  },
+  "key":{
+    "formTitle":["Alias", "xpub"]
+
   }
 }
\ No newline at end of file
diff --git a/src/locales/zh/translation.json b/src/locales/zh/translation.json
index 9531401..db29d74 100644
--- a/src/locales/zh/translation.json
+++ b/src/locales/zh/translation.json
@@ -30,7 +30,9 @@
     "index":"索引",
     "keys": "密钥数",
     "key": "密钥",
-    "selectPlaceholder": "请选择..."
+    "selectPlaceholder": "请选择...",
+    "enter":"输入",
+    "ok":"关闭"
   },
   "xpub":{
     "methodOptions" : {
@@ -67,5 +69,15 @@
     "highestBlock":"最高高度",
     "networkId":"网络ID",
     "coreStatus":"核心状态"
+  },
+  "console":{
+    "title":"命令行",
+    "message":"欢迎来到Bytom Core API 命令行。<1/> 输入<2>help</2> 查看所有可用命令行。",
+    "warning":"注意",
+    "warningMessage":"骗子可能会让你在此输入命令，以盗取你的钱包内容。 如果你没有了解命令所带来的后果，请不要在此输入命令。",
+    "placeholder":"输入 \"help\" 查看所有可用的命令"
+  },
+  "key":{
+    "formTitle":["别名","主公钥"]
   }
 }
\ No newline at end of file
-- 
2.11.0