feature(channels): combine all channels with selector and display different types (active, pending open, pending closed)

app/api/index.js

@@ -41,4 +41,4 @@ export function requestTicker() {
   })
   .then(response => response.data)
   .catch(error => error)
-}
+}

app/reducers/channels.js

@@ -1,5 +1,5 @@
 import { createSelector } from 'reselect'
-import { callApi } from '../api'
+import { callApi, callApis } from '../api'
 // ------------------------------------
 // Constants
 // ------------------------------------
@@ -10,8 +10,9 @@ 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'
+export const OPENING_CHANNEL = 'OPENING_CHANNEL'
+export const OPENING_SUCCESSFUL = 'OPENING_SUCCESSFUL'
+export const OPENING_FAILURE = 'OPENING_FAILURE'
 
 // ------------------------------------
 // Actions
@@ -37,10 +38,11 @@ export function getChannels() {
   }
 }
 
-export function receiveChannels({ channels }) {
+export function receiveChannels(channels) {
   return {
     type: RECEIVE_CHANNELS,
-    channels
+    channels: channels[0].data.channels,
+    pendingChannels: channels[1].data
   }
 }
 
@@ -57,16 +59,25 @@ export function receivePendingChannels({ pendingChannels }) {
   }
 }
 
+export function openingChannel() {
+  return {
+    type: OPENING_CHANNEL
+  }
+}
+
 export const fetchChannels = () => async (dispatch) => {
   dispatch(getChannels())
-  const channels = await callApi('channels')
-  dispatch(receiveChannels(channels.data))
+  const channels = await callApis(['channels', 'pending_channels'])
+  dispatch(receiveChannels(channels))
 }
 
-export const fetchPendingChannels = () => async (dispatch) => {
-  dispatch(getPendingChannels())
-  const channels = await callApi('pending_channels')
-  dispatch(receivePendingChannels(channels.data))
+export const openChannel = () => async (dispatch) => {
+  const payload = {}
+  console.log('payload: ', payload)
+  return
+  dispatch(openingChannel())
+  // const channel = await callApi('addchannel', 'post', payload)
+  // dispatch(openingSuccessful(channel))
 }
 
 // ------------------------------------
@@ -78,20 +89,31 @@ const ACTION_HANDLERS = {
   [SET_CHANNEL]: (state, { channel }) => ({ ...state, channel }),
 
   [GET_CHANNELS]: (state) => ({ ...state, channelsLoading: true }),
-  [RECEIVE_CHANNELS]: (state, { channels }) => ({ ...state, channelsLoading: false, channels }),
+  [RECEIVE_CHANNELS]: (state, { channels, pendingChannels }) => ({ ...state, channelsLoading: false, channels, pendingChannels }),
 
-  [GET_PENDING_CHANNELS]: (state) => ({ ...state, channelsLoading: true }),
-  [RECEIVE_PENDING_CHANNELS]: (state, { pendingChannels }) => ({ ...state, channelsLoading: false, pendingChannels })
+  [OPENING_CHANNEL]: (state) => ({ ...state, openingChannel: true }),
 }
 
 const channelsSelectors = {}
 const channelSelector = state => state.channels.channel
+const channelsSelector = state => state.channels.channels
+const pendingOpenChannelsSelector = state => state.channels.pendingChannels.pending_open_channels
+const pendingClosedChannelsSelector = state => state.channels.pendingChannels.pending_closing_channels
+const pendingForceClosedChannelsSelector = state => state.channels.pendingChannels.pending_force_closing_channels
 
 channelsSelectors.channelModalOpen = createSelector(
   channelSelector,
   channel => channel ? true : false
 )
 
+channelsSelectors.allChannels = createSelector(
+  channelsSelector,
+  pendingOpenChannelsSelector,
+  pendingClosedChannelsSelector,
+  pendingForceClosedChannelsSelector,
+  (channels, pendingOpenChannels, pendingClosedChannels, pendingForcedClosedChannels) => [...channels, ...pendingOpenChannels, ...pendingClosedChannels, ...pendingForcedClosedChannels]
+)
+
 export { channelsSelectors }
 
 // ------------------------------------
@@ -100,14 +122,31 @@ export { channelsSelectors }
 const initialState = {
   channelsLoading: false,
   channels: [],
-  pendingChannels: [],
+  pendingChannels: {
+    total_limbo_balance: '',
+    pending_open_channels: [],
+    pending_closing_channels: [
+      {
+        "channel": {
+          "remote_node_pub": "02ef6248210e27b0f0df4d11d876e63f56e04bcb0054d0d8b6ba6a1a3e90dc56e1",
+          "channel_point": "5f6c522970e81069075c27be8799d0e2fb16dd4975cbd84c07b1a8bc9ece9918:0",
+          "capacity": "10000",
+          "local_balance": "312",
+          "remote_balance": "0"
+        },
+        "closing_txid": "4c0a25b0955e9efca46065a317a9560c9e3618356d4985e1a905eeb662e40bdb"
+      }
+    ],
+    pending_force_closing_channels: []
+  },
   channel: null,
   channelForm: {
     isOpen: false,
     node_key: '',
     local_amt: '',
     push_amt: ''
-  }
+  },
+  openingChannel: false
 }
 
 export default function channelsReducer(state = initialState, action) {

app/routes/wallet/components/Wallet.js

@@ -20,7 +20,7 @@ class Wallet extends Component {
   		info,
       ticker,
   		peers: { peersLoading, peers, peer, peerForm },
-  		channels: { channelsLoading, channels, channel, channelForm },
+  		channels: { channelsLoading, channels, channel, channelForm, pendingChannels },
       setPeer,
       setChannel,
       peerModalOpen,
@@ -28,7 +28,9 @@ class Wallet extends Component {
       setPeerForm,
       setChannelForm,
       connectRequest,
-      disconnectRequest
+      disconnectRequest,
+      allChannels,
+      openChannel
   	} = this.props
 
     return (
@@ -53,12 +55,15 @@ class Wallet extends Component {
             ticker={ticker}
             peers={peers}
             channelsLoading={channelsLoading}
+            allChannels={allChannels}
             channels={channels}
+            pendingChannels={pendingChannels}
             modalChannel={channel}
             setChannel={setChannel}
             channelModalOpen={channelModalOpen}
             channelForm={channelForm}
             setChannelForm={setChannelForm}
+            openChannel={openChannel}
           />
         </section>
       </div>

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

@@ -4,6 +4,8 @@ import { TiPlus } from 'react-icons/lib/ti'
 import ChannelModal from './components/ChannelModal'
 import ChannelForm from './components/ChannelForm'
 import Channel from './components/Channel'
+import OpenPendingChannel from './components/OpenPendingChannel'
+import ClosedPendingChannel from './components/ClosedPendingChannel'
 import styles from './Channels.scss'
 
 class Channels extends Component {
@@ -17,13 +19,17 @@ class Channels extends Component {
         setChannel,
         channelModalOpen,
         channelForm,
-        setChannelForm
+        setChannelForm,
+        pendingChannels,
+        allChannels,
+        openChannel
     } = this.props
-
+    console.log('allChannels: ', allChannels)
+    console.log('openChannel: ', openChannel)
     return (
         <div className={styles.channels}>
             <ChannelModal isOpen={channelModalOpen} resetChannel={setChannel} channel={modalChannel} />
-            <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} />
+            <ChannelForm form={channelForm} setForm={setChannelForm} ticker={ticker} peers={peers} openChannel={openChannel} />
             <div className={styles.header}>
                 <h3>Channels</h3>
                 <div
@@ -36,15 +42,27 @@ class Channels extends Component {
             </div>
             <ul>
                 {
-                    !channelsLoading && channels.length ? 
-                        channels.map(channel => 
-                            <Channel
-                                key={channel.chan_id}
-                                ticker={ticker}
-                                channel={channel}
-                                setChannel={setChannel}
-                            />
-                        )
+                    !channelsLoading && allChannels.length ? 
+                        allChannels.map(channel => {
+                            if (channel.hasOwnProperty('blocks_till_open')) {
+                                return (
+                                    <OpenPendingChannel />
+                                )
+                            } else if (channel.hasOwnProperty('closing_txid')) {
+                                return (
+                                    <ClosedPendingChannel />
+                                )
+                            } else {
+                                return (
+                                    <Channel
+                                        key={channel.chan_id}
+                                        ticker={ticker}
+                                        channel={channel}
+                                        setChannel={setChannel}
+                                    />
+                                )
+                            }
+                        })
                     :
                         'Loading...'
                 }

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

@@ -7,7 +7,7 @@
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	border-top: 1px solid $black;
+	border-top: 1px solid $grey;
 	cursor: pointer;
 	transition: all 0.25s;
 

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

@@ -22,7 +22,7 @@ class ChannelForm extends Component {
       }
     }
     
-    const { form, setForm, ticker, peers } = this.props
+    const { form, setForm, ticker, peers, openChannel } = this.props
 
     return (
       <div>
@@ -110,5 +110,4 @@ class ChannelForm extends Component {
   }
 }
 
-
-export default ChannelForm
+export default ChannelForm

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

@@ -0,0 +1,18 @@
+// @flow
+import React, { Component } from 'react'
+import { btc } from '../../../../../../../utils'
+import styles from './ClosedPendingChannel.scss'
+
+class ClosedPendingChannel extends Component {
+  render() {
+    const { ticker, channel, setChannel } = this.props
+    return (
+        <li className={styles.channel}>
+            ClosedPendingChannel
+        </li>
+    )
+  }
+}
+
+
+export default ClosedPendingChannel

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

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

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

@@ -0,0 +1,18 @@
+// @flow
+import React, { Component } from 'react'
+import { btc } from '../../../../../../../utils'
+import styles from './OpenPendingChannel.scss'
+
+class OpenPendingChannel extends Component {
+  render() {
+    const { ticker, channel, setChannel } = this.props
+    return (
+        <li className={styles.channel}>
+            OpenPendingChannel
+        </li>
+    )
+  }
+}
+
+
+export default OpenPendingChannel

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

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

app/routes/wallet/containers/WalletContainer.js

@@ -10,9 +10,11 @@ import {
 } from '../../../reducers/peers'
 import {
 	fetchChannels,
+	fetchPendingChannels,
 	setChannel,
 	channelsSelectors,
-	setChannelForm
+	setChannelForm,
+	openChannel
 } from '../../../reducers/channels'
 import Wallet from '../components/Wallet'
 
@@ -25,7 +27,9 @@ const mapDispatchToProps = {
 	disconnectRequest,
 	
 	fetchChannels,
+	fetchPendingChannels,
 	setChannel,
+	openChannel,
 
 	setPeerForm,
 	setChannelForm
@@ -38,6 +42,8 @@ const mapStateToProps = (state) => ({
 	peers: state.peers,
 	channels: state.channels,
 
+	allChannels: channelsSelectors.allChannels(state),
+
 	peerModalOpen: peersSelectors.peerModalOpen(state),
 	channelModalOpen: channelsSelectors.channelModalOpen(state),
 })