src/features/app/components/Navigation/Navigation.jsx

   1 import React from 'react'
   2 import {connect} from 'react-redux'
   3 import {Link} from 'react-router'
   4 import styles from './Navigation.scss'
   5 import {navIcon} from '../../utils'
   6 import Sync from '../Sync/Sync'
   7 import {docsRoot} from '../../../../utility/environment'
   8
   9 class Navigation extends React.Component {
  10   constructor(props) {
  11     super(props)
  12
  13     this.openTutorial = this.openTutorial.bind(this)
  14   }
  15
  16   openTutorial(event) {
  17     event.preventDefault()
  18     this.props.openTutorial()
  19   }
  20
  21   render() {
  22     const lang = this.props.lang
  23     const coreData = this.props.coreData
  24     return (
  25       <div className={styles.main}>
  26         <ul className={styles.navigation}>
  27           <li className={styles.navigationTitle}>core data</li>
  28           <li>
  29             <Link to='/transactions' activeClassName={styles.active}>
  30               {navIcon('transaction', styles)}
  31               {}
  32               {lang === 'zh' ? '交易' : 'Transactions'}
  33             </Link>
  34           </li>
  35           <li>
  36             <Link to='/accounts' activeClassName={styles.active}>
  37               {navIcon('account', styles)}
  38               {lang === 'zh' ? '账户' : 'Accounts'}
  39             </Link>
  40           </li>
  41           <li>
  42             <Link to='/assets' activeClassName={styles.active}>
  43               {navIcon('asset', styles)}
  44               {lang === 'zh' ? '资产' : 'Assets'}
  45             </Link>
  46           </li>
  47           <li>
  48             <Link to='/balances' activeClassName={styles.active}>
  49               {navIcon('balance', styles)}
  50               {lang === 'zh' ? '余额' : 'Balances'}
  51             </Link>
  52           </li>
  53         </ul>
  54
  55         <ul className={styles.navigation}>
  56           <li className={styles.navigationTitle}>services</li>
  57           {this.props.mockhsm &&
  58           <li>
  59             <Link to='/keys' activeClassName={styles.active}>
  60               {navIcon('mockhsm', styles)}
  61               {lang === 'zh' ? '密钥' : 'Keys'}
  62             </Link>
  63           </li>
  64           }
  65         </ul>
  66
  67         { this.props.showNavAdvance && <ul className={styles.navigation}>
  68           <li className={styles.navigationTitle}>advanced</li>
  69           <li>
  70             <Link to='/unspents' activeClassName={styles.active}>
  71               {navIcon('unspent', styles)}
  72               Unspent outputs
  73             </Link>
  74           </li>
  75         </ul>}
  76
  77         <ul className={styles.navigation}>
  78           <li className={styles.navigationTitle}>developers</li>
  79           <li>
  80             <a href={docsRoot} target='_blank'>
  81               {navIcon('docs', styles)}
  82               {lang === 'zh' ? '文档' : 'Documentation'}
  83             </a>
  84           </li>
  85         </ul>
  86
  87         <Sync
  88           lang={lang}
  89         />
  90
  91
  92         <ul className={`${styles.navigation} ${styles.networkStatus}`}>
  93           <li className={`${styles.navigationTitle} ${styles.networkWord}`}>{coreData? coreData['networkId']: ''}</li>
  94         </ul>
  95
  96       </div>
  97     )
  98   }
  99 }
 100
 101 export default connect(
 102   state => {
 103     let docVersion = ''
 104
 105     const versionComponents = state.core.version.match('^([0-9]\\.[0-9])\\.')
 106     if (versionComponents != null) {
 107       docVersion = versionComponents[1]
 108     }
 109
 110     return {
 111       coreData: state.core.coreData,
 112       routing: state.routing, // required for <Link>s to update active state on navigation
 113       showSync: state.core.configured && !state.core.generator,
 114       lang: state.core.lang,
 115       mockhsm: true,
 116       docVersion,
 117       showNavAdvance: state.app.navAdvancedState === 'advance'
 118     }
 119   },
 120   (dispatch) => ({
 121     openTutorial: () => dispatch({type: 'OPEN_TUTORIAL'}),
 122     setLang: (event) => {
 123       dispatch({
 124         type: 'UPDATE_CORE_LANGUAGE',
 125         lang: event
 126       })
 127     }
 128   })
 129 )(Navigation)