Setup React toolbox tabs - Closes #505

src/components/app/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Route, Link } from 'react-router-dom';
+import { Route } from 'react-router-dom';
 import PrivateRoutes from '../privateRoute';
 import Account from '../account';
 import Header from '../header';
@@ -10,6 +10,7 @@ import Forging from '../forging';
 import styles from './app.css';
 import Metronome from '../../utils/metronome';
 import Dialog from '../dialog';
+import Tabs from '../tabs';
   // temporary, will be deleted with #347
 
 // start dispatching sync ticks
@@ -23,12 +24,7 @@ const App = () => (
       <PrivateRoutes path='/main' render={ ({ match }) => (
         <main>
           <Account />
-          <section className='main-tabs'>
-            <Link to={`${match.url}/transactions`}>Transactions</Link>
-            <Link to={`${match.url}/voting`}>Voting</Link>
-            <Link to={`${match.url}/forging`}>Forging</Link>
-          </section>
-
+          <Tabs />
           <Route path={`${match.url}/transactions`} component={Transactions} />
           <Route path={`${match.url}/voting`} component={Voting} />
           <Route path={`${match.url}/forging`} component={Forging} />

src/components/tabs/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
+import Tabs from './tabs';
+
+const mapStateToProps = state => ({
+  isDelegate: state.account.isDelegate,
+});
+
+export default withRouter(connect(mapStateToProps)(Tabs));
+

src/components/tabs/index.test.js

@@ -0,0 +1,16 @@
+/*
+import React from 'react';
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import { Provider } from 'react-redux';
+import store from '../../store';
+import TabsContainer from './index';
+import Tabs from './tabs';
+
+describe('TabsContainer', () => {
+  it('should render Tabs component', () => {
+    const wrapper = mount(<Provider store={store}><TabsContainer /></Provider>);
+    expect(wrapper.find(Tabs).exists()).to.equal(true);
+  });
+});
+*/

src/components/tabs/tabs.css

@@ -0,0 +1,21 @@
+.tab {
+  background: #f4f4f4;
+  box-shadow: inset 0px -1px 1px -1px rgba(0, 0, 0, 0.12);
+  padding-right: 24px;
+  padding-left: 24px;
+}
+
+.tabs nav {
+  overflow: hidden;
+}
+
+:global .theme__pointer___1xgdB {
+  height: 4px;
+  margin-top: -48px;
+}
+
+:global .theme__label___1yb8L.theme__active___2LZ7Z {
+  background: white;
+  color: #0288D1;
+  margin-bottom: -1px;
+}

src/components/tabs/tabs.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tab, Tabs as ToolboxTabs } from 'react-toolbox';
+import styles from './tabs.css';
+
+const tabs = [
+  'Transactions',
+  'Voting',
+  'Forging',
+];
+
+const getTabs = isDelegate => (tabs.filter(t => t !== 'Forging' || isDelegate));
+
+const getIndex = history => (
+  tabs.map(t => t.toLowerCase())
+    .indexOf(history.location.pathname.replace('/main/', '')));
+
+const Tabs = props => (
+  <ToolboxTabs index={getIndex(props.history)}
+    onChange={index => props.history.push(`${tabs[index].toLowerCase()}`)}
+    className={`${styles.tabs} main-tabs`}>
+    {getTabs(props.isDelegate).map((tab, index) =>
+      <Tab key={index} label={tab} className={styles.tab} />)}
+  </ToolboxTabs>
+);
+
+export default Tabs;

src/components/tabs/tabs.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import chai, { expect } from 'chai';
+import { mount } from 'enzyme';
+import { Tab, Tabs as ToolboxTabs } from 'react-toolbox';
+import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
+import Tabs from './tabs';
+
+chai.use(sinonChai);
+
+describe('Tabs', () => {
+  const history = {
+    location: {
+      pathname: '/main/voting',
+    },
+    push: sinon.spy(),
+  };
+
+  it('should render react toolbox Tabs component', () => {
+    const wrapper = mount(<Tabs history={history} />);
+    expect(wrapper.find(ToolboxTabs).exists()).to.equal(true);
+  });
+
+  it('should render 3 Tab components if props.isDelegate', () => {
+    const wrapper = mount(<Tabs isDelegate={true} history={history} />);
+    expect(wrapper.find(Tab)).to.have.lengthOf(3);
+  });
+
+  it('should render 2 Tab components if !props.isDelegate', () => {
+    const wrapper = mount(<Tabs isDelegate={false} history={history} />);
+    expect(wrapper.find(Tab)).to.have.lengthOf(2);
+  });
+
+  it('should allow to change active tab', () => {
+    const wrapper = mount(<Tabs isDelegate={false} history={history} />);
+    wrapper.find(Tab).at(0).simulate('click');
+    expect(history.push).to.have.been.calledWith('transactions');
+  });
+});