From e64c5b2cdfa267abb69c0c1773159884cdc2df96 Mon Sep 17 00:00:00 2001
From: Yongfeng LI <wliyongfeng@gmail.com>
Date: Fri, 2 Feb 2018 15:13:44 +0800
Subject: [PATCH] make language settable

---
 .../app/components/Navigation/Navigation.jsx       | 42 ++++++++++++++++------
 .../app/components/Navigation/Navigation.scss      | 18 ++++++++++
 src/features/app/components/Sync/Sync.jsx          |  3 +-
 src/features/core/reducers.js                      |  7 ++--
 4 files changed, 56 insertions(+), 14 deletions(-)

diff --git a/src/features/app/components/Navigation/Navigation.jsx b/src/features/app/components/Navigation/Navigation.jsx
index 23afd22..db25d5c 100644
--- a/src/features/app/components/Navigation/Navigation.jsx
+++ b/src/features/app/components/Navigation/Navigation.jsx
@@ -1,8 +1,9 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import {connect} from 'react-redux'
+import {DropdownButton, MenuItem} from 'react-bootstrap'
+import {Link} from 'react-router'
 import styles from './Navigation.scss'
-import { navIcon } from '../../utils'
+import {navIcon} from '../../utils'
 import Sync from '../Sync/Sync'
 
 class Navigation extends React.Component {
@@ -26,25 +27,25 @@ class Navigation extends React.Component {
           <li>
             <Link to='/transactions' activeClassName={styles.active}>
               {navIcon('transaction', styles)}
-              { lang === 'zh' ? '交易' : 'Transactions' }
+              {lang === 'zh' ? '交易' : 'Transactions'}
             </Link>
           </li>
           <li>
             <Link to='/accounts' activeClassName={styles.active}>
               {navIcon('account', styles)}
-              { lang === 'zh' ? '账户' : 'Accounts' }
+              {lang === 'zh' ? '账户' : 'Accounts'}
             </Link>
           </li>
           <li>
             <Link to='/assets' activeClassName={styles.active}>
               {navIcon('asset', styles)}
-              { lang === 'zh' ? '资产' : 'Assets' }
+              {lang === 'zh' ? '资产' : 'Assets'}
             </Link>
           </li>
           <li>
             <Link to='/balances' activeClassName={styles.active}>
               {navIcon('balance', styles)}
-              { lang === 'zh' ? '余额' : 'Balances' }
+              {lang === 'zh' ? '余额' : 'Balances'}
             </Link>
           </li>
         </ul>
@@ -55,7 +56,7 @@ class Navigation extends React.Component {
           <li>
             <Link to='/keys' activeClassName={styles.active}>
               {navIcon('mockhsm', styles)}
-              { lang === 'zh' ? '密钥' : 'Keys' }
+              {lang === 'zh' ? '密钥' : 'Keys'}
             </Link>
           </li>
           }
@@ -71,7 +72,22 @@ class Navigation extends React.Component {
           </li>
         </ul>
 
-        {<Sync />}
+        <ul className={`${styles.navigation} ${styles.border}`}>
+          <li className={styles.navigationTitle}>language</li>
+          <li>
+            <DropdownButton
+              className={`btn btn-default ${styles.addAction} ${styles.smallFont} ${styles.langBtn}`}
+              id='input-dropdown-addon'
+              title={this.props.lang === 'zh' ? '中文' : 'English'}
+              onSelect={this.props.setLang}
+            >
+              <MenuItem className={`${styles.smallFont}`} eventKey='zh'>中文</MenuItem>
+              <MenuItem className={`${styles.smallFont}`} eventKey='en'>English</MenuItem>
+            </DropdownButton>
+          </li>
+        </ul>
+
+        {<Sync/>}
       </div>
     )
   }
@@ -95,6 +111,12 @@ export default connect(
     }
   },
   (dispatch) => ({
-    openTutorial: () => dispatch({ type: 'OPEN_TUTORIAL' })
+    openTutorial: () => dispatch({type: 'OPEN_TUTORIAL'}),
+    setLang: (event) => {
+      dispatch({
+        type: 'UPDATE_CORE_LANGUAGE',
+        lang: event
+      })
+    }
   })
 )(Navigation)
diff --git a/src/features/app/components/Navigation/Navigation.scss b/src/features/app/components/Navigation/Navigation.scss
index 0c769a3..6e4129a 100644
--- a/src/features/app/components/Navigation/Navigation.scss
+++ b/src/features/app/components/Navigation/Navigation.scss
@@ -1,3 +1,9 @@
+.border {
+  padding-top: $gutter-size;
+  border-top: 1px solid $border-inverse-color;
+  margin-top: $gutter-size;
+}
+
 .main {
   a {
     display: block;
@@ -19,6 +25,18 @@
   }
 }
 
+.langBtn {
+  width: 80px !important;
+  height: 30px;
+}
+
+.smallFont {
+  font-size: 12px;
+  & > a {
+    font-size: 12px;
+  }
+}
+
 .navigation {
   padding: 0;
   list-style-type: none;
diff --git a/src/features/app/components/Sync/Sync.jsx b/src/features/app/components/Sync/Sync.jsx
index 1b40fb5..86f1755 100644
--- a/src/features/app/components/Sync/Sync.jsx
+++ b/src/features/app/components/Sync/Sync.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import navStyles from '../Navigation/Navigation.scss'
-import styles from './Sync.scss'
 import { chainClient } from 'utility/environment'
 
 class Sync extends React.Component {
@@ -25,7 +24,7 @@ class Sync extends React.Component {
     })
     arr.unshift(<li key='sync-title' className={navStyles.navigationTitle}>Network status</li>)
 
-    return <ul className={`${navStyles.navigation} ${styles.main}`}>{arr}</ul>
+    return <ul className={`${navStyles.navigation}`}>{arr}</ul>
   }
 }
 
diff --git a/src/features/core/reducers.js b/src/features/core/reducers.js
index 02098b8..14a06c9 100644
--- a/src/features/core/reducers.js
+++ b/src/features/core/reducers.js
@@ -206,8 +206,11 @@ const snapshot = (state = null, action) => {
 
 const version = (state, action) => coreConfigReducer('version', state, 'N/A', action)
 
-const lang = () => {
-  return window.navigator.language.startsWith('zh') ? 'zh' : 'en'
+const lang = (state = window.navigator.language.startsWith('zh') ? 'zh' : 'en', action) => {
+  if (action.type === 'UPDATE_CORE_LANGUAGE') {
+    return action.lang || ''
+  }
+  return state
 }
 
 export default combineReducers({
-- 
2.11.0