From 88e4f4313cb95afb34541f5d6c4a29536bd41547 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Mon, 4 Dec 2017 17:30:23 -0600 Subject: [PATCH] feature(selectedPeers): allow selected peers to be added or removed --- app/components/GlobalError/GlobalError.scss | 4 ++ app/components/Network/NetworkGraph.js | 8 ++-- app/components/Network/NetworkGraph.scss | 43 +++++++++++-------- app/components/Network/PeersList.js | 6 +-- app/reducers/network.js | 37 +++++++++++++++- app/routes/network/components/Network.js | 12 +++++- .../network/containers/NetworkContainer.js | 10 ++++- 7 files changed, 89 insertions(+), 31 deletions(-) diff --git a/app/components/GlobalError/GlobalError.scss b/app/components/GlobalError/GlobalError.scss index 5486c7fc..d9fe4b72 100644 --- a/app/components/GlobalError/GlobalError.scss +++ b/app/components/GlobalError/GlobalError.scss @@ -13,6 +13,10 @@ &.closed { max-height: 0; padding: 0; + + .content .close { + opacity: 0; + } } .content { diff --git a/app/components/Network/NetworkGraph.js b/app/components/Network/NetworkGraph.js index 6b99b9d9..fe5621e5 100644 --- a/app/components/Network/NetworkGraph.js +++ b/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 > - { nodes.map(node => { return ( ) }) diff --git a/app/components/Network/NetworkGraph.scss b/app/components/Network/NetworkGraph.scss index 8613aa44..09db9dc0 100644 --- a/app/components/Network/NetworkGraph.scss +++ b/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 { diff --git a/app/components/Network/PeersList.js b/app/components/Network/PeersList.js index d74bf804..230a3aa7 100644 --- a/app/components/Network/PeersList.js +++ b/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 }) => (
    { peers.map(peer => -
  • - +
  • updateSelectedPeers(peer)}> +

    {peer.address}

    {peer.pub_key}

    • diff --git a/app/reducers/network.js b/app/reducers/network.js index 28dfedaf..6de33a35 100644 --- a/app/reducers/network.js +++ b/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: [] } diff --git a/app/routes/network/components/Network.js b/app/routes/network/components/Network.js index 85f8384f..23d31b21 100644 --- a/app/routes/network/components/Network.js +++ b/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 + return break case 2: return

    channels

    @@ -41,7 +44,12 @@ class Network extends Component { return (
    - +
      diff --git a/app/routes/network/containers/NetworkContainer.js b/app/routes/network/containers/NetworkContainer.js index 7f846879..ae46b06d 100644 --- a/app/routes/network/containers/NetworkContainer.js +++ b/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))