Browse Source

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

renovate/lint-staged-8.x
jamaljsr 7 years ago
parent
commit
5ecc1c5cdb
  1. 37
      app/reducers/activity.js
  2. 13
      app/routes/activity/components/Activity.js
  3. 19
      app/routes/activity/components/Activity.scss
  4. 3
      app/routes/activity/containers/ActivityContainer.js

37
app/reducers/activity.js

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

13
app/routes/activity/components/Activity.js

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

19
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 { .activity {
position: relative; position: relative;
padding: 0 60px; padding: 0 60px;

3
app/routes/activity/containers/ActivityContainer.js

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

Loading…
Cancel
Save