fix(refresh channels): refresh channels on new channel route

app/reducers/channels.js

@@ -237,18 +237,18 @@ channelsSelectors.channelModalOpen = createSelector(
   channel => (!!channel)
 )
 
-channelsSelector.activeChannels = createSelector(
+const activeChannels = createSelector(
   channelsSelector,
   openChannels => openChannels.filter(channel => channel.active)
 )
 
-channelsSelector.closingPendingChannels = createSelector(
+const closingPendingChannels = createSelector(
   pendingClosedChannelsSelector,
   pendingForceClosedChannelsSelector,
   (pendingClosedChannels, pendingForcedClosedChannels) => [...pendingClosedChannels, ...pendingForcedClosedChannels]
 )
 
-channelsSelectors.allChannels = createSelector(
+const allChannels = createSelector(
   channelsSelector,
   pendingOpenChannelsSelector,
   pendingClosedChannelsSelector,
@@ -276,17 +276,41 @@ channelsSelectors.nonActiveFilters = createSelector(
   (filters, filter) => filters.filter(f => f.key !== filter.key)
 )
 
-const FILTERS = {
+export const currentChannels = createSelector(
-  ALL_CHANNELS: channelsSelectors.allChannels,
+  allChannels,
-  ACTIVE_CHANNELS: channelsSelector.activeChannels,
+  activeChannels,
-  OPEN_CHANNELS: channelsSelector,
+  channelsSelector,
-  OPEN_PENDING_CHANNELS: pendingOpenChannelsSelector,
+  pendingOpenChannelsSelector,
-  CLOSING_PENDING_CHANNELS: channelsSelector.closingPendingChannels
+  closingPendingChannels,
-}
-
-channelsSelectors.currentChannels = createSelector(
   filterSelector,
-  filter => FILTERS[filter.key]
+  channelSearchQuerySelector,
+  (allChannels, activeChannels, openChannels, pendingOpenChannels, pendingClosedChannels, filter, searchQuery) => {
+    // Helper function to deliver correct channel array based on filter
+    const filteredArray = filter => {
+      switch(filter) {
+        case 'ALL_CHANNELS':
+          return allChannels
+        case 'ACTIVE_CHANNELS':
+          return activeChannels
+        case 'OPEN_CHANNELS':
+          return openChannels
+        case 'OPEN_PENDING_CHANNELS':
+          return pendingOpenChannels
+        case 'CLOSING_PENDING_CHANNELS':
+          return pendingClosedChannels
+      }
+    }
+
+    const channelArray = filteredArray(filter.key)
+
+    console.log('channelArray: ', channelArray)
+    return channelArray.filter(channel => {
+      return Object.prototype.hasOwnProperty.call(channel, 'channel') ?
+        channel.channel.remote_node_pub.includes(searchQuery) || channel.channel.channel_point.includes(searchQuery)
+        :
+        channel.remote_pubkey.includes(searchQuery) || channel.channel_point.includes(searchQuery)
+    }) 
+  }
 )
 
 export { channelsSelectors }

app/routes/channels/components/Channels.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 
-import { FaAlignJustify, FaGlobe, FaAngleDown } from 'react-icons/lib/fa'
+import { FaAlignJustify, FaGlobe, FaAngleDown, FaRepeat } from 'react-icons/lib/fa'
 import { MdSearch } from 'react-icons/lib/md'
 
 import OpenPendingChannel from 'components/Channels/OpenPendingChannel'
@@ -23,6 +23,7 @@ class Channels extends Component {
 
   render() {
     const {
+      fetchChannels,
       channels: {
         searchQuery,
         filterPulldown,
@@ -52,6 +53,20 @@ class Channels extends Component {
       setCurrentChannel
     } = this.props
 
+    const refreshClicked = (event) => {
+      // store event in icon so we dont get an error when react clears it
+      const icon = event.currentTarget
+
+      // fetch peers
+      fetchChannels()
+
+      // clear animation after the second so we can reuse it
+      setTimeout(() => { icon.style.animation = '' }, 1000)
+
+      // spin icon for 1 sec
+      icon.style.animation = 'spin 1000ms linear 1'
+    }
+
     console.log('currentChannels: ',currentChannels)
 
     return (
@@ -102,6 +117,12 @@ class Channels extends Component {
               }
             </ul>
           </section>
+          <section className={`${styles.refreshContainer} hint--left`} data-hint='Refresh your peers list'>
+            <FaRepeat
+              style={{ verticalAlign: 'baseline' }}
+              onClick={refreshClicked}
+            />
+          </section>
         </div>
 
         <div className={`${styles.channels} ${filterPulldown && styles.fade}`}>

app/routes/channels/components/Channels.scss

@@ -43,6 +43,9 @@
 
 .filtersContainer {
   position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
   padding: 0 40px;
 
   h2, h2 span {
@@ -86,6 +89,15 @@
       }
     }
   }
+
+  .refreshContainer {
+    color: $bluegrey;
+
+    &:hover {
+      cursor: pointer;
+      color: lighten($bluegrey, 10%);
+    }
+  }
 }
 
 .layoutsContainer {

app/routes/channels/containers/ChannelsContainer.js

@@ -6,6 +6,7 @@ import {
   openChannel,
   updateChannelSearchQuery,
   setViewType,
+  currentChannels,
 
   toggleFilterPulldown,
   changeFilter,
@@ -61,8 +62,7 @@ const mapStateToProps = state => ({
   network: state.network,
   identity_pubkey: state.info.data.identity_pubkey,
 
-  allChannels: channelsSelectors.allChannels(state),
+  currentChannels: currentChannels(state),
-  currentChannels: channelsSelectors.currentChannels(state)(state),
   activeChanIds: channelsSelectors.activeChanIds(state),
   nonActiveFilters: channelsSelectors.nonActiveFilters(state),
 

app/routes/wallet/components/Wallet.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
-import Channels from 'components/Channels'
 import Peers from 'components/Peers'
 import styles from './Wallet.scss'
 
@@ -27,7 +26,6 @@ class Wallet extends Component {
       setChannelForm,
       connectRequest,
       disconnectRequest,
-      allChannels,
       openChannel,
       closeChannel,
       currentTicker,
@@ -49,24 +47,6 @@ class Wallet extends Component {
             connect={connectRequest}
             disconnect={disconnectRequest}
           />
-          <Channels
-            fetchChannels={fetchChannels}
-            ticker={ticker}
-            peers={peers}
-            channelsLoading={channelsLoading}
-            allChannels={allChannels}
-            channels={channels}
-            pendingChannels={pendingChannels}
-            modalChannel={channel}
-            setChannel={setChannel}
-            channelModalOpen={channelModalOpen}
-            channelForm={channelForm}
-            setChannelForm={setChannelForm}
-            openChannel={openChannel}
-            closeChannel={closeChannel}
-            currentTicker={currentTicker}
-            explorerLinkBase={explorerLinkBase}
-          />
         </section>
       </div>
     )
@@ -87,7 +67,6 @@ Wallet.propTypes = {
   setChannelForm: PropTypes.func.isRequired,
   connectRequest: PropTypes.func.isRequired,
   disconnectRequest: PropTypes.func.isRequired,
-  allChannels: PropTypes.array.isRequired,
   openChannel: PropTypes.func.isRequired,
   closeChannel: PropTypes.func.isRequired,
   currentTicker: PropTypes.object.isRequired,

app/routes/wallet/containers/WalletContainer.js

@@ -45,8 +45,6 @@ const mapStateToProps = state => ({
   peers: state.peers,
   channels: state.channels,
 
-  allChannels: channelsSelectors.allChannels(state),
-
   peerModalOpen: peersSelectors.peerModalOpen(state),
   channelModalOpen: channelsSelectors.channelModalOpen(state),