From e3d2fdd9853d6d6f33822108343ea8e8a30042b8 Mon Sep 17 00:00:00 2001
From: Jack Mallers <jimmymowschess@gmail.com>
Date: Wed, 29 Nov 2017 15:48:27 -0600
Subject: [PATCH] feature(peers search + modal): enable search/modal on new
 route

---
 app/reducers/peers.js                         | 22 +++++++++++++++++-
 app/routes/peers/components/Peers.js          | 23 +++++++++++--------
 app/routes/peers/components/Peers.scss        |  4 ++++
 app/routes/peers/containers/PeersContainer.js | 14 +++++++----
 4 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/app/reducers/peers.js b/app/reducers/peers.js
index 897e0767..78084db4 100644
--- a/app/reducers/peers.js
+++ b/app/reducers/peers.js
@@ -16,6 +16,8 @@ export const SET_PEER_FORM = 'SET_PEER_FORM'
 
 export const SET_PEER = 'SET_PEER'
 
+export const UPDATE_SEARCH_QUERY = 'UPDATE_SEARCH_QUERY'
+
 export const GET_PEERS = 'GET_PEERS'
 export const RECEIVE_PEERS = 'RECEIVE_PEERS'
 
@@ -60,6 +62,13 @@ export function getPeers() {
   }
 }
 
+export function updateSearchQuery(searchQuery) {
+  return {
+    type: UPDATE_SEARCH_QUERY,
+    searchQuery
+  }
+}
+
 // Send IPC event for peers
 export const fetchPeers = () => async (dispatch) => {
   dispatch(getPeers())
@@ -114,17 +123,27 @@ const ACTION_HANDLERS = {
   [SET_PEER]: (state, { peer }) => ({ ...state, peer }),
 
   [GET_PEERS]: state => ({ ...state, peersLoading: true }),
-  [RECEIVE_PEERS]: (state, { peers }) => ({ ...state, peersLoading: false, peers })
+  [RECEIVE_PEERS]: (state, { peers }) => ({ ...state, peersLoading: false, peers }),
+  
+  [UPDATE_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery })
 }
 
 const peersSelectors = {}
 const peerSelector = state => state.peers.peer
+const peersSelector = state => state.peers.peers
+const peersSearchQuerySelector = state => state.peers.searchQuery
 
 peersSelectors.peerModalOpen = createSelector(
   peerSelector,
   peer => (!!peer)
 )
 
+peersSelectors.filteredPeers = createSelector(
+  peersSelector,
+  peersSearchQuerySelector,
+  (peers, query) => peers.filter(peer => peer.pub_key.includes(query) || peer.address.includes(query))
+)
+
 export { peersSelectors }
 
 // ------------------------------------
@@ -139,6 +158,7 @@ const initialState = {
     pubkey: '',
     host: ''
   },
+  searchQuery: '',
   connecting: false,
   disconnecting: false
 }
diff --git a/app/routes/peers/components/Peers.js b/app/routes/peers/components/Peers.js
index e99c553a..c43e1989 100644
--- a/app/routes/peers/components/Peers.js
+++ b/app/routes/peers/components/Peers.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import { MdSearch } from 'react-icons/lib/md'
 
 import PeerForm from 'components/Peers/PeerForm'
+import PeerModal from 'components/Peers/PeerModal'
 import Peer from 'components/Peers/Peer'
 
 import styles from './Peers.scss'
@@ -18,24 +19,29 @@ class Peers extends Component {
       peerFormProps,
       setPeerForm,
       setPeer,
-      peers: { peers }
-    } = this.props
+      updateSearchQuery,
+      disconnectRequest,
 
-    console.log('props: ', this.props)
+      peerModalOpen,
+      filteredPeers,
+      peers: { peer, searchQuery }
+    } = this.props
 
     return (
       <div>
         <div className={styles.search}>
           <PeerForm {...peerFormProps} />
 
+          <PeerModal isOpen={peerModalOpen} resetPeer={setPeer} peer={peer} disconnect={disconnectRequest} />
+
           <label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'>
             <MdSearch />
           </label>
           <input
-            value={''}
-            onChange={event => console.log('event: ', event)}
+            value={searchQuery}
+            onChange={event => updateSearchQuery(event.target.value)}
             className={`${styles.text} ${styles.input}`}
-            placeholder='Search peers by their node public key'
+            placeholder='Search peers by their node public key or IP address'
             type='text'
             id='peersSearch'
           />
@@ -51,10 +57,7 @@ class Peers extends Component {
 
         <div className={styles.peers}>
           {
-            peers.map(peer => {
-              console.log('peer: ', peer)
-              return (<Peer key={peer.peer_id} peer={peer} setPeer={setPeer} />)
-            })
+            filteredPeers.map(filteredPeer => <Peer key={filteredPeer.peer_id} peer={filteredPeer} setPeer={setPeer} />)
           }
         </div>
       </div>
diff --git a/app/routes/peers/components/Peers.scss b/app/routes/peers/components/Peers.scss
index efca69cc..e59fadc7 100644
--- a/app/routes/peers/components/Peers.scss
+++ b/app/routes/peers/components/Peers.scss
@@ -38,6 +38,10 @@
 
   .addPeerContainer {
     padding: 40px;
+
+    .newPeerButton {
+      font-size: 14px;
+    }
   }
 }
 
diff --git a/app/routes/peers/containers/PeersContainer.js b/app/routes/peers/containers/PeersContainer.js
index 159c5562..585935bd 100644
--- a/app/routes/peers/containers/PeersContainer.js
+++ b/app/routes/peers/containers/PeersContainer.js
@@ -4,10 +4,12 @@ import { connect } from 'react-redux'
 import { 
   fetchPeers,
   setPeer,
-  peersSelectors,
   setPeerForm,
   connectRequest,
-  disconnectRequest
+  disconnectRequest,
+  updateSearchQuery,
+
+  peersSelectors
 } from 'reducers/peers'
 
 import Peers from '../components/Peers'
@@ -18,11 +20,15 @@ const mapDispatchToProps = {
   peersSelectors,
   setPeerForm,
   connectRequest,
-  disconnectRequest
+  disconnectRequest,
+  updateSearchQuery
 }
 
 const mapStateToProps = state => ({
-  peers: state.peers
+  peers: state.peers,
+
+  peerModalOpen: peersSelectors.peerModalOpen(state),
+  filteredPeers: peersSelectors.filteredPeers(state)
 })
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {