feature(tabs): dynamic tabs working

app/routes/network/components/Network.js

@@ -18,13 +18,27 @@ class Network extends Component {
 
   render() {
     const {
-      fetchDescribeNetwork,
+      setCurrentTab,
 
-      network: { nodes, edges, networkLoading },
+      network: { nodes, edges, networkLoading, currentTab },
       peers: { peers },
       identity_pubkey
     } = this.props
 
+    const renderContent = () => {
+      switch(currentTab) {
+        case 1:
+          return <PeersList peers={peers} />
+          break
+        case 2:
+          return <h1>channels</h1>
+          break
+        case 3:
+          return <h1>transactions</h1>
+          break
+      }
+    }
+
     if (!nodes.length || !edges.length) { return <span></span> }
     if (networkLoading) return <LoadingBolt />
 
@@ -78,19 +92,28 @@ class Network extends Component {
         </section>
         <section className={styles.toolbox}>
           <ul className={styles.tabs}>
-            <li className={`${styles.tab} ${styles.peersTab}`}>
+            <li
+              className={`${styles.tab} ${styles.peersTab} ${currentTab === 1 && styles.active}`}
+              onClick={() => setCurrentTab(1)}
+            >
               Peers
             </li>
-            <li className={`${styles.tab} ${styles.channelsTab}`}>
+            <li
+              className={`${styles.tab} ${styles.channelsTab} ${currentTab === 2 && styles.active}`}
+              onClick={() => setCurrentTab(2)}
+            >
               Channels
             </li>
-            <li className={`${styles.tab} ${styles.transactionsTab}`}>
+            <li
+              className={`${styles.tab} ${styles.transactionsTab} ${currentTab === 3 && styles.active}`}
+              onClick={() => setCurrentTab(3)}
+            >
               Transactions
             </li>
           </ul>
 
           <div className={styles.content}>
-            <PeersList peers={peers} />
+            {renderContent()}
           </div>
         </section>
       </div>
@@ -98,6 +121,15 @@ class Network extends Component {
   }
 }
 
-Network.propTypes = {}
+Network.propTypes = {
+  fetchDescribeNetwork: PropTypes.func.isRequired,
+  fetchPeers: PropTypes.func.isRequired,
+  setCurrentTab: PropTypes.func.isRequired,
+
+  network: PropTypes.object.isRequired,
+  peers: PropTypes.object.isRequired,
+
+  identity_pubkey: PropTypes.string.isRequired
+}
 
 export default Network

app/routes/network/components/Network.scss

@@ -65,20 +65,16 @@
     border-bottom: 1px solid #464646;
     transition: all 0.5s;
 
-    &:nth-child(1) {
+    &.peersTab:hover, &.peersTab.active {
       border-bottom: 1px solid #588CF0;
     }
 
-    &.peersTab {
-      border-bottom: 1px solid #588CF0; 
-    }
-
-    &.channelsTab:hover {
+    &.channelsTab:hover, &.channelsTab.active {
       border-bottom: 1px solid #88D4A2; 
     }
 
-    &.transactionsTab:hover {
+    &.transactionsTab:hover, &.transitionsTab.active {
       border-bottom: 1px solid #FFDC53; 
     }
   }
-}
+}

app/routes/network/containers/NetworkContainer.js

@@ -1,13 +1,19 @@
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 
-import { fetchDescribeNetwork } from '../../../reducers/network'
+import {
+  fetchDescribeNetwork,
+
+  setCurrentTab
+} from '../../../reducers/network'
 import { fetchPeers } from '../../../reducers/peers'
 
 import Network from '../components/Network'
 
 const mapDispatchToProps = {
   fetchDescribeNetwork,
+  setCurrentTab,
+  
   fetchPeers
 }