Finance: port agent filtering to finance #1102
Conversation
| transferTypes={TRANSFER_TYPES_STRING} | ||
| tokenFilter={selectedToken} | ||
| transferTypeFilter={selectedTransferType} | ||
| transferTypes={READABLE_TRANSFER_TYPES} |
There was a problem hiding this comment.
Perhaps this value should be controlled by useFilteredTransfers(), to encapsulate all the filtering logic to be within it.
It would be bad if we re-ordered the list but forgot to update it here or in that hook, which suggests we should encapsulate the concepts :).
There was a problem hiding this comment.
Perhaps this value should be controlled by useFilteredTransfers(), to encapsulate all the filtering logic to be within it.
Now that I think about it, it makes sense, as symbols is handled by useFilteredTransfers() itself. Now, would we just import the labels and export them back with another name, like this?
There was a problem hiding this comment.
Yep, that's what I would've done!
| return false | ||
| } | ||
|
|
||
| // Case 3: we don't have a start date, but do have an end date. |
There was a problem hiding this comment.
I'm not sure I get these changes...
What I might do instead is filter separately by start date and end date, with isAfter() and isBefore().
E.g.
if (selectedDateRange.start && isBefore(new Date(date), startOfDay(selectedDateRange.start)) {
return false
}
// and vice-versa for the end date| export const TRANSFER_TYPES = Reflect.ownKeys(READABLE_TRANSFER_TYPES) | ||
| export const TRANSFER_TYPES_LABELS = Reflect.ownKeys( | ||
| READABLE_TRANSFER_TYPES | ||
| ).map(type => READABLE_TRANSFER_TYPES[type]) |
There was a problem hiding this comment.
Rather than having to do this, we can instead use an array of tuples and work on that instead.
E.g.
const AVAILABLE_TRANSFER_TYPES = [
[All, 'All'], [Incoming, 'Incoming'], [Outgoing, 'Outgoing']
]
export const TRANSFER_TYPES = AVAILABLE_TRANSFER_TYPES.map(([type]) => type)
export const TRANSFER_TYPES_LABELS = AVAILABLE_TRANSFER_TYPES.map(([_, label]) => label)| @@ -32,10 +32,12 @@ function useFilteredTransfers({ transactions, tokens }) { | |||
| setSelectedDateRange(range) | |||
| }, []) | |||
| const handleTokenChange = useCallback(index => { | |||
| setSelectedToken(index || UNSELECTED_TOKEN_FILTER) | |||
| const tokenIndex = index === 0 ? -1 : index | |||
There was a problem hiding this comment.
| const tokenIndex = index === 0 ? -1 : index | |
| const tokenIndex = index === 0 ? UNSELECTED_TOKEN_FILTER : index |
Maybe this is more clear and uses the constant.
…y, make handlers clearer
* 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
* 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
Closes #1100 .
Ports agent filtering to finance, using hooks and consolidating all state regarding the filters in the
useFilteredTransfershook. Minor modifications were made due to differences in thescript.js, mainly in detecting the transaction type. (Incoming, orOutgoing)