sort by date in transactions table

This commit is contained in:
Mikhail Mikheev 2019-07-03 19:12:50 +04:00
parent fd74fd3b9a
commit ce65dccd82
2 changed files with 21 additions and 16 deletions

View File

@ -1,8 +1,8 @@
// @flow
import { format } from 'date-fns'
import { format, getTime } from 'date-fns'
import { List } from 'immutable'
import { type Transaction } from '~/routes/safe/store/models/transaction'
import { type SortRow } from '~/components/Table/sorting'
import { type SortRow, buildOrderFieldFrom } from '~/components/Table/sorting'
import { type Column } from '~/components/Table/TableHead'
import { getWeb3 } from '~/logic/wallets/getWeb3'
@ -31,14 +31,19 @@ export const formatDate = (date: Date): string => format(date, 'MMM D, YYYY - h:
export type TransactionRow = SortRow<TxData>
export const getTxTableData = (transactions: List<Transaction>): List<TransactionRow> => {
const rows = transactions.map((tx: Transaction) => ({
[TX_TABLE_NONCE_ID]: tx.nonce,
[TX_TABLE_TYPE_ID]: 'Outgoing transfer',
[TX_TABLE_DATE_ID]: formatDate(tx.isExecuted ? tx.executionDate : tx.submissionDate),
[TX_TABLE_AMOUNT_ID]: Number(tx.value) > 0 ? `${fromWei(toBN(tx.value), 'ether')} ${tx.symbol}` : 'n/a',
[TX_TABLE_STATUS_ID]: tx.isExecuted ? 'success' : 'awaiting',
[TX_TABLE_RAW_TX_ID]: tx,
}))
const rows = transactions.map((tx: Transaction) => {
const txDate = tx.isExecuted ? tx.executionDate : tx.submissionDate
return {
[TX_TABLE_NONCE_ID]: tx.nonce,
[TX_TABLE_TYPE_ID]: 'Outgoing transfer',
[TX_TABLE_DATE_ID]: formatDate(tx.isExecuted ? tx.executionDate : tx.submissionDate),
[buildOrderFieldFrom(TX_TABLE_DATE_ID)]: getTime(txDate),
[TX_TABLE_AMOUNT_ID]: Number(tx.value) > 0 ? `${fromWei(toBN(tx.value), 'ether')} ${tx.symbol}` : 'n/a',
[TX_TABLE_STATUS_ID]: tx.isExecuted ? 'success' : 'awaiting',
[TX_TABLE_RAW_TX_ID]: tx,
}
})
return rows
}
@ -73,8 +78,8 @@ export const generateColumns = () => {
const dateColumn: Column = {
id: TX_TABLE_DATE_ID,
order: false,
disablePadding: false,
order: true,
label: 'Date',
custom: false,
}

View File

@ -17,7 +17,7 @@ import { type Transaction } from '~/routes/safe/store/models/transaction'
import { type Owner } from '~/routes/safe/store/models/owner'
import ExpandedTxComponent from './ExpandedTx'
import {
getTxTableData, generateColumns, TX_TABLE_NONCE_ID, type TransactionRow, TX_TABLE_RAW_TX_ID,
getTxTableData, generateColumns, TX_TABLE_DATE_ID, type TransactionRow, TX_TABLE_RAW_TX_ID,
} from './columns'
import { styles } from './style'
import Status from './Status'
@ -62,7 +62,7 @@ const TxsTable = ({
<Block className={classes.container}>
<Table
label="Transactions"
defaultOrderBy={TX_TABLE_NONCE_ID}
defaultOrderBy={TX_TABLE_DATE_ID}
defaultOrder="desc"
columns={columns}
data={filteredData}
@ -73,8 +73,8 @@ const TxsTable = ({
<React.Fragment key={index}>
<TableRow
tabIndex={-1}
className={cn(classes.row, expandedTx === row.nonce && classes.expandedRow)}
onClick={() => handleTxExpand(row.nonce)}
className={cn(classes.row, expandedTx === row.tx.id && classes.expandedRow)}
onClick={() => handleTxExpand(row.tx.id)}
>
{autoColumns.map((column: Column) => (
<TableCell
@ -103,7 +103,7 @@ const TxsTable = ({
className={classes.extendedTxContainer}
>
<Collapse
in={expandedTx === row.nonce}
in={expandedTx === row.tx.id}
timeout="auto"
component={ExpandedTxComponent}
unmountOnExit