feature(network): setup right side

app/components/Network/PeersList.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './PeersList.scss'
+
+const PeersList = ({ peers }) => (
+  <ul>
+    {
+      peers.map(peer =>
+        <li className={styles.peer} key={peer.peer_id}>
+          <h1>{peer.address}</h1>
+          <h4>{peer.pub_key}</h4>
+        </li>
+      )
+    }
+  </ul>
+)
+
+PeersList.propTypes = {
+  peers: PropTypes.array.isRequired
+}
+
+export default PeersList

app/components/Network/PeersList.scss

@@ -0,0 +1,18 @@
+@import '../../variables.scss';
+
+.peer {
+  margin: 20px 0;
+  cursor: pointer;
+
+  &:hover {
+    opacity: 0.5;
+  }
+
+  h1 {
+   margin-bottom: 5px; 
+  }
+
+  h4 {
+    font-size: 10px;
+  }
+}

app/reducers/network.js

@@ -14,6 +14,10 @@ export const SET_CURRENT_ROUTE = 'SET_CURRENT_ROUTE'
 
 export const SET_CURRENT_CHANNEL = 'SET_CURRENT_CHANNEL'
 
+export const SET_CURRENT_TAB = 'SET_CURRENT_TAB'
+
+export const SET_CURRENT_PEER = 'SET_CURRENT_PEER'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -44,6 +48,20 @@ export function setCurrentChannel(selectedChannel) {
   }
 }
 
+export function setCurrentTab(currentTab) {
+  return {
+    type: SET_CURRENT_TAB,
+    currentTab
+  }
+}
+
+export function setCurrentPeer(currentPeer) {
+  return {
+    type: SET_CURRENT_PEER,
+    currentPeer
+  }
+}
+
 // Send IPC event for describeNetwork
 export const fetchDescribeNetwork = () => (dispatch) => {
   dispatch(getDescribeNetwork())
@@ -83,7 +101,11 @@ const ACTION_HANDLERS = {
     }
   ),
 
-  [SET_CURRENT_CHANNEL]: (state, { selectedChannel }) => ({ ...state, selectedChannel })
+  [SET_CURRENT_CHANNEL]: (state, { selectedChannel }) => ({ ...state, selectedChannel }),
+  
+  [SET_CURRENT_TAB]: (state, { currentTab }) => ({ ...state, currentTab }),
+  
+  [SET_CURRENT_PEER]: (state, { currentPeer }) => ({ ...state, currentPeer })
 }
 
 // ------------------------------------
@@ -115,7 +137,11 @@ const initialState = {
     routes: [],
     currentRoute: {}
   },
-  selectedChannel: {}
+  selectedChannel: {},
+  
+  currentTab: 1,
+
+  currentPeer: {}
 }
 
 

app/routes/network/components/Network.js

@@ -2,20 +2,27 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
 import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'
-import LoadingBolt from '../../../components/LoadingBolt'
+import LoadingBolt from 'components/LoadingBolt'
+import PeersList from 'components/Network/PeersList'
 
 import styles from './Network.scss'
 
 class Network extends Component {
   componentWillMount() {
-    const { fetchDescribeNetwork } = this.props
+    const { fetchDescribeNetwork, fetchPeers, fetchChannels } = this.props
 
     fetchDescribeNetwork()
+    fetchPeers()
+    fetchChannels()
   }
 
   render() {
     const {
-      network: { nodes, edges, selectedNode, networkLoading },
+      setCurrentTab,
+
+      network: { nodes, edges, selectedNode, networkLoading, currentTab },
+      peers: { peers },
+      channels,
       identity_pubkey
     } = this.props
 
@@ -23,6 +30,20 @@ class Network extends Component {
 
     if (networkLoading) return <LoadingBolt />
 
+    const renderTab = () => {
+      switch(currentTab) {
+        case 1:
+          return <PeersList peers={peers} />
+          break
+        case 2:
+          return <h1>channels</h1>
+          break
+        case 3:
+          return <h1>transaction</h1>
+          break
+      }
+    }
+
     return (
       <div className={styles.container}>
         <section className={styles.network}>
@@ -30,7 +51,7 @@ class Network extends Component {
             simulationOptions={
               {
                 height: 1000,
-                width: 1000,
+                width: 800,
                 strength: { 
                   charge: -750
                 },
@@ -76,6 +97,29 @@ class Network extends Component {
             }
           </InteractiveForceGraph>
         </section>
+        <section className={styles.data}>
+          <header>
+            <h1>Toolbox</h1>
+          </header>
+
+          <ul className={styles.tabs}>
+            <li className={`${styles.tab} ${currentTab === 1 && styles.active}`} onClick={() => setCurrentTab(1)}>
+              <h2>Peers</h2>
+            </li>
+            <li className={`${styles.tab} ${currentTab === 2 && styles.active}`} onClick={() => setCurrentTab(2)}>
+              <h2>Channels</h2>
+            </li>
+            <li className={`${styles.tab} ${currentTab === 3 && styles.active}`} onClick={() => setCurrentTab(3)}>
+              <h2>Transaction</h2>
+            </li>
+          </ul>
+
+          <div className={styles.currentTab}>
+            {
+             renderTab() 
+            }
+          </div>
+        </section>
       </div>
     )
   }

app/routes/network/components/Network.scss

@@ -44,42 +44,51 @@
 }
 
 .data {
-  width: 30%;
-  background: $black;
+  width: calc(30% - 1px);
   color: #00FF00;
   word-wrap: break-word;
   overflow-y: scroll;
-
-  header, .routes {
-    padding: 10px;
-  }
+  border-left: 1px solid $darkgrey;
+  font-family: 'Courier New';
 
   header {
-    margin-top: 50px;
+    margin: 20px 0;
+    padding: 20px;
+    border-bottom: 1px solid $darkgrey;
 
-    h1 span {
-      display: block;
-      margin: 5px 0;
-
-      &:nth-child(2) {
-        font-size: 12px;
-      }
+    h1 {
+      font-weight: bold;
+      font-size: 30px;
     }
   }
 
-  .routes {
-    .route {
+
+  .tabs {
+    padding: 0 20px;
+    display: flex;
+    flex-direction: row;
+    
+    .tab {
+      padding: 10px;
       cursor: pointer;
-      margin: 20px 0;
+      transition: all 0.25s;
 
-      &.active {
+      &:hover {
         background: #00FF00;
-        color: black;
+        color: $black;
+        opacity: 0.5;
       }
 
-      &:hover {
-        opacity: 0.5;
+      &.active {
+        background: #00FF00;
+        color: $black;
       }
     }
+
+  }
+  
+  .currentTab {
+    margin-top: 20px;
+    padding: 20px;
   }
-}
+}

app/routes/network/containers/NetworkContainer.js

@@ -1,16 +1,23 @@
 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 { fetchChannels } from 'reducers/channels'
 
 import Network from '../components/Network'
 
 const mapDispatchToProps = {
-  fetchDescribeNetwork
+  setCurrentTab,
+  fetchDescribeNetwork,
+  fetchPeers,
+  fetchChannels
 }
 
 const mapStateToProps = state => ({
   network: state.network,
+  peers: state.peers,
+  channels: state.channels,
   identity_pubkey: state.info.data.identity_pubkey
 })