diff --git a/src/components/unconfirmed-transactions-table/unconfirmed-transactions-header/unconfirmed-transactions-table-header.component.tsx b/src/components/unconfirmed-transactions-table/unconfirmed-transactions-header/unconfirmed-transactions-table-header.component.tsx index 05242e9c..ee9a2efd 100644 --- a/src/components/unconfirmed-transactions-table/unconfirmed-transactions-header/unconfirmed-transactions-table-header.component.tsx +++ b/src/components/unconfirmed-transactions-table/unconfirmed-transactions-header/unconfirmed-transactions-table-header.component.tsx @@ -1,6 +1,13 @@ import React from 'react'; +import queryString from 'query-string'; import { FormattedMessage } from 'react-intl'; -import { RouteComponentProps, withRouter } from 'react-router-dom'; +import { Link, RouteComponentProps, withRouter } from 'react-router-dom'; + +import { + SortDirectionAscIcon, + SortDirectionDescIcon, + SortDirectionIcon, +} from '../../common/icons/common.icons'; import './unconfirmed-transactions-table-header.scss'; @@ -15,7 +22,16 @@ class UnconfirmedTransactionsTableHeader extends React.Component< </div> <div className="bi-blocks-table__cell bi-table__cell"> - <FormattedMessage id="components.unconfirmed-transactions.creation-timestamp" /> + <Link + className={this.getSortDirectionClassName('creationtimestamp')} + to={`/mempool?${this.getSortLink('creationtimestamp')}`} + > + <FormattedMessage id="components.unconfirmed-transactions.creation-timestamp" /> + + <SortDirectionIcon className="bi-blocks-table-header__sort-icon" /> + <SortDirectionAscIcon className="bi-blocks-table-header__sort-icon bi-blocks-table-header__sort-icon--asc" /> + <SortDirectionDescIcon className="bi-blocks-table-header__sort-icon bi-blocks-table-header__sort-icon--desc" /> + </Link> </div> <div className="bi-blocks-table__cell bi-table__cell"> @@ -27,11 +43,63 @@ class UnconfirmedTransactionsTableHeader extends React.Component< </div> <div className="bi-blocks-table__cell bi-table__cell"> - <FormattedMessage id="common.block.size" /> + <Link + className={this.getSortDirectionClassName('size')} + to={`/mempool?${this.getSortLink('size')}`} + > + <FormattedMessage id="common.block.size" /> + + <SortDirectionIcon className="bi-blocks-table-header__sort-icon" /> + <SortDirectionAscIcon className="bi-blocks-table-header__sort-icon bi-blocks-table-header__sort-icon--asc" /> + <SortDirectionDescIcon className="bi-blocks-table-header__sort-icon bi-blocks-table-header__sort-icon--desc" /> + </Link> </div> </div> ); } + + private getSortDirectionClassName(sortedColumn: string): string { + const { sortBy, sortDirection } = queryString.parse( + this.props.history.location.search + ); + const classNames = [ + 'bi-blocks-table-header__sort', + 'u-word-wrap u-word-wrap--ellipsis', + ]; + + if (sortBy === sortedColumn && sortDirection) { + classNames.push(`bi-blocks-table-header__sort--${sortDirection}`); + } + + return classNames.join(' '); + } + + private getSortLink(sortedColumn: string): string { + const params = queryString.parse(this.props.history.location.search); + + const { sortBy, sortDirection } = params; + + let newSortDirection: string | null = 'asc'; + if (sortBy === sortedColumn && sortDirection === 'desc') { + return queryString.stringify({ + ...params, + offset: undefined, + sortBy: undefined, + sortDirection: undefined, + }); + } + + if (sortBy === sortedColumn && sortDirection !== 'desc') { + newSortDirection = 'desc'; + } + + return queryString.stringify({ + ...params, + offset: undefined, + sortBy: sortedColumn, + sortDirection: newSortDirection, + }); + } } export const UnconfirmedTransactionsTableHeaderComponent = withRouter( diff --git a/src/pages/unconfirmed-transactions/unconfirmed-transactions.component.tsx b/src/pages/unconfirmed-transactions/unconfirmed-transactions.component.tsx index 4ade3fee..88a18e77 100644 --- a/src/pages/unconfirmed-transactions/unconfirmed-transactions.component.tsx +++ b/src/pages/unconfirmed-transactions/unconfirmed-transactions.component.tsx @@ -171,7 +171,7 @@ class UnconfirmedTransactions extends React.PureComponent<IDataProps> { sortDirection = ['asc', 'desc'].includes(sortDirection) ? sortDirection : null; - sortBy = ['creationTimestamp', 'size'].includes(sortBy) ? sortBy : null; + sortBy = ['creationtimestamp', 'size'].includes(sortBy) ? sortBy : null; return { limit,