From efee7bec08327b407331c468cff24d05e381d35e Mon Sep 17 00:00:00 2001
From: Zhiting Lin <zlin035@uottawa.ca>
Date: Thu, 11 Oct 2018 19:12:43 +0800
Subject: [PATCH] update the i18n for the asset

---
 src/features/app/components/Main/Main.jsx          | 15 +++-------
 src/features/assets/components/AssetShow.jsx       | 29 +++++++++---------
 src/features/assets/components/AssetUpdate.jsx     | 20 ++++++-------
 src/features/assets/components/List.jsx            | 16 ++++------
 src/features/assets/components/ListItem.jsx        |  8 ++---
 src/features/assets/components/New.jsx             | 34 +++++++++++-----------
 .../shared/components/KeyConfiguration.jsx         | 12 ++++----
 .../shared/components/XpubField/XpubField.jsx      | 29 ++++++------------
 src/i18n.js                                        |  5 ++--
 9 files changed, 70 insertions(+), 98 deletions(-)

diff --git a/src/features/app/components/Main/Main.jsx b/src/features/app/components/Main/Main.jsx
index ab35f72..6c2526d 100644
--- a/src/features/app/components/Main/Main.jsx
+++ b/src/features/app/components/Main/Main.jsx
@@ -7,7 +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'
+import { withNamespaces } from 'react-i18next'
 
 class Main extends React.Component {
 
@@ -33,7 +33,7 @@ class Main extends React.Component {
   render() {
     let logo = require('images/logo-bytom-white.svg')
 
-    const { i18n ,lng, version } = this.props
+    const { t, i18n , version } = this.props
 
     const changeLanguage = (lng) => {
       i18n.changeLanguage(lng)
@@ -60,7 +60,7 @@ class Main extends React.Component {
                   className={styles.languages}
                   noCaret
                 >
-                  {lng === 'zh' ? '中' : 'EN'}
+                  {t('language')}
                 </Dropdown.Toggle>
                 <Dropdown.Menu
                   className={styles.languagesMenu}
@@ -82,7 +82,7 @@ class Main extends React.Component {
 
             <div className={styles.version}>
               <span>
-                {lng==='zh'?'版本号':'Version'}: {version}
+                {t('commonWords.version')}: {version}
               </span>
             </div>
 
@@ -107,18 +107,11 @@ export default withNamespaces('translations') (connect(
   (state) => ({
     canLogOut: state.core.requireClientToken,
     version:state.core.version,
-    lang: state.core.lang,
     connected: true,
     showDropwdown: state.app.dropdownState == 'open',
   }),
   (dispatch) => ({
     toggleDropdown: () => dispatch(actions.app.toggleDropdown),
     closeDropdown: () => dispatch(actions.app.closeDropdown),
-    setLang: (event) => {
-      dispatch({
-        type: 'UPDATE_CORE_LANGUAGE',
-        lang: event
-      })
-    }
   })
 )(Main))
diff --git a/src/features/assets/components/AssetShow.jsx b/src/features/assets/components/AssetShow.jsx
index 03cfdfe..c13e735 100644
--- a/src/features/assets/components/AssetShow.jsx
+++ b/src/features/assets/components/AssetShow.jsx
@@ -7,16 +7,16 @@ import {
   RawJsonButton,
 } from 'features/shared/components'
 import componentClassNames from 'utility/componentClassNames'
+import { withNamespaces } from 'react-i18next'
 
 class AssetShow extends BaseShow {
   render() {
-    const item = this.props.item
-    const lang = this.props.lang
+    const { item, t } = this.props
 
     let view
     if (item) {
       const title = <span>
-        { lang === 'zh' ? '资产' :'Asset ' }
+        { t('asset.asset') }
         <code>{item.alias ? item.alias :item.id}</code>
       </span>
 
@@ -27,7 +27,7 @@ class AssetShow extends BaseShow {
           <KeyValueTable
             id={item.id}
             object='asset'
-            title={ lang === 'zh' ? '详情' : 'Details' }
+            title={t('form.detail')}
             actions={[
               // <button key='show-circulation' className='btn btn-link' onClick={this.props.showCirculation.bind(this, item)}>
               //  Circulation
@@ -36,23 +36,21 @@ class AssetShow extends BaseShow {
             ]}
             items={[
               {label: 'ID', value: item.id},
-              {label: ( lang === 'zh' ? '别名' : 'Alias' ), value: item.alias, editUrl: item.alias === 'BTM' ? null : `/assets/${item.id}/alias`},
-              {label: ( lang === 'zh' ? '定义' : 'Definition'), value: item.definition},
-              {label: ( lang === 'zh' ? '扩展公钥数' : 'xpubs' ), value: (item.xpubs || []).length},
-              {label: ( lang === 'zh' ? '签名数' : 'Quorum' ), value: item.quorum},
+              {label: t('form.alias'), value: item.alias, editUrl: item.alias === 'BTM' ? null : `/assets/${item.id}/alias`},
+              {label: t('form.definition'), value: item.definition},
+              {label: t('form.xpubs'), value: (item.xpubs || []).length},
+              {label: t('form.quorum'), value: item.quorum},
             ]}
-            lang={lang}
           />
 
           {(item.xpubs || []).map((key, index) =>
             <KeyValueTable
               key={index}
-              title={lang === 'zh' ? `扩展公钥 ${index + 1}` :`xpub ${index + 1}`}
+              title={t('asset.xpubs', {id: index + 1})}
               items={[
-                {label: ( lang === 'zh' ? '索引' : 'Index' ), value: index},
-                {label: ( lang === 'zh' ? '资产公钥' : 'Asset Pubkey') , value: key},
+                {label: t('form.index') , value: index},
+                {label: t('asset.assetPub') , value: key},
               ]}
-              lang={lang}
             />
           )}
         </PageContent>
@@ -69,7 +67,6 @@ import actions from 'actions'
 
 const mapStateToProps = (state, ownProps) => ({
   item: state.asset.items[ownProps.params.id],
-  lang: state.core.lang
 })
 
 const mapDispatchToProps = ( dispatch ) => ({
@@ -85,7 +82,7 @@ const mapDispatchToProps = ( dispatch ) => ({
 })
 
 
-export default connect(
+export default withNamespaces('translations') ( connect(
   mapStateToProps,
   mapDispatchToProps
-)(AssetShow)
+)(AssetShow))
diff --git a/src/features/assets/components/AssetUpdate.jsx b/src/features/assets/components/AssetUpdate.jsx
index 0391693..2ff2472 100644
--- a/src/features/assets/components/AssetUpdate.jsx
+++ b/src/features/assets/components/AssetUpdate.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { BaseUpdate, FormContainer, FormSection, NotFound, TextField } from 'features/shared/components'
 import { reduxForm } from 'redux-form'
+import {withNamespaces} from 'react-i18next'
 
 class Form extends React.Component {
   constructor(props) {
@@ -26,9 +27,8 @@ class Form extends React.Component {
   }
 
   render() {
-    const lang = this.props.lang
     if (this.state.notFound) {
-      return <NotFound lang={lang}/>
+      return <NotFound />
     }
     const item = this.props.item
 
@@ -40,11 +40,12 @@ class Form extends React.Component {
       fields: { alias },
       error,
       handleSubmit,
-      submitting
+      submitting,
+      t
     } = this.props
 
     const title = <span>
-      {lang === 'zh' ? '编辑资产别名' : 'Edit asset alias '}
+      {t('asset.editAlias')}
       <code>{item.alias ? item.alias :item.id}</code>
     </span>
 
@@ -53,11 +54,11 @@ class Form extends React.Component {
       label={title}
       onSubmit={handleSubmit(this.submitWithErrors)}
       submitting={submitting}
-      lang={lang}>
+      >
 
-      <FormSection title={lang === 'zh' ? '资产别名' : 'Asset Alias' }>
+      <FormSection title={t('asset.alias') }>
         <TextField
-          placeholder={ lang === 'zh' ? '请输入资产别名' : 'Please entered asset alias' }
+          placeholder={ t('asset.aliasPlaceholder')}
           fieldProps={alias}
           type= 'text'
         />
@@ -68,7 +69,6 @@ class Form extends React.Component {
 
 const mapStateToProps = (state, ownProps) => ({
   item: state.asset.items[ownProps.params.id],
-  lang: state.core.lang
 })
 
 const initialValues = (state, ownProps) => {
@@ -88,8 +88,8 @@ const updateForm = reduxForm({
   fields: ['alias'],
 }, initialValues)(Form)
 
-export default BaseUpdate.connect(
+export default withNamespaces('translations') (BaseUpdate.connect(
   mapStateToProps,
   BaseUpdate.mapDispatchToProps('asset'),
   updateForm
-)
+))
diff --git a/src/features/assets/components/List.jsx b/src/features/assets/components/List.jsx
index b111ea8..dbe81f2 100644
--- a/src/features/assets/components/List.jsx
+++ b/src/features/assets/components/List.jsx
@@ -1,28 +1,22 @@
 import React from 'react'
 import { BaseList, TableList } from 'features/shared/components'
 import ListItem from './ListItem'
+import { withNamespaces } from 'react-i18next'
 
 const type = 'asset'
 
-const mapStateToProps = (state) => {
-  let titles
-  if(state.core.lang === 'zh'){
-    titles = ['资产别名','资产ID']
-  }else{
-    titles = ['Asset Alias', 'Asset ID']
-  }
-
+const mapStateToProps = (state, props) => {
   return {
     ...BaseList.mapStateToProps(type, ListItem, {
       wrapperComponent: TableList,
       wrapperProps: {
-        titles: titles
+        titles: props.t('asset.formTitle', { returnObjects: true })
       }
     })(state)
   }
 }
 
-export default BaseList.connect(
+export default withNamespaces('translations') (BaseList.connect(
   mapStateToProps,
   BaseList.mapDispatchToProps(type)
-)
+))
diff --git a/src/features/assets/components/ListItem.jsx b/src/features/assets/components/ListItem.jsx
index 2cd6c80..d3dfec1 100644
--- a/src/features/assets/components/ListItem.jsx
+++ b/src/features/assets/components/ListItem.jsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Link } from 'react-router'
+import {withNamespaces} from 'react-i18next'
 
 class ListItem extends React.Component {
   render() {
-    const item = this.props.item
-    const lang = this.props.lang
+    const {item, t} = this.props
 
     return(
       <tr>
@@ -12,7 +12,7 @@ class ListItem extends React.Component {
         <td><code>{item.id}</code></td>
         <td>
           <Link to={`/assets/${item.id}`}>
-            {lang === 'zh' ? '查看详情' : 'View details'} →
+            {t('commonWords.viewDetails')} →
           </Link>
         </td>
       </tr>
@@ -20,4 +20,4 @@ class ListItem extends React.Component {
   }
 }
 
-export default ListItem
+export default withNamespaces('translations') ( ListItem)
diff --git a/src/features/assets/components/New.jsx b/src/features/assets/components/New.jsx
index 2d1ab42..4930731 100644
--- a/src/features/assets/components/New.jsx
+++ b/src/features/assets/components/New.jsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import { BaseNew, FormContainer, FormSection, JsonField, KeyConfiguration, TextField } from 'features/shared/components'
 import { reduxForm } from 'redux-form'
+import {withNamespaces} from 'react-i18next'
 
 class Form extends React.Component {
   constructor(props) {
@@ -18,32 +19,31 @@ class Form extends React.Component {
 
   render() {
     const {
-      fields: { alias, tags, definition, xpubs, quorum },
+      fields: { alias, definition, xpubs, quorum },
       error,
       handleSubmit,
-      submitting
+      submitting,
+      t
     } = this.props
-    const lang = this.props.lang
 
     return(
       <FormContainer
         error={error}
-        label= { lang === 'zh' ? '新建资产' : 'New asset' }
+        label= { t('asset.new') }
         onSubmit={handleSubmit(this.submitWithErrors)}
         submitting={submitting}
-        lang={lang}>
+        >
 
-        <FormSection title={ lang === 'zh' ? '资产信息' : 'Asset Information'}>
-          <TextField title={ lang === 'zh' ? '别名' : 'Alias'} placeholder={ lang === 'zh' ? '别名' : 'Alias'} fieldProps={alias} autoFocus={true} />
-          <JsonField title={ lang === 'zh' ? '定义' : 'Definition' } fieldProps={definition} lang={lang}/>
+        <FormSection title={t('asset.information')}>
+          <TextField title={t('form.alias')} placeholder={t('form.alias')} fieldProps={alias} autoFocus={true} />
+          <JsonField title={ t('form.definition') } fieldProps={definition}/>
         </FormSection>
 
-        <FormSection title={ lang === 'zh' ? '密钥和签名' :'Keys and Signing' }>
+        <FormSection title={t('asset.keyAndSign')}>
           <KeyConfiguration
-            lang={lang}
             xpubs={xpubs}
             quorum={quorum}
-            quorumHint={ lang === 'zh' ? '所需的签名数' : 'Number of signatures required to issue' } />
+            quorumHint={t('asset.quorumHint')} />
         </FormSection>
 
       </FormContainer>
@@ -51,9 +51,9 @@ class Form extends React.Component {
   }
 }
 
-const validate = (values,props) => {
+const validate = (values, props) => {
   const errors = { xpubs:{} }
-  const lang = props.lang
+  const t = props.t
 
   const jsonFields = ['definition']
   jsonFields.forEach(key => {
@@ -61,11 +61,11 @@ const validate = (values,props) => {
     if (fieldError) { errors[key] = fieldError }
   })
 
-  if (!values.alias) { errors.alias = ( lang === 'zh' ? '资产别名是必须项' :'Asset alias is required' ) }
+  if (!values.alias) { errors.alias = t('asset.aliasError')  }
 
   values.xpubs.forEach((xpub, index) => {
     if (!values.xpubs[index].value) {
-      errors.xpubs[index] = {...errors.xpubs[index], value: ( lang === 'zh' ? '请输入或选择密钥' : 'Please provide keys' )}
+      errors.xpubs[index] = {...errors.xpubs[index], value: t('asset.keysError')}
     }
   })
 
@@ -79,7 +79,7 @@ const fields = [
   'xpubs[].type',
   'quorum'
 ]
-export default BaseNew.connect(
+export default withNamespaces('translations') ( BaseNew.connect(
   BaseNew.mapStateToProps('asset'),
   BaseNew.mapDispatchToProps('asset'),
   reduxForm({
@@ -91,4 +91,4 @@ export default BaseNew.connect(
       quorum: 1,
     }
   })(Form)
-)
+))
diff --git a/src/features/shared/components/KeyConfiguration.jsx b/src/features/shared/components/KeyConfiguration.jsx
index 5fea835..0ddee68 100644
--- a/src/features/shared/components/KeyConfiguration.jsx
+++ b/src/features/shared/components/KeyConfiguration.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { SelectField, XpubField } from 'features/shared/components'
+import {withNamespaces} from 'react-i18next'
 
 const rangeOptions = [1,2,3,4,5,6].map(val => ({label: val, value: val}))
 
@@ -13,7 +14,8 @@ class KeyConfiguration extends React.Component {
     const {
       quorum,
       quorumHint,
-      xpubs
+      xpubs,
+      t
     } = this.props
 
     // Override onChange here rather than in a redux-form normalizer because
@@ -50,12 +52,11 @@ class KeyConfiguration extends React.Component {
     }
 
     const quorumOptions = rangeOptions.slice(0, this.state.keys)
-    const lang = this.props.lang
 
     return(
       <div>
         <SelectField options={rangeOptions}
-          title={ lang === 'zh' ? '密钥数' : 'Keys' }
+          title={ t('form.keys') }
           skipEmpty={true}
           fieldProps={{
             value: this.state.keys,
@@ -63,7 +64,7 @@ class KeyConfiguration extends React.Component {
           }} />
 
         <SelectField options={quorumOptions}
-          title={ lang === 'zh' ? '签名数' : 'Quorum' }
+          title={ t('form.quorum') }
           skipEmpty={true}
           hint={quorumHint}
           fieldProps={{
@@ -77,11 +78,10 @@ class KeyConfiguration extends React.Component {
             index={index}
             typeProps={xpub.type}
             valueProps={xpub.value}
-            lang={lang}
           />)}
       </div>
     )
   }
 }
 
-export default KeyConfiguration
+export default withNamespaces('translations') (KeyConfiguration)
diff --git a/src/features/shared/components/XpubField/XpubField.jsx b/src/features/shared/components/XpubField/XpubField.jsx
index 8ad8c02..e155ba0 100644
--- a/src/features/shared/components/XpubField/XpubField.jsx
+++ b/src/features/shared/components/XpubField/XpubField.jsx
@@ -3,18 +3,9 @@ import styles from './XpubField.scss'
 import { SelectField, FieldLabel, TextField } from '../'
 import { connect } from 'react-redux'
 import actions from 'features/mockhsm/actions'
+import {withNamespaces} from 'react-i18next'
 
-const methodOptions = {
-  mockhsm: 'Use existing key',
-  // generate: 'Generate new MockHSM key',
-  provide: 'Provide existing xpub',
-}
-
-const methodOptionsZh = {
-  mockhsm: '使用已有的密钥',
-  // generate: 'Generate new MockHSM key',
-  provide: '提供已有的扩展公钥',
-}
+const methodOptions = ['mockhsm', 'provide']
 
 class XpubField extends React.Component {
   constructor(props) {
@@ -35,7 +26,7 @@ class XpubField extends React.Component {
       })
     }
 
-    this.props.typeProps.onChange(Object.keys(methodOptions)[0])
+    this.props.typeProps.onChange(methodOptions[0])
   }
 
   render() {
@@ -43,8 +34,8 @@ class XpubField extends React.Component {
       typeProps,
       valueProps,
       mockhsmKeys,
+      t
     } = this.props
-    const lang = this.props.lang
 
     const typeOnChange = event => {
       const value = typeProps.onChange(event).value
@@ -62,12 +53,11 @@ class XpubField extends React.Component {
         autoFocus={this.state.autofocusInput}
         valueKey='xpub'
         labelKey='label'
-        lang={lang}
         fieldProps={{...valueProps, onChange: valueOnChange}} />,
       'provide': <TextField
         autoFocus={this.state.autofocusInput}
         fieldProps={{...valueProps, onChange: valueOnChange}}
-        placeholder={ lang === 'zh' ? '输入扩展公钥' : 'Enter xpub' } />,
+        placeholder={ t('xpub.providePlaceholder') } />,
       'generate': <TextField
         autoFocus={this.state.autofocusInput}
         fieldProps={{...valueProps, onChange: valueOnChange}}
@@ -76,11 +66,11 @@ class XpubField extends React.Component {
 
     return (
       <div className={styles.main}>
-        <FieldLabel>{ lang === 'zh' ? '密钥' :'Key '}{this.props.index + 1}</FieldLabel>
+        <FieldLabel>{t('form.key')}{this.props.index + 1}</FieldLabel>
 
         <table className={styles.options}>
           <tbody>
-            {Object.keys(methodOptions).map((key) =>
+            {methodOptions.map((key) =>
               <tr key={`key-${this.props.index}-option-${key}`}>
                 <td className={styles.label}>
                   <label>
@@ -91,7 +81,7 @@ class XpubField extends React.Component {
                       checked={key == typeProps.value}
                       value={key}
                     />
-                    { lang === 'zh' ? methodOptionsZh[key] : methodOptions[key]}
+                    { t('xpub.methodOptions', { returnObjects: true })[key]}
                   </label>
                 </td>
 
@@ -131,11 +121,10 @@ export default connect(
     return {
       autocompleteIsLoaded: state.key.autocompleteIsLoaded,
       mockhsmKeys: keys,
-      lang: state.core.lang
     }
   },
   (dispatch) => ({
     didLoadAutocomplete: () => dispatch(actions.didLoadAutocomplete),
     fetchAll: (cb) => dispatch(actions.fetchAll(cb)),
   })
-)(XpubField)
+)(withNamespaces('translations')(XpubField))
diff --git a/src/i18n.js b/src/i18n.js
index 2079f15..6658690 100644
--- a/src/i18n.js
+++ b/src/i18n.js
@@ -21,11 +21,10 @@ i18n.use(LanguageDetector).init({
   ns: ['translations'],
   defaultNS: 'translations',
 
-  keySeparator: false, // we use content as keys
-
   interpolation: {
     escapeValue: false, // not needed for react!!
-    formatSeparator: ','
+    prefix: '__',
+    suffix: '__'
   },
 
   react: {
-- 
2.11.0