feature(channel filter): add filter ability to channels list

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) {

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 (
       <div className={`${styles.container} ${viewType === 1 && styles.graphview}`}>
@@ -76,12 +87,29 @@ class Channels extends Component {
           </div>
         </header>
 
-        <div className={styles.channels}>
+        <div className={styles.filtersContainer}>
+          <section>
+            <h2 onClick={toggleFilterPulldown} className={styles.filterTitle}>
+              {filter.name} <span className={filterPulldown && styles.pulldown}><FaAngleDown /></span>
+            </h2>
+            <ul className={`${styles.filters} ${filterPulldown && styles.active}`}>
+              {
+                nonActiveFilters.map(f => (
+                  <li key={f.key} onClick={() => changeFilter(f)}>
+                    {f.name}
+                  </li>
+                ))
+              }
+            </ul>
+          </section>
+        </div>
+
+        <div className={`${styles.channels} ${filterPulldown && styles.fade}`}>
           {
             viewType === 0 &&
             <ul className={viewType === 1 && styles.cardsContainer}>
               {
-                allChannels.map((channel, index) => {
+                currentChannels.map((channel, index) => {
                   if (Object.prototype.hasOwnProperty.call(channel, 'blocks_till_open')) {
                     return (
                       <OpenPendingChannel

app/routes/channels/components/Channels.scss

@@ -41,6 +41,53 @@
   justify-content: space-between;
 }
 
+.filtersContainer {
+  position: relative;
+  padding: 0 40px;
+
+  h2, h2 span {
+    color: $bluegrey;
+    cursor: pointer;
+    transition: color 0.25s;
+
+    &:hover {
+      color: lighten($bluegrey, 10%);
+    }
+  }
+  
+  h2, .filters li {
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: $darkestgrey;
+    font-size: 14px;
+    font-weight: 400;
+  }
+
+  h2 span.pulldown {
+    color: $main;
+  }
+
+  .filters {
+    display: none;
+    
+    &.active {
+      display: block;
+      position: absolute;
+      bottom: -100px;
+      z-index: 10;
+
+      li {
+        margin: 5px 0;
+        cursor: pointer;
+
+        &:hover {
+          color: $main;
+        }
+      }
+    }
+  }
+}
+
 .layoutsContainer {
   padding: 40px;
 
@@ -74,6 +121,11 @@
 
 .channels {
   padding: 10px 40px 40px 40px;
+  transition: opacity 0.25s;
+
+  &.fade {
+    opacity: 0.05;
+  }
 
   .cardsContainer {
     display: flex;

app/routes/channels/containers/ChannelsContainer.js

@@ -7,6 +7,9 @@ import {
   updateChannelSearchQuery,
   setViewType,
 
+  toggleFilterPulldown,
+  changeFilter,
+
   channelsSelectors
 } from 'reducers/channels'
 
@@ -33,6 +36,8 @@ const mapDispatchToProps = {
   openChannel,
   updateChannelSearchQuery,
   setViewType,
+  toggleFilterPulldown,
+  changeFilter,
 
   openChannelForm,
   closeChannelForm,
@@ -57,8 +62,12 @@ const mapStateToProps = state => ({
   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)