From 9b37690a62e042eb8d15fe4c80e428d8ef7bb7b8 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Sun, 12 Nov 2017 18:47:17 -0600 Subject: [PATCH] fix(refresh channels): refresh channels on new channel route --- app/reducers/channels.js | 50 ++++++++++++++----- app/routes/channels/components/Channels.js | 23 ++++++++- app/routes/channels/components/Channels.scss | 12 +++++ .../channels/containers/ChannelsContainer.js | 4 +- app/routes/wallet/components/Wallet.js | 21 -------- .../wallet/containers/WalletContainer.js | 2 - 6 files changed, 73 insertions(+), 39 deletions(-) diff --git a/app/reducers/channels.js b/app/reducers/channels.js index 20ae9e08..0fd2aa82 100644 --- a/app/reducers/channels.js +++ b/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 = { - ALL_CHANNELS: channelsSelectors.allChannels, - ACTIVE_CHANNELS: channelsSelector.activeChannels, - OPEN_CHANNELS: channelsSelector, - OPEN_PENDING_CHANNELS: pendingOpenChannelsSelector, - CLOSING_PENDING_CHANNELS: channelsSelector.closingPendingChannels -} - -channelsSelectors.currentChannels = createSelector( +export const currentChannels = createSelector( + allChannels, + activeChannels, + channelsSelector, + pendingOpenChannelsSelector, + closingPendingChannels, 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 } diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js index 26c67be5..19c2d944 100644 --- a/app/routes/channels/components/Channels.js +++ b/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 { } +
+ +
diff --git a/app/routes/channels/components/Channels.scss b/app/routes/channels/components/Channels.scss index a5cbbb6d..56d354e2 100644 --- a/app/routes/channels/components/Channels.scss +++ b/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 { diff --git a/app/routes/channels/containers/ChannelsContainer.js b/app/routes/channels/containers/ChannelsContainer.js index 1cced7a8..fecdc1d0 100644 --- a/app/routes/channels/containers/ChannelsContainer.js +++ b/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: channelsSelectors.currentChannels(state)(state), + currentChannels: currentChannels(state), activeChanIds: channelsSelectors.activeChanIds(state), nonActiveFilters: channelsSelectors.nonActiveFilters(state), diff --git a/app/routes/wallet/components/Wallet.js b/app/routes/wallet/components/Wallet.js index 0165795a..041860b9 100644 --- a/app/routes/wallet/components/Wallet.js +++ b/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} /> -
) @@ -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, diff --git a/app/routes/wallet/containers/WalletContainer.js b/app/routes/wallet/containers/WalletContainer.js index d0744edd..999163a8 100644 --- a/app/routes/wallet/containers/WalletContainer.js +++ b/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),