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
   8 class Navigation extends React.Component {
   9   constructor(props) {
  10     super(props)
  11
  12     this.openTutorial = this.openTutorial.bind(this)
  13   }
  14
  15   openTutorial(event) {
  16     event.preventDefault()
  17     this.props.openTutorial()
  18   }
  19
  20   render() {
  21     return (
  22       <div className={styles.main}>
  23         <ul className={styles.navigation}>
  24           <li>
  25             <Link to='/transactions' activeClassName={styles.active}>
  26               {navIcon('transaction', styles)}
  27               Transactions
  28             </Link>
  29           </li>
  30           <li>
  31             <Link to='/accounts' activeClassName={styles.active}>
  32               {navIcon('account', styles)}
  33               Accounts
  34             </Link>
  35           </li>
  36           <li>
  37             <Link to='/assets' activeClassName={styles.active}>
  38               {navIcon('asset', styles)}
  39               Assets
  40             </Link>
  41           </li>
  42           <li>
  43             <Link to='/balances' activeClassName={styles.active}>
  44               {navIcon('balance', styles)}
  45               Balances
  46             </Link>
  47           </li>
  48           <li>
  49             <Link to='/unspents' activeClassName={styles.active}>
  50               {navIcon('unspent', styles)}
  51               Unspent outputs
  52             </Link>
  53           </li>
  54         </ul>
  55
  56         <ul className={styles.navigation}>
  57           <li className={styles.navigationTitle}>services</li>
  58           {this.props.mockhsm &&
  59           <li>
  60             <Link to='/keys' activeClassName={styles.active}>
  61               {navIcon('mockhsm', styles)}
  62               Keys
  63             </Link>
  64           </li>
  65           }
  66         </ul>
  67
  68         {<Sync />}
  69       </div>
  70     )
  71   }
  72 }
  73
  74 export default connect(
  75   state => {
  76     let docVersion = ''
  77
  78     const versionComponents = state.core.version.match('^([0-9]\\.[0-9])\\.')
  79     if (versionComponents != null) {
  80       docVersion = versionComponents[1]
  81     }
  82
  83     return {
  84       routing: state.routing, // required for <Link>s to update active state on navigation
  85       showSync: state.core.configured && !state.core.generator,
  86       mockhsm: true,
  87       docVersion
  88     }
  89   },
  90   (dispatch) => ({
  91     openTutorial: () => dispatch({ type: 'OPEN_TUTORIAL' })
  92   })
  93 )(Navigation)