feat(toggle-expired-requests): add button to show/hide expired requests

app/reducers/activity.js

@@ -18,7 +18,8 @@ const initialState = {
     showCurrencyFilters: false
   },
   searchActive: false,
-  searchText: ''
+  searchText: '',
+  showExpiredRequests: false
 }
 
 // ------------------------------------
@@ -31,6 +32,8 @@ export const CHANGE_FILTER = 'CHANGE_FILTER'
 
 export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN'
 
+export const TOGGLE_EXPIRED_REQUESTS = 'TOGGLE_EXPIRED_REQUESTS'
+
 export const SET_ACTIVITY_MODAL_CURRENCY_FILTERS = 'SET_ACTIVITY_MODAL_CURRENCY_FILTERS'
 
 export const UPDATE_SEARCH_ACTIVE = 'UPDATE_SEARCH_ACTIVE'
@@ -87,6 +90,12 @@ export function setActivityModalCurrencyFilters(showCurrencyFilters) {
   }
 }
 
+export function toggleExpiredRequests() {
+  return {
+    type: TOGGLE_EXPIRED_REQUESTS
+  }
+}
+
 // ------------------------------------
 // Action Handlers
 // ------------------------------------
@@ -98,6 +107,10 @@ const ACTION_HANDLERS = {
   [HIDE_ACTIVITY_MODAL]: state => ({ ...state, modal: { modalType: null, modalProps: {} } }),
   [CHANGE_FILTER]: (state, { filter }) => ({ ...state, filter, filterPulldown: false }),
   [TOGGLE_PULLDOWN]: state => ({ ...state, filterPulldown: !state.filterPulldown }),
+  [TOGGLE_EXPIRED_REQUESTS]: state => ({
+    ...state,
+    showExpiredRequests: !state.showExpiredRequests
+  }),
 
   [SET_ACTIVITY_MODAL_CURRENCY_FILTERS]: (state, { showCurrencyFilters }) => ({
     ...state,
@@ -119,6 +132,7 @@ const activitySelectors = {}
 const filtersSelector = state => state.activity.filters
 const filterSelector = state => state.activity.filter
 const searchSelector = state => state.activity.searchText
+const showExpiredSelector = state => state.activity.showExpiredRequests
 const paymentsSelector = state => state.payment.payments
 const invoicesSelector = state => state.invoice.invoices
 const transactionsSelector = state => state.transaction.transactions
@@ -201,8 +215,13 @@ const allActivity = createSelector(
   paymentsSelector,
   invoicesSelector,
   transactionsSelector,
-  (searchText, payments, invoices, transactions) => {
-    const searchedArr = [...payments, ...invoices, ...transactions].filter(tx => {
+  showExpiredSelector,
+  (searchText, payments, invoices, transactions, showExpired) => {
+    const filteredInvoices = invoices.filter(
+      invoice => showExpired || invoice.settled || !invoiceExpired(invoice)
+    )
+
+    const searchedArr = [...payments, ...filteredInvoices, ...transactions].filter(tx => {
       if (
         (tx.tx_hash && tx.tx_hash.includes(searchText)) ||
         (tx.payment_hash && tx.payment_hash.includes(searchText)) ||
@@ -222,7 +241,12 @@ const allActivity = createSelector(
   }
 )
 
-const invoiceActivity = createSelector(invoicesSelector, invoices => groupAll(invoices))
+const invoiceActivity = createSelector(
+  invoicesSelector,
+  showExpiredSelector,
+  (invoices, showExpired) =>
+    groupAll(invoices.filter(invoice => showExpired || invoice.settled || !invoiceExpired(invoice)))
+)
 
 const sentActivity = createSelector(
   transactionsSelector,
@@ -250,6 +274,11 @@ activitySelectors.nonActiveFilters = createSelector(
   (filters, filter) => filters.filter(f => f.key !== filter.key)
 )
 
+activitySelectors.showExpiredToggle = createSelector(
+  filterSelector,
+  filter => filter.key === 'REQUESTED_ACTIVITY' || filter.key === 'ALL_ACTIVITY'
+)
+
 export { activitySelectors }
 
 // ------------------------------------

app/routes/activity/components/Activity.js

@@ -74,9 +74,11 @@ class Activity extends Component {
   render() {
     const {
       balance,
-      activity: { filters, filter, filterPulldown, searchActive, searchText },
+      activity: { filters, filter, filterPulldown, searchActive, searchText, showExpiredRequests },
       changeFilter,
       currentActivity,
+      showExpiredToggle,
+      toggleExpiredRequests,
 
       fetchPayments,
       fetchInvoices,
@@ -199,6 +201,13 @@ class Activity extends Component {
                 </ul>
               </li>
             ))}
+            {showExpiredToggle && (
+              <li>
+                <div className={styles.toggleExpired} onClick={toggleExpiredRequests}>
+                  {showExpiredRequests ? 'Hide Expired Requests' : 'Show Expired Requests'}
+                </div>
+              </li>
+            )}
           </ul>
         </div>
       </div>
@@ -220,9 +229,11 @@ Activity.propTypes = {
   changeFilter: PropTypes.func.isRequired,
   updateSearchActive: PropTypes.func.isRequired,
   updateSearchText: PropTypes.func.isRequired,
+  toggleExpiredRequests: PropTypes.func.isRequired,
 
   activity: PropTypes.object.isRequired,
   currentActivity: PropTypes.array.isRequired,
+  showExpiredToggle: PropTypes.bool.isRequired,
   balance: PropTypes.object.isRequired,
   walletProps: PropTypes.object.isRequired,
 

app/routes/activity/components/Activity.scss

@@ -140,6 +140,25 @@
   }
 }
 
+.toggleExpired {
+  margin: 0 auto;
+  font-size: 16px;
+  font-weight: bold;
+  color: $white;
+  background: #31343f;
+  padding: 10px;
+  width: 200px;
+  text-align: center;
+  border-radius: 5px;
+  cursor: pointer;
+  opacity: 0.5;
+  transition: all 0.25s;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
 .activity {
   position: relative;
   padding: 0 60px;

app/routes/activity/containers/ActivityContainer.js

@@ -9,6 +9,7 @@ import {
   hideActivityModal,
   changeFilter,
   toggleFilterPulldown,
+  toggleExpiredRequests,
   activitySelectors,
   updateSearchActive,
   updateSearchText
@@ -36,6 +37,7 @@ const mapDispatchToProps = {
   hideActivityModal,
   changeFilter,
   toggleFilterPulldown,
+  toggleExpiredRequests,
   walletAddress,
   openWalletModal,
   fetchBalance,
@@ -77,6 +79,7 @@ const mapStateToProps = state => ({
 
   currentActivity: activitySelectors.currentActivity(state)(state),
   nonActiveFilters: activitySelectors.nonActiveFilters(state),
+  showExpiredToggle: activitySelectors.showExpiredToggle(state),
 
   showPayLoadingScreen: payFormSelectors.showPayLoadingScreen(state)
 })