feature(selectedPeers): allow selected peers to be added or removed

app/components/GlobalError/GlobalError.scss

@@ -13,6 +13,10 @@
   &.closed {
     max-height: 0;
     padding: 0;
+
+    .content .close {
+      opacity: 0;
+    }
   }
 
   .content {

app/components/Network/NetworkGraph.js

@@ -22,6 +22,7 @@ class NetworkGraph extends Component {
     const { ready } = this.state
     const {
       network: { nodes, edges, selectedChannel, networkLoading },
+      selectedPeerPubkeys,
       identity_pubkey,
     } = this.props
 
@@ -53,16 +54,17 @@ class NetworkGraph extends Component {
           zoomOptions={{ minScale: 0.1, maxScale: 5, scale: 0.2 }}
           zoom
         >
-          <path d="M534.7054286266647, 460.3260926684966" fill="red" stroke="blue" />
           {
             nodes.map(node => {
               return (
                 <ForceGraphNode
-                  r={15}
+                  r={25}
                   label={node.pub_key}
                   key={node.pub_key}
                   node={{ id: node.pub_key }}
-                  fill={identity_pubkey === node.pub_key ? 'white' : 'black'}
+                  fill={selectedPeerPubkeys.includes(node.pub_key) ? '#5589F3' : '#353535'}
+                  strokeWidth={2.5}
+                  className={styles.node}
                 />
               )
             })

app/components/Network/NetworkGraph.scss

@@ -26,25 +26,30 @@
   }
 }
 
-.container {
-  width: 100%;
-  height: 100vh;
-  animation: fadein 0.5s;
-  animation-timing-function:linear;
-  animation-fill-mode:forwards;
-  animation-iteration-count: 1;
-
-  line.active {
-    opacity: 1;
-    stroke: green;
-    stroke-width: 5;
-    stroke-dasharray: 100;
-    animation: dash 2.5s infinite linear;
-  }
-
-  circle {
-    cursor: pointer;
-  }
+// .container {
+//   width: 100%;
+//   height: 100vh;
+//   animation: fadein 0.5s;
+//   animation-timing-function:linear;
+//   animation-fill-mode:forwards;
+//   animation-iteration-count: 1;
+
+//   line.active {
+//     opacity: 1;
+//     stroke: green;
+//     stroke-width: 5;
+//     stroke-dasharray: 100;
+//     animation: dash 2.5s infinite linear;
+//   }
+
+//   circle {
+//     cursor: pointer;
+//     stroke-width: 2 !important;
+//   }
+// }
+
+.node {
+  stroke-width: 2 !important;
 }
 
 .network {

app/components/Network/PeersList.js

@@ -2,12 +2,12 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styles from './PeersList.scss'
 
-const PeersList = ({ peers }) => (
+const PeersList = ({ peers, updateSelectedPeers, selectedPeerPubkeys }) => (
   <ul className={styles.peers}>
     {
       peers.map(peer =>
-        <li key={peer.peer_id} className={styles.peer}>
-          <span className={styles.dot} />
+        <li key={peer.peer_id} className={styles.peer} onClick={() => updateSelectedPeers(peer)}>
+          <span className={`${styles.dot} ${selectedPeerPubkeys.includes(peer.pub_key) && styles.active}`} />
           <h1>{peer.address}</h1>
           <h4>{peer.pub_key}</h4>
         </li>

app/reducers/network.js

@@ -20,6 +20,8 @@ export const SET_CURRENT_PEER = 'SET_CURRENT_PEER'
 
 export const UPDATE_PAY_REQ = 'UPDATE_PAY_REQ'
 
+export const UPDATE_SELECTED_PEERS = 'UPDATE_SELECTED_PEERS'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
@@ -71,6 +73,13 @@ export function updatePayReq(pay_req) {
   }
 }
 
+export function updateSelectedPeers(peer) {
+  return {
+    type: UPDATE_SELECTED_PEERS,
+    peer
+  }
+}
+
 // Send IPC event for describeNetwork
 export const fetchDescribeNetwork = () => (dispatch) => {
   dispatch(getDescribeNetwork())
@@ -116,7 +125,23 @@ const ACTION_HANDLERS = {
   
   [SET_CURRENT_PEER]: (state, { currentPeer }) => ({ ...state, currentPeer }),
 
-  [UPDATE_PAY_REQ]: (state, { pay_req }) => ({ ...state, pay_req })
+  [UPDATE_PAY_REQ]: (state, { pay_req }) => ({ ...state, pay_req }),
+  
+  [UPDATE_SELECTED_PEERS]: (state, { peer }) => {
+    let selectedPeers
+    
+    if (state.selectedPeers.includes(peer)) {
+      selectedPeers = state.selectedPeers.filter(selectedPeer => selectedPeer.pub_key !== peer.pub_key)
+    }
+
+    if (!state.selectedPeers.includes(peer)) {
+      selectedPeers = [...state.selectedPeers, peer]
+    }
+
+    return {
+      ...state, selectedPeers
+    }
+  }
 }
 
 // ------------------------------------
@@ -124,6 +149,7 @@ const ACTION_HANDLERS = {
 // ------------------------------------
 const networkSelectors = {}
 const currentRouteSelector = state => state.network.selectedNode.currentRoute
+const selectedPeers = state => state.network.selectedPeers
 
 networkSelectors.currentRouteHopChanIds = createSelector(
   currentRouteSelector,
@@ -134,6 +160,11 @@ networkSelectors.currentRouteHopChanIds = createSelector(
   }
 )
 
+networkSelectors.selectedPeerPubkeys = createSelector(
+  selectedPeers,
+  peers => peers.map(peer => peer.pub_key)
+)
+
 export { networkSelectors }
 
 // ------------------------------------
@@ -154,7 +185,9 @@ const initialState = {
 
   currentPeer: {},
 
-  pay_req: ''
+  pay_req: '',
+
+  selectedPeers: []
 }
 
 

app/routes/network/components/Network.js

@@ -19,8 +19,11 @@ class Network extends Component {
   render() {
     const {
       setCurrentTab,
+      updateSelectedPeers,
 
       network,
+      selectedPeerPubkeys,
+
       peers: { peers },
       identity_pubkey
     } = this.props
@@ -28,7 +31,7 @@ class Network extends Component {
     const renderContent = () => {
       switch(network.currentTab) {
         case 1:
-          return <PeersList peers={peers} />
+          return <PeersList peers={peers} updateSelectedPeers={updateSelectedPeers} selectedPeerPubkeys={selectedPeerPubkeys} />
           break
         case 2:
           return <h1>channels</h1>
@@ -41,7 +44,12 @@ class Network extends Component {
 
     return (
       <div className={styles.container}>
-        <NetworkGraph className={styles.network} network={network} identity_pubkey={identity_pubkey} />
+        <NetworkGraph
+          className={styles.network}
+          network={network}
+          identity_pubkey={identity_pubkey}
+          selectedPeerPubkeys={selectedPeerPubkeys}
+        />
 
         <section className={styles.toolbox}>
           <ul className={styles.tabs}>

app/routes/network/containers/NetworkContainer.js

@@ -4,7 +4,10 @@ import { connect } from 'react-redux'
 import {
   fetchDescribeNetwork,
 
-  setCurrentTab
+  setCurrentTab,
+  updateSelectedPeers,
+
+  networkSelectors
 } from '../../../reducers/network'
 import { fetchPeers } from '../../../reducers/peers'
 
@@ -13,6 +16,7 @@ import Network from '../components/Network'
 const mapDispatchToProps = {
   fetchDescribeNetwork,
   setCurrentTab,
+  updateSelectedPeers,
   
   fetchPeers
 }
@@ -20,7 +24,9 @@ const mapDispatchToProps = {
 const mapStateToProps = state => ({
   network: state.network,
   peers: state.peers,
-  identity_pubkey: state.info.data.identity_pubkey
+  identity_pubkey: state.info.data.identity_pubkey,
+
+  selectedPeerPubkeys: networkSelectors.selectedPeerPubkeys(state)
 })
 
 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Network))