status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/routes/safe/components/TransactionsNew/TxsTable/columns.js
View File

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

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