feature(channels): hook up form to reducer

app/reducers/channels.js

@@ -10,13 +10,16 @@ export const SET_CHANNEL = 'SET_CHANNEL'
 export const GET_CHANNELS = 'GET_CHANNELS'
 export const RECEIVE_CHANNELS = 'RECEIVE_CHANNELS'
 
+export const GET_PENDING_CHANNELS = 'GET_PENDING_CHANNELS'
+export const RECEIVE_PENDING_CHANNELS = 'RECEIVE_PENDING_CHANNELS'
+
 // ------------------------------------
 // Actions
 // ------------------------------------
-export function setChannelForm(isOpen) {
+export function setChannelForm(form) {
   return {
     type: SET_CHANNEL_FORM,
-    isOpen
+    form
   }
 }
 
@@ -41,22 +44,44 @@ export function receiveChannels({ channels }) {
   }
 }
 
+export function getPendingChannels() {
+  return {
+    type: GET_PENDING_CHANNELS
+  }
+}
+
+export function receivePendingChannels({ pendingChannels }) {
+  return {
+    type: RECEIVE_PENDING_CHANNELS,
+    pendingChannels
+  }
+}
+
 export const fetchChannels = () => async (dispatch) => {
   dispatch(getChannels())
   const channels = await callApi('channels')
   dispatch(receiveChannels(channels.data))
 }
 
+export const fetchPendingChannels = () => async (dispatch) => {
+  dispatch(getPendingChannels())
+  const channels = await callApi('pending_channels')
+  dispatch(receivePendingChannels(channels.data))
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
 const ACTION_HANDLERS = {
-  [SET_CHANNEL_FORM]: (state, { isOpen }) => ({ ...state, channelForm: { ...state.form, isOpen } }),
+  [SET_CHANNEL_FORM]: (state, { form }) => ({ ...state, channelForm: Object.assign({}, state.channelForm, form) }),
 
   [SET_CHANNEL]: (state, { channel }) => ({ ...state, channel }),
 
   [GET_CHANNELS]: (state) => ({ ...state, channelsLoading: true }),
-  [RECEIVE_CHANNELS]: (state, { channels }) => ({ ...state, channelsLoading: false, channels })
+  [RECEIVE_CHANNELS]: (state, { channels }) => ({ ...state, channelsLoading: false, channels }),
+
+  [GET_PENDING_CHANNELS]: (state) => ({ ...state, channelsLoading: true }),
+  [RECEIVE_PENDING_CHANNELS]: (state, { pendingChannels }) => ({ ...state, channelsLoading: false, pendingChannels })
 }
 
 const channelsSelectors = {}
@@ -75,6 +100,7 @@ export { channelsSelectors }
 const initialState = {
   channelsLoading: false,
   channels: [],
+  pendingChannels: [],
   channel: null,
   channelForm: {
     isOpen: false,

app/routes/wallet/components/Wallet.js

@@ -51,6 +51,7 @@ class Wallet extends Component {
           />
           <Channels
             ticker={ticker}
+            peers={peers}
             channelsLoading={channelsLoading}
             channels={channels}
             modalChannel={channel}

app/routes/wallet/components/components/Channels/Channels.js

@@ -10,6 +10,7 @@ class Channels extends Component {
   render() {
     const {
         ticker,
+        peers,
         channelsLoading,
         channels,
         modalChannel,
@@ -22,13 +23,13 @@ class Channels extends Component {
     return (
         <div className={styles.channels}>
             <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} />
-            <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} />
+            <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} />
             <div className={styles.header}>
                 <h3>Channels</h3>
                 <div
                     className={`${styles.openChannel} hint--top`}
                     data-hint='Open a channel'
-                    onClick={() => setChannelForm(true)}
+                    onClick={() => setChannelForm({ isOpen: true })}
                 >
                     <TiPlus />  
                 </div>

app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.js

@@ -22,8 +22,8 @@ class ChannelForm extends Component {
       }
     }
     
-    const { form, setForm, ticker } = this.props
-    console.log('ticker: ', ticker)
+    const { form, setForm, ticker, peers } = this.props
+
     return (
       <div>
         <ReactModal
@@ -31,7 +31,7 @@ class ChannelForm extends Component {
           contentLabel="No Overlay Click Modal"
           ariaHideApp={true}
           shouldCloseOnOverlayClick={true}
-          onRequestClose={() => setForm(false)}
+          onRequestClose={() => setForm({ isOpen: false })}
           parentSelector={() => document.body}
           style={customStyles}
         >
@@ -44,6 +44,8 @@ class ChannelForm extends Component {
                 type='text'
                 size=''
                 placeholder='Peer public key'
+                value={form.node_key}
+                onChange={(event) => setForm({ node_key: event.target.value })}
               />
             </section>
             <section className={styles.local}>
@@ -59,6 +61,8 @@ class ChannelForm extends Component {
                 type='text'
                 size=''
                 placeholder='Local amount'
+                value={form.local_amt}
+                onChange={(event) => setForm({ local_amt: event.target.value })}
               />
             </section>
             <section className={styles.push}>
@@ -74,9 +78,26 @@ class ChannelForm extends Component {
                 type='text'
                 size=''
                 placeholder='Push amount'
+                value={form.push_amt}
+                onChange={(event) => setForm({ push_amt: event.target.value })}
               />
             </section>
 
+            <ul className={styles.peers}>
+              <h2>Connected Peers</h2>
+              {
+                peers.length ?
+                  peers.map(peer =>
+                    <li key={peer.peer_id} className={styles.peer} onClick={() => setForm({ node_key: peer.pub_key })}>
+                        <h4>{peer.address}</h4>
+                        <h1>{peer.pub_key}</h1>
+                    </li>
+                  )
+                :
+                  null
+              }
+            </ul>
+
             <div className={styles.buttonGroup}>
               <div className={styles.button}>
                 Submit

app/routes/wallet/components/components/Channels/components/ChannelForm/ChannelForm.scss

@@ -39,6 +39,51 @@
 	}
 }
 
+.peers {
+	margin-bottom: 50px;
+
+	h2 {
+		text-transform: uppercase;
+		font-weight: 200;
+		padding: 10px 0;
+		border-bottom: 1px solid $grey;
+		color: $darkestgrey;
+	}
+}
+
+.peer {
+	position: relative;
+	background: $white;
+	padding: 10px;
+	border-top: 1px solid $grey;
+	cursor: pointer;
+	transition: all 0.25s;
+
+	&:hover {
+		opacity: 0.5;
+	}
+
+	&:first-child {
+		border: none;
+	}
+
+	h4, h1 {
+		margin: 10px 0;
+	}
+
+	h4 {
+		font-size: 12px;
+		font-weight: bold;
+		color: $black;
+	}
+
+	h1 {
+		font-size: 14px;
+		font-weight: 200;
+		color: $main;
+	}
+}
+
 .buttonGroup {
 	width: 100%;
 	display: flex;
@@ -66,4 +111,4 @@
     	border-right: 1px solid lighten($main, 20%);
     }
   }
-}
+}