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