Browse Source

feature(wallet): add wallet search

renovate/lint-staged-8.x
Jack Mallers 7 years ago
parent
commit
56b8802d9d
  1. 53
      app/reducers/activity.js
  2. 14
      app/routes/activity/components/Activity.js
  3. 8
      app/routes/activity/containers/ActivityContainer.js

53
app/reducers/activity.js

@ -16,7 +16,8 @@ const initialState = {
modal: { modal: {
modalType: null, modalType: null,
modalProps: {} modalProps: {}
} },
searchText: ''
} }
// ------------------------------------ // ------------------------------------
@ -29,6 +30,8 @@ export const CHANGE_FILTER = 'CHANGE_FILTER'
export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN' export const TOGGLE_PULLDOWN = 'TOGGLE_PULLDOWN'
export const UPDATE_SEARCH_TEXT = 'UPDATE_SEARCH_TEXT'
// ------------------------------------ // ------------------------------------
// Actions // Actions
// ------------------------------------ // ------------------------------------
@ -59,6 +62,13 @@ export function toggleFilterPulldown() {
} }
} }
export function updateSearchText(searchText) {
return {
type: UPDATE_SEARCH_TEXT,
searchText
}
}
// ------------------------------------ // ------------------------------------
// Action Handlers // Action Handlers
// ------------------------------------ // ------------------------------------
@ -66,7 +76,9 @@ const ACTION_HANDLERS = {
[SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modal: { modalType, modalProps } }), [SHOW_ACTIVITY_MODAL]: (state, { modalType, modalProps }) => ({ ...state, modal: { modalType, modalProps } }),
[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 }),
[UPDATE_SEARCH_TEXT]: (state, { searchText }) => ({ ...state, searchText })
} }
// ------------------------------------ // ------------------------------------
@ -75,20 +87,33 @@ const ACTION_HANDLERS = {
const activitySelectors = {} 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 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
const allActivity = createSelector( const allActivity = createSelector(
searchSelector,
paymentsSelector, paymentsSelector,
invoicesSelector, invoicesSelector,
transactionsSelector, transactionsSelector,
(payments, invoices, transactions) => [...payments, ...invoices, ...transactions].sort((a, b) => { (searchText, payments, invoices, transactions) => {
const aTimestamp = Object.prototype.hasOwnProperty.call(a, 'time_stamp') ? a.time_stamp : a.creation_date const searchedArr = [...payments, ...invoices, ...transactions].filter(tx => {
const bTimestamp = Object.prototype.hasOwnProperty.call(b, 'time_stamp') ? b.time_stamp : b.creation_date if ((tx.tx_hash && tx.tx_hash.includes(searchText)) ||
(tx.payment_hash && tx.payment_hash.includes(searchText)) ||
return bTimestamp - aTimestamp (tx.r_hash && tx.r_hash.includes(searchText)))
}) { return true }
return false
})
return searchedArr.sort((a, b) => {
const aTimestamp = Object.prototype.hasOwnProperty.call(a, 'time_stamp') ? a.time_stamp : a.creation_date
const bTimestamp = Object.prototype.hasOwnProperty.call(b, 'time_stamp') ? b.time_stamp : b.creation_date
return bTimestamp - aTimestamp
})
}
) )
const lnActivity = createSelector( const lnActivity = createSelector(
@ -131,6 +156,18 @@ activitySelectors.nonActiveFilters = createSelector(
(filters, filter) => filters.filter(f => f.key !== filter.key) (filters, filter) => filters.filter(f => f.key !== filter.key)
) )
activitySelectors.searchActivity = createSelector(
searchSelector,
paymentsSelector,
transactionsSelector,
invoicesSelector,
(searchText, payments, transactions, invoices) => {
if (!searchText.length) { return }
}
)
export { activitySelectors } export { activitySelectors }

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

@ -47,14 +47,14 @@ class Activity extends Component {
render() { render() {
const { const {
ticker, ticker,
searchInvoices, updateSearchText,
invoice: { invoicesSearchText, invoiceLoading }, invoice: { invoiceLoading },
address: { address }, address: { address },
balance, balance,
info, info,
payment: { paymentLoading }, payment: { paymentLoading },
currentTicker, currentTicker,
activity: { modal, filter, filterPulldown }, activity: { modal, filter, filterPulldown, searchText },
hideActivityModal, hideActivityModal,
changeFilter, changeFilter,
toggleFilterPulldown, toggleFilterPulldown,
@ -84,10 +84,10 @@ class Activity extends Component {
<MdSearch /> <MdSearch />
</label> </label>
<input <input
value={invoicesSearchText} value={searchText}
onChange={event => searchInvoices(event.target.value)} onChange={event => updateSearchText(event.target.value)}
className={`${styles.text} ${styles.input}`} className={`${styles.text} ${styles.input}`}
placeholder='Search by amount, hash, memo, etc' placeholder='Search by hash...'
type='text' type='text'
id='invoiceSearch' id='invoiceSearch'
/> />
@ -132,7 +132,7 @@ Activity.propTypes = {
fetchBalance: PropTypes.func.isRequired, fetchBalance: PropTypes.func.isRequired,
ticker: PropTypes.object.isRequired, ticker: PropTypes.object.isRequired,
searchInvoices: PropTypes.func.isRequired, updateSearchText: PropTypes.func.isRequired,
invoice: PropTypes.object.isRequired, invoice: PropTypes.object.isRequired,
payment: PropTypes.object.isRequired, payment: PropTypes.object.isRequired,
currentTicker: PropTypes.object.isRequired, currentTicker: PropTypes.object.isRequired,

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

@ -3,7 +3,6 @@ import { tickerSelectors } from 'reducers/ticker'
import { fetchBalance } from 'reducers/balance' import { fetchBalance } from 'reducers/balance'
import { import {
fetchInvoices, fetchInvoices,
searchInvoices,
setInvoice, setInvoice,
invoiceSelectors invoiceSelectors
} from 'reducers/invoice' } from 'reducers/invoice'
@ -18,7 +17,8 @@ import {
hideActivityModal, hideActivityModal,
changeFilter, changeFilter,
toggleFilterPulldown, toggleFilterPulldown,
activitySelectors activitySelectors,
updateSearchText
} from 'reducers/activity' } from 'reducers/activity'
import { newAddress } from 'reducers/address' import { newAddress } from 'reducers/address'
@ -30,13 +30,13 @@ const mapDispatchToProps = {
fetchPayments, fetchPayments,
fetchInvoices, fetchInvoices,
fetchTransactions, fetchTransactions,
searchInvoices,
showActivityModal, showActivityModal,
hideActivityModal, hideActivityModal,
changeFilter, changeFilter,
toggleFilterPulldown, toggleFilterPulldown,
newAddress, newAddress,
fetchBalance fetchBalance,
updateSearchText
} }
const mapStateToProps = state => ({ const mapStateToProps = state => ({

Loading…
Cancel
Save