From 8aa28987aaa86df52480df93ad58e70ef8844920 Mon Sep 17 00:00:00 2001 From: Jack Mallers Date: Sat, 11 Nov 2017 12:53:36 -0600 Subject: [PATCH] feature(channel filter): add filter ability to channels list --- app/reducers/channels.js | 65 ++++++++++++++++++- app/routes/channels/components/Channels.js | 38 +++++++++-- app/routes/channels/components/Channels.scss | 52 +++++++++++++++ .../channels/containers/ChannelsContainer.js | 9 +++ 4 files changed, 157 insertions(+), 7 deletions(-) diff --git a/app/reducers/channels.js b/app/reducers/channels.js index 48f1420f..20ae9e08 100644 --- a/app/reducers/channels.js +++ b/app/reducers/channels.js @@ -25,6 +25,9 @@ export const UPDATE_SEARCH_QUERY = 'UPDATE_SEARCH_QUERY' export const SET_VIEW_TYPE = 'SET_VIEW_TYPE' +export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN' +export const CHANGE_FILTER = 'CHANGE_FILTER' + // ------------------------------------ // Actions // ------------------------------------ @@ -178,6 +181,19 @@ export const pushclosechannelstatus = () => (dispatch) => { dispatch(fetchChannels()) } +export function toggleFilterPulldown() { + return { + type: TOGGLE_PULLDOWN + } +} + +export function changeFilter(filter) { + return { + type: CHANGE_FILTER, + filter + } +} + // ------------------------------------ // Action Handlers // ------------------------------------ @@ -200,7 +216,10 @@ const ACTION_HANDLERS = { [UPDATE_SEARCH_QUERY]: (state, { searchQuery }) => ({ ...state, searchQuery }), - [SET_VIEW_TYPE]: (state, { viewType }) => ({ ...state, viewType }) + [SET_VIEW_TYPE]: (state, { viewType }) => ({ ...state, viewType }), + + [TOGGLE_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown }), + [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filterPulldown: false, filter }) } const channelsSelectors = {} @@ -210,12 +229,25 @@ const pendingOpenChannelsSelector = state => state.channels.pendingChannels.pend const pendingClosedChannelsSelector = state => state.channels.pendingChannels.pending_closing_channels const pendingForceClosedChannelsSelector = state => state.channels.pendingChannels.pending_force_closing_channels const channelSearchQuerySelector = state => state.channels.searchQuery +const filtersSelector = state => state.channels.filters +const filterSelector = state => state.channels.filter channelsSelectors.channelModalOpen = createSelector( channelSelector, channel => (!!channel) ) +channelsSelector.activeChannels = createSelector( + channelsSelector, + openChannels => openChannels.filter(channel => channel.active) +) + +channelsSelector.closingPendingChannels = createSelector( + pendingClosedChannelsSelector, + pendingForceClosedChannelsSelector, + (pendingClosedChannels, pendingForcedClosedChannels) => [...pendingClosedChannels, ...pendingForcedClosedChannels] +) + channelsSelectors.allChannels = createSelector( channelsSelector, pendingOpenChannelsSelector, @@ -238,6 +270,25 @@ channelsSelectors.activeChanIds = createSelector( channels => channels.map(channel => channel.chan_id) ) +channelsSelectors.nonActiveFilters = createSelector( + filtersSelector, + filterSelector, + (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( + filterSelector, + filter => FILTERS[filter.key] +) + export { channelsSelectors } // ------------------------------------ @@ -277,7 +328,17 @@ const initialState = { openingChannel: false, closingChannel: false, searchQuery: '', - viewType: 0 + viewType: 0, + + filterPulldown: false, + filter: { key: 'ALL_CHANNELS', name: 'All Channels' }, + filters: [ + { key: 'ALL_CHANNELS', name: 'All Channels' }, + { key: 'ACTIVE_CHANNELS', name: 'Active Channels' }, + { key: 'OPEN_CHANNELS', name: 'Open Channels' }, + { key: 'OPEN_PENDING_CHANNELS', name: 'Open Pending Channels' }, + { key: 'CLOSING_PENDING_CHANNELS', name: 'Closing Pending Channels' }, + ], } export default function channelsReducer(state = initialState, action) { diff --git a/app/routes/channels/components/Channels.js b/app/routes/channels/components/Channels.js index 312ed5a1..26c67be5 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 } from 'react-icons/lib/fa' +import { FaAlignJustify, FaGlobe, FaAngleDown } from 'react-icons/lib/fa' import { MdSearch } from 'react-icons/lib/md' import OpenPendingChannel from 'components/Channels/OpenPendingChannel' @@ -23,8 +23,19 @@ class Channels extends Component { render() { const { - channels: { searchQuery, viewType }, + channels: { + searchQuery, + filterPulldown, + filter, + viewType + }, + + nonActiveFilters, + toggleFilterPulldown, + changeFilter, + allChannels, + currentChannels, openChannels, updateChannelSearchQuery, setViewType, @@ -41,7 +52,7 @@ class Channels extends Component { setCurrentChannel } = this.props - console.log('allChannels: ', allChannels) + console.log('currentChannels: ',currentChannels) return (
@@ -76,12 +87,29 @@ class Channels extends Component {
-
+
+
+

+ {filter.name} +

+
    + { + nonActiveFilters.map(f => ( +
  • changeFilter(f)}> + {f.name} +
    • + )) + } +
+
+
+ +
{ viewType === 0 &&
    { - allChannels.map((channel, index) => { + currentChannels.map((channel, index) => { if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) { return ( ({ identity_pubkey: state.info.data.identity_pubkey, allChannels: channelsSelectors.allChannels(state), + currentChannels: channelsSelectors.currentChannels(state)(state), activeChanIds: channelsSelectors.activeChanIds(state), + nonActiveFilters: channelsSelectors.nonActiveFilters(state), + currentTicker: tickerSelectors.currentTicker(state), + channelFormHeader: channelFormSelectors.channelFormHeader(state), channelFormProgress: channelFormSelectors.channelFormProgress(state), stepTwoIsValid: channelFormSelectors.stepTwoIsValid(state)