Merge pull request #129 from ergoplatform/i126/add_sorting_on_mempool…

…_page Add sorting on mempool page
ergoplatform · Nov 11, 2021 · c93497d · c93497d
2 parents 5f119bc + 13b5031
commit c93497d
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 4 deletions.
diff --git a/...table/unconfirmed-transactions-header/unconfirmed-transactions-table-header.component.tsx b/...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
@@ -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,