diff --git a/app/reducers/activity.js b/app/reducers/activity.js index f7032706..761efb09 100644 --- a/app/reducers/activity.js +++ b/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 } // ------------------------------------ diff --git a/app/routes/activity/components/Activity.js b/app/routes/activity/components/Activity.js index 2c7d8647..080654ce 100644 --- a/app/routes/activity/components/Activity.js +++ b/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 { ))} + {showExpiredToggle && ( +
  • +
    + {showExpiredRequests ? 'Hide Expired Requests' : 'Show Expired Requests'} +
    +
  • + )} @@ -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, diff --git a/app/routes/activity/components/Activity.scss b/app/routes/activity/components/Activity.scss index be3a3583..cb7d6328 100644 --- a/app/routes/activity/components/Activity.scss +++ b/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; diff --git a/app/routes/activity/containers/ActivityContainer.js b/app/routes/activity/containers/ActivityContainer.js index 8f188f01..b87f5e93 100644 --- a/app/routes/activity/containers/ActivityContainer.js +++ b/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) })