feature(filters): add filters to reducer and add selector to get the non-active one

app/reducers/activity.js

@@ -5,6 +5,13 @@ import { createSelector } from 'reselect'
 // ------------------------------------
 const initialState = {
   filter: 'ALL_ACTIVITY',
+  filters: [
+    { key: 'ALL_ACTIVITY', name: 'Activity'},
+    { key: 'LN_ACTIVITY', name: 'Lightning Network'},
+    { key: 'PAYMENT_ACTIVITY', name: 'Payments'},
+    { key: 'INVOICE_ACTIVITY', name: 'Invoices'},
+    { key: 'TRANSACTION_ACTIVITY', name: 'Transactions'}
+  ],
   modal: {
     modalType: null,
     modalProps: {}
@@ -54,6 +61,7 @@ const ACTION_HANDLERS = {
 // Selectors
 // ------------------------------------
 const activitySelectors = {}
+const filtersSelector = state => state.activity.filters
 const filterSelector = state => state.activity.filter
 const paymentsSelector = state => state.payment.payments
 const invoicesSelector = state => state.invoice.invoices
@@ -106,6 +114,12 @@ activitySelectors.currentActivity = createSelector(
   filter => FILTERS[filter]
 )
 
+activitySelectors.nonActiveFilters = createSelector(
+  filtersSelector,
+  filterSelector,
+  (filters, filter) => filters.filter(f => f.key !== filter)
+)
+
 const FILTERS = {
   ALL_ACTIVITY: allActivity,
   LN_ACTIVITY: lnActivity,

app/routes/activity/components/Activity.js

@@ -15,7 +15,7 @@ class Activity extends Component {
   constructor(props, context) {
     super(props, context)
     this.state = {
-      tab: 1
+      pulldown: false
     }
 
     this.renderActivity = this.renderActivity.bind(this)
@@ -45,7 +45,6 @@ class Activity extends Component {
   }
 
   render() {
-    const { tab } = this.state
     const {
       ticker,
       searchInvoices,
@@ -59,9 +58,10 @@ class Activity extends Component {
       currentTicker,
       activity: { modal },
       hideActivityModal,
-      currentActivity
+      currentActivity,
+      nonActiveFilters
     } = this.props
-    
+
     if (invoiceLoading || paymentLoading) { return <div>Loading...</div> }
 
     return (
@@ -79,10 +79,10 @@ class Activity extends Component {
             <MdSearch />
           </label>
           <input
-            value={tab === 1 ? '' : invoicesSearchText}
+            value={invoicesSearchText}
-            onChange={event => (tab === 1 ? null : searchInvoices(event.target.value))}
+            onChange={event => searchInvoices(event.target.value)}
             className={`${styles.text} ${styles.input}`}
-            placeholder={tab === 1 ? 'Search by amount, hash, memo, etc' : 'Search requests by memo'}
+            placeholder='Search by amount, hash, memo, etc'
             type='text'
             id='invoiceSearch'
           />
@@ -90,7 +90,19 @@ class Activity extends Component {
 
         <div className={styles.activities}>
           <header className={styles.header}>
-            <h2>Activity</h2>
+            <h2 onClick={() => this.setState({ pulldown: true })}>Activity</h2>
+            <ul className={styles.filters}>
+              {
+                nonActiveFilters.map(filter => {
+                  console.log('filter: ', filter)
+                  return (
+                    <li key={filter.key}>
+                      {filter.name}
+                    </li>
+                  )
+                })
+              }
+            </ul>
           </header>
           <ul className={styles.activityContainer}>
             {

app/routes/activity/containers/ActivityContainer.js

@@ -41,7 +41,8 @@ const mapStateToProps = state => ({
 
   currentTicker: tickerSelectors.currentTicker(state),
 
-  currentActivity: activitySelectors.currentActivity(state)(state)
+  currentActivity: activitySelectors.currentActivity(state)(state),
+  nonActiveFilters: activitySelectors.nonActiveFilters(state)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(Activity)