feature(peers): detail peer modal

app/reducers/peers.js

@@ -1,13 +1,23 @@
+import { createSelector } from 'reselect'
 import { callApi } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
+export const SET_PEER = 'SET_PEER'
+
 export const GET_PEERS = 'GET_PEERS'
 export const RECEIVE_PEERS = 'RECEIVE_PEERS'
 
 // ------------------------------------
 // Actions
 // ------------------------------------
+export function setPeer(peer) {
+  return {
+    type: SET_PEER,
+    peer
+  }
+}
+
 export function getPeers() {
   return {
     type: GET_PEERS
@@ -31,16 +41,34 @@ export const fetchPeers = () => async (dispatch) => {
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
+  [SET_PEER]: (state, { peer }) => ({ ...state, peer }),
+
   [GET_PEERS]: (state) => ({ ...state, peersLoading: true }),
   [RECEIVE_PEERS]: (state, { peers }) => ({ ...state, peersLoading: false, peers })
 }
 
+const peersSelectors = {}
+const peerSelector = state => state.peers.peer
+
+peersSelectors.peerModalOpen = createSelector(
+  peerSelector,
+  peer => peer ? true : false
+)
+
+export { peersSelectors }
+
 // ------------------------------------
 // Reducer
 // ------------------------------------
 const initialState = {
   peersLoading: false,
-  peers: []
+  peers: [],
+  peer: null,
+  form: {
+    isOpen: false,
+    pub_key: '',
+    address: ''
+  }
 }
 
 export default function peersReducer(state = initialState, action) {

app/routes/wallet/components/Wallet.js

@@ -18,13 +18,15 @@ class Wallet extends Component {
   render() {
   	const {
   		info,
-  		peers: { peersLoading, peers },
+  		peers: { peersLoading, peers, peer },
   		channels: { channelsLoading, channels, channel, form },
-      channelModalOpen,
+      setPeer,
       setChannel,
+      peerModalOpen,
+      channelModalOpen,
       setForm
   	} = this.props
-
+    console.log('props: ', this.props)
     return (  
       <div className={styles.wallet}>
         <section className={styles.header}>
@@ -35,6 +37,9 @@ class Wallet extends Component {
           <Peers
             peersLoading={peersLoading}
             peers={peers}
+            modalPeer={peer}
+            setPeer={setPeer}
+            peerModalOpen={peerModalOpen}
           />
           <Channels
             channelsLoading={channelsLoading}

app/routes/wallet/components/components/Peers/Peers.js

@@ -1,14 +1,23 @@
 // @flow
 import React, { Component } from 'react'
 import { TiPlus } from 'react-icons/lib/ti'
+import PeerModal from './components/PeerModal'
 import Peer from './components/Peer'
 import styles from './Peers.scss'
 
 class Peers extends Component {
   render() {
-    const { peersLoading, peers } = this.props
+    const { 
+        peersLoading,
+        peers,
+        peer,
+        setPeer,
+        modalPeer,
+        peerModalOpen
+    } = this.props
     return (
         <div className={styles.peers}>
+            <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={modalPeer} />
             <div className={styles.header}>
                 <h3>Peers</h3>
                 <div
@@ -21,7 +30,7 @@ class Peers extends Component {
             <ul>
                 {
                     !peersLoading && peers.length ? 
-                        peers.map(peer => <Peer key={peer.peer_id} peer={peer} />)
+                        peers.map(peer => <Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
                     :
                         'Loading...'
                 }

app/routes/wallet/components/components/Peers/components/Peer/Peer.js

@@ -4,10 +4,9 @@ import styles from './Peer.scss'
 
 class Peer extends Component {
   render() {
-    const { peer } = this.props
-    console.log('peer: ', peer)
+    const { peer, setPeer } = this.props
     return (
-        <li className={styles.peer}>
+        <li className={styles.peer} onClick={() => setPeer(peer)}>
             <h4>{peer.address}</h4>
             <h1>{peer.pub_key}</h1>
         </li>

app/routes/wallet/components/components/Peers/components/PeerForm/PeerForm.js

@@ -0,0 +1,44 @@
+// @flow
+import React, { Component } from 'react'
+import ReactModal from 'react-modal'
+import styles from './PeerForm.scss'
+
+class PeerForm extends Component {
+  render() {
+  	const customStyles = {
+      overlay: {
+        cursor: 'pointer',
+        overflowY: 'auto'
+      },
+      content : {
+        top: 'auto',
+        left: '20%',
+        right: '0',
+        bottom: 'auto',
+        width: '40%',
+        margin: '50px auto',
+        padding: '40px'
+      }
+    }
+    
+    const { form, setForm } = this.props
+    return (
+      <div>
+        <ReactModal
+          isOpen={fosrm.isOpen}
+          contentLabel="No Overlay Click Modal"
+          ariaHideApp={true}
+          shouldCloseOnOverlayClick={true}
+          onRequestClose={() => setForm(false)}
+          parentSelector={() => document.body}
+          style={customStyles}
+        >
+          <h1>Peer form</h1>
+        </ReactModal>
+      </div>
+    )
+  }
+}
+
+
+export default PeerForm

app/routes/wallet/components/components/Peers/components/PeerForm/index.js

@@ -0,0 +1,3 @@
+import PeerForm from './PeerForm'
+
+export default PeerForm

app/routes/wallet/components/components/Peers/components/PeerModal/PeerModal.js

@@ -0,0 +1,69 @@
+// @flow
+import React, { Component } from 'react'
+import ReactModal from 'react-modal'
+import styles from './PeerModal.scss'
+
+class PeerModal extends Component {
+  render() {
+    const customStyles = {
+      overlay: {
+        cursor: 'pointer',
+        overflowY: 'auto'
+      },
+      content : {
+        top: 'auto',
+        left: '20%',
+        right: '0',
+        bottom: 'auto',
+        width: '40%',
+        margin: '50px auto',
+        padding: '40px'
+      }
+    }
+    
+    const { isOpen, resetPeer, peer } = this.props
+    console.log('peer: ', peer)
+    return (
+      <ReactModal
+        isOpen={isOpen}
+        contentLabel="No Overlay Click Modal"
+        ariaHideApp={true}
+        shouldCloseOnOverlayClick={true}
+        onRequestClose={() => resetPeer(null)}
+        parentSelector={() => document.body}
+        style={customStyles}
+      >
+        {
+          peer ?
+            <div className={styles.peer}>
+              <header className={styles.header}>
+                <h1 data-hint='Peer address' className='hint--top-left'>{peer.address}</h1>
+                <h2 data-hint='Peer public key' className='hint--top-left'>{peer.pub_key}</h2>
+              </header>
+
+              <div className={styles.details}>
+                <dl>
+                  <dt>Satoshis Received</dt>
+                  <dd>{peer.sat_recv}</dd>
+                  <dt>Satoshis Sent</dt>
+                  <dd>{peer.sat_sent}</dd>
+                  <dt>Bytes Received</dt>
+                  <dd>{peer.bytes_recv}</dd>
+                  <dt>Bytes Sent</dt>
+                  <dd>{peer.bytes_sent}</dd>
+                </dl>
+              </div>
+              <div className={styles.close}>
+                <div>Disconnect peer</div>
+              </div>
+            </div>
+          :
+            null
+        }
+      </ReactModal>
+    )
+  }
+}
+
+
+export default PeerModal

app/routes/wallet/components/components/Peers/components/PeerModal/PeerModal.scss

@@ -0,0 +1,73 @@
+@import '../../../../../../../variables.scss';
+
+.peer {
+	padding: 40px;
+}
+
+.header {
+	margin-bottom: 50px;
+
+	h1 {
+		color: $black;
+		text-align: center;
+		margin-bottom: 5px;
+		font-weight: bold;
+	}
+
+	h2 {
+		color: $darkestgrey;
+		font-size: 14px;
+		text-align: center;
+	}
+}
+
+.details {
+	width: 75%;
+	margin: 20px auto;
+
+	dt {
+		text-align: left;
+    float: left;
+    clear: left;
+    font-weight: 500;
+    padding: 20px 35px 19px 0;
+    color: $black;
+    font-weight: bold;
+	}
+
+	dd {
+		text-align: right;
+    font-weight: 400;
+    padding: 19px 0;
+    margin-left: 0;
+    border-top: 1px solid $darkgrey;
+	}
+}
+
+.close {
+	text-align: center;
+
+	div {
+		width: 35%;
+		margin: 0 auto;
+		cursor: pointer;
+		height: 55px;
+		min-height: 55px;
+		text-transform: none;
+		font-size: 18px;
+		transition: opacity .2s ease-out;
+		background: $red;
+    color: $white;
+    border: none;
+    font-weight: 500;
+    padding: 0;
+    text-align: center;
+    line-height: 55px;
+    transition: all 0.25s;
+    border-radius: 5px;
+
+    &:hover {
+    	background: darken($red, 10%);
+    }
+	}
+}

app/routes/wallet/components/components/Peers/components/PeerModal/index.js

@@ -0,0 +1,3 @@
+import PeerModal from './PeerModal'
+
+export default PeerModal

app/routes/wallet/containers/WalletContainer.js

@@ -1,6 +1,10 @@
 import { connect } from 'react-redux'
 import { fetchInfo } from '../../../reducers/info'
-import { fetchPeers } from '../../../reducers/peers'
+import {
+	fetchPeers,
+	setPeer,
+	peersSelectors
+} from '../../../reducers/peers'
 import {
 	fetchChannels,
 	setChannel,
@@ -13,6 +17,7 @@ const mapDispatchToProps = {
 	fetchInfo,
 	
 	fetchPeers,
+	setPeer,
 	
 	fetchChannels,
 	setChannel,
@@ -26,7 +31,8 @@ const mapStateToProps = (state) => ({
 	peers: state.peers,
 	channels: state.channels,
 
-	channelModalOpen: channelsSelectors.channelModalOpen(state)
+	peerModalOpen: peersSelectors.peerModalOpen(state),
+	channelModalOpen: channelsSelectors.channelModalOpen(state),
 })
 
-export default connect(mapStateToProps, mapDispatchToProps)(Wallet)
+export default connect(mapStateToProps, mapDispatchToProps)(Wallet)