-
Notifications
You must be signed in to change notification settings - Fork 212
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Finance: port agent filtering to finance (#1102)
* Port agent filtering to finance * Revert transfer types to symbols, rename variable for readability * Make TRANSFER_TYPES_LABELS be provided by useFilteredTransfers() * Move set page to effect, use Reflect for iterating over object with symbol keys * Make index conversion to unselected standard clearer on filtering hook * Add more robust case checking for dates * Add individual date filtering, transform transfer types to tuple array, make handlers clearer
- Loading branch information
1 parent
af28e21
commit 1e5ba8f
Showing
5 changed files
with
166 additions
and
121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
apps/finance/app/src/components/useFilteredTransfers.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| import { useCallback, useEffect, useMemo, useState } from 'react' | ||
| import { endOfDay, isAfter, isBefore, startOfDay } from 'date-fns' | ||
| import { | ||
| TRANSFER_TYPES, | ||
| TRANSFER_TYPES_LABELS, | ||
| Incoming, | ||
| Outgoing, | ||
| } from '../transfer-types' | ||
| import { addressesEqual } from '../lib/web3-utils' | ||
|
|
||
| const UNSELECTED_TOKEN_FILTER = -1 | ||
| const UNSELECTED_TRANSFER_TYPE_FILTER = -1 | ||
| const UNSELECTED_DATE_RANGE_FILTER = { start: null, end: null } | ||
|
|
||
| function useFilteredTransfers({ transactions, tokens }) { | ||
| const [page, setPage] = useState(0) | ||
| const [selectedDateRange, setSelectedDateRange] = useState( | ||
| UNSELECTED_DATE_RANGE_FILTER | ||
| ) | ||
| const [selectedTransferType, setSelectedTransferType] = useState( | ||
| UNSELECTED_TRANSFER_TYPE_FILTER | ||
| ) | ||
| const [selectedToken, setSelectedToken] = useState(UNSELECTED_TOKEN_FILTER) | ||
|
|
||
| useEffect(() => setPage(0), [ | ||
| selectedDateRange, | ||
| selectedTransferType, | ||
| selectedToken, | ||
| ]) | ||
|
|
||
| const handleSelectedDateRangeChange = useCallback(range => { | ||
| setSelectedDateRange(range) | ||
| }, []) | ||
| const handleTokenChange = useCallback(index => { | ||
| const tokenIndex = index === 0 ? UNSELECTED_TOKEN_FILTER : index | ||
| setSelectedToken(tokenIndex) | ||
| }, []) | ||
| const handleTransferTypeChange = useCallback(index => { | ||
| const transferTypeIndex = | ||
| index === 0 ? UNSELECTED_TRANSFER_TYPE_FILTER : index | ||
| setSelectedTransferType(transferTypeIndex) | ||
| }, []) | ||
| const handleClearFilters = useCallback(() => { | ||
| setSelectedTransferType(UNSELECTED_TRANSFER_TYPE_FILTER) | ||
| setSelectedToken(UNSELECTED_TOKEN_FILTER) | ||
| setSelectedDateRange(UNSELECTED_DATE_RANGE_FILTER) | ||
| }, []) | ||
|
|
||
| const tokensToFilter = useMemo(() => [{ symbol: 'All tokens' }, ...tokens], [ | ||
| tokens, | ||
| ]) | ||
|
|
||
| const filteredTransfers = useMemo( | ||
| () => | ||
| transactions.filter(({ date, isIncoming, token }) => { | ||
| const type = isIncoming ? Incoming : Outgoing | ||
| // Exclude by transaction type | ||
| if ( | ||
| selectedTransferType !== -1 && | ||
| TRANSFER_TYPES[selectedTransferType] !== type | ||
| ) { | ||
| return false | ||
| } | ||
| // Filter separately by start and end date. | ||
| if ( | ||
| selectedDateRange.start && | ||
| isBefore(new Date(date), startOfDay(selectedDateRange.start)) | ||
| ) { | ||
| return false | ||
| } | ||
| if ( | ||
| selectedDateRange.end && | ||
| isAfter(new Date(date), endOfDay(selectedDateRange.end)) | ||
| ) { | ||
| return false | ||
| } | ||
| // Exclude by token | ||
| if ( | ||
| selectedToken > 0 && | ||
| !addressesEqual(token, tokensToFilter[selectedToken].address) | ||
| ) { | ||
| return false | ||
| } | ||
|
|
||
| // All good, we can include the transaction ✌️ | ||
| return true | ||
| }), | ||
| [ | ||
| selectedDateRange, | ||
| selectedTransferType, | ||
| selectedToken, | ||
| tokensToFilter, | ||
| transactions, | ||
| ] | ||
| ) | ||
| const symbols = tokensToFilter.map(({ symbol }) => symbol) | ||
| const emptyResultsViaFilters = | ||
| !filteredTransfers && | ||
| (selectedToken > 0 || selectedTransferType > 0 || selectedDateRange.start) | ||
|
|
||
| return { | ||
| emptyResultsViaFilters, | ||
| filteredTransfers, | ||
| handleClearFilters, | ||
| handleSelectedDateRangeChange, | ||
| handleTokenChange, | ||
| handleTransferTypeChange, | ||
| page, | ||
| setPage, | ||
| selectedDateRange, | ||
| selectedToken, | ||
| selectedTransferType, | ||
| symbols, | ||
| transferTypes: TRANSFER_TYPES_LABELS, | ||
| } | ||
| } | ||
|
|
||
| export default useFilteredTransfers |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,14 @@ | ||
| export const All = Symbol('All') | ||
| export const Incoming = Symbol('Incoming') | ||
| export const Outgoing = Symbol('Outgoing') | ||
| export const All = Symbol('ALL_TRANSFER') | ||
| export const Incoming = Symbol('INCOMING_TRANSFER') | ||
| export const Outgoing = Symbol('OUTGOING_TRANSFER') | ||
|
|
||
| const symbolMapping = { | ||
| All, | ||
| Incoming, | ||
| Outgoing, | ||
| } | ||
| const stringMapping = { | ||
| [All]: 'All', | ||
| [Incoming]: 'Incoming', | ||
| [Outgoing]: 'Outgoing', | ||
| } | ||
| const AVAILABLE_TRANSFER_TYPES = [ | ||
| [All, 'All'], | ||
| [Incoming, 'Incoming'], | ||
| [Outgoing, 'Outgoing'], | ||
| ] | ||
|
|
||
| export function convertFromString(str) { | ||
| return symbolMapping[str] | ||
| } | ||
| export function convertToString(symbol) { | ||
| return stringMapping[symbol] | ||
| } | ||
| export const TRANSFER_TYPES = AVAILABLE_TRANSFER_TYPES.map(([type]) => type) | ||
| export const TRANSFER_TYPES_LABELS = AVAILABLE_TRANSFER_TYPES.map( | ||
| ([_, label]) => label | ||
| ) |