From 45c0d87c0139198e728b8359779027a24c2042e3 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Mon, 4 Dec 2017 16:11:07 -0600
Subject: [PATCH] feature(tabs): dynamic tabs working

---
 app/routes/network/components/Network.js      | 46 ++++++++++++++++---
 app/routes/network/components/Network.scss    | 12 ++---
 .../network/containers/NetworkContainer.js    |  8 +++-
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/app/routes/network/components/Network.js b/app/routes/network/components/Network.js
index 1ebbbbd7..712f8953 100644
--- a/app/routes/network/components/Network.js
+++ b/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
diff --git a/app/routes/network/components/Network.scss b/app/routes/network/components/Network.scss
index d349c381..0bcefb0e 100644
--- a/app/routes/network/components/Network.scss
+++ b/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; 
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/routes/network/containers/NetworkContainer.js b/app/routes/network/containers/NetworkContainer.js
index 481681d7..7f846879 100644
--- a/app/routes/network/containers/NetworkContainer.js
+++ b/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
 }