feature(peer form): wire up peer form

app/reducers/address.js

@@ -24,13 +24,11 @@ export function getAddress() {
 // Send IPC event for getinfo
 export const newAddress = type => async (dispatch) => {
   dispatch(getAddress())
-  console.log('getting new address type: ', addressTypes[type])
   ipcRenderer.send('lnd', { msg: 'newaddress', data: { type: addressTypes[type] } })
 }
 
 // Receive IPC event for info
 export const receiveAddress = (event, address) => dispatch => {
-  console.log('address: ', address)
   dispatch({ type: RECEIVE_ADDRESS, address })
 }
 

app/routes/peers/components/Peers.js

@@ -1,11 +1,51 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+
+import { MdSearch } from 'react-icons/lib/md'
+
+import PeerForm from 'components/Peers/PeerForm'
+
 import styles from './Peers.scss'
 
 class Peers extends Component {
   render() {
+    const { 
+      peerFormProps,
+      setPeerForm,
+      peers: { peers }
+    } = this.props
+    console.log('props: ', this.props)
+
     return (
-      <h1>peers</h1>
+      <div>
+        <div className={styles.search}>
+          <PeerForm {...peerFormProps} />
+
+          <label className={`${styles.label} ${styles.input}`} htmlFor='channelSearch'>
+            <MdSearch />
+          </label>
+          <input
+            value={''}
+            onChange={event => console.log('event: ', event)}
+            className={`${styles.text} ${styles.input}`}
+            placeholder='Search peers by their node public key'
+            type='text'
+            id='peersSearch'
+          />
+        </div>
+
+        <header className={styles.header}>
+          <div className={styles.addPeerContainer}>
+            <div className={`buttonPrimary ${styles.newPeerButton}`} onClick={() => setPeerForm({ isOpen: true })}>
+              Add new peer
+            </div>
+          </div>
+        </header>
+
+        <div className={styles.peers}>
+
+        </div>
+      </div>
     )
   }
 }

app/routes/peers/components/Peers.scss

@@ -0,0 +1,42 @@
+@import '../../../variables.scss';
+
+.search {
+  height: 75px;
+  padding: 2px 25px;
+  border-bottom: 1px solid $darkgrey;
+  background: $white;
+
+  .input {
+    display: inline-block;
+    vertical-align: top;
+    height: 100%;
+  }
+
+  .label {
+    width: 5%;
+    line-height: 70px;
+    font-size: 25px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .text {
+    width: 95%;
+    outline: 0;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    height: 68px;
+    font-size: 18px;
+  }
+}
+
+.header {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+
+  .addPeerContainer {
+    padding: 40px;
+  }
+}

app/routes/peers/containers/PeersContainer.js

@@ -1,14 +1,45 @@
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
 
+import { 
+  fetchPeers,
+  setPeer,
+  peersSelectors,
+  setPeerForm,
+  connectRequest,
+  disconnectRequest
+} from 'reducers/peers'
+
 import Peers from '../components/Peers'
 
 const mapDispatchToProps = {
-
+  fetchPeers,
+  setPeer,
+  peersSelectors,
+  setPeerForm,
+  connectRequest,
+  disconnectRequest
 }
 
 const mapStateToProps = state => ({
   peers: state.peers
 })
 
-export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Peers))
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const peerFormProps = {
+    setForm: dispatchProps.setPeerForm,
+    connect: dispatchProps.connectRequest,
+
+    form: stateProps.peers.peerForm
+  }
+
+  return {
+    ...stateProps,
+    ...dispatchProps,
+    ...ownProps,
+
+    peerFormProps
+  }
+}
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps, mergeProps)(Peers))