Merge pull request #283 from blockscout/txs-sorting-cookie

txs sorting cookie

lib/cookies.ts

@@ -6,6 +6,7 @@ import isBrowser from './isBrowser';
 export enum NAMES {
   NAV_BAR_COLLAPSED='nav_bar_collapsed',
   API_TOKEN='_explorer_key',
+  TXS_SORT='txs_sort',
 }
 
 export function get(name?: string | undefined | null) {

lib/tx/sortTxs.ts

+import type { TransactionsResponse } from 'types/api/transaction';
+import type { Sort } from 'types/client/txs-sort';
+
+import compareBns from 'lib/bigint/compareBns';
+
+export default function sortTxs(txs: TransactionsResponse['items'], sorting?: Sort) {
+  let sortedTxs;
+  switch (sorting) {
+    case 'val-desc':
+      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx1.value, tx2.value));
+      break;
+    case 'val-asc':
+      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx2.value, tx1.value));
+      break;
+    case 'fee-desc':
+      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx1.fee.value, tx2.fee.value));
+      break;
+    case 'fee-asc':
+      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx2.fee.value, tx1.fee.value));
+      break;
+    default:
+      sortedTxs = txs;
+  }
+
+  return sortedTxs;
+}

types/client/txs-sort.ts

-export type Sort = 'val-desc' | 'val-asc' | 'fee-desc' | 'fee-asc' | undefined;
+export type Sort = 'val-desc' | 'val-asc' | 'fee-desc' | 'fee-asc' | '';

ui/txs/TxsContent.tsx

@@ -5,6 +5,7 @@ import type { TTxsFilters } from 'types/api/txsFilters';
 import type { QueryKeys } from 'types/client/queries';
 import type { Sort } from 'types/client/txs-sort';
 
+import * as cookies from 'lib/cookies';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 // import FilterInput from 'ui/shared/FilterInput';
@@ -30,32 +31,33 @@ const TxsContent = ({
   stateFilter,
   apiPath,
 }: Props) => {
-  const [ sorting, setSorting ] = useState<Sort>();
+  const [ sorting, setSorting ] = useState<Sort>(cookies.get(cookies.NAMES.TXS_SORT) as Sort || '');
   // const [ filters, setFilters ] = useState<Partial<TTxsFilters>>({ type: [], method: [] });
 
   const sort = useCallback((field: 'val' | 'fee') => () => {
-    if (field === 'val') {
-      setSorting((prevVal => {
+    setSorting((prevVal) => {
+      let newVal: Sort = '';
+      if (field === 'val') {
         if (prevVal === 'val-asc') {
-          return undefined;
+          newVal = '';
+        } else if (prevVal === 'val-desc') {
+          newVal = 'val-asc';
+        } else {
+          newVal = 'val-desc';
         }
-        if (prevVal === 'val-desc') {
-          return 'val-asc';
-        }
-        return 'val-desc';
-      }));
-    }
-    if (field === 'fee') {
-      setSorting((prevVal => {
+      }
+      if (field === 'fee') {
         if (prevVal === 'fee-asc') {
-          return undefined;
-        }
-        if (prevVal === 'fee-desc') {
-          return 'fee-asc';
+          newVal = '';
+        } else if (prevVal === 'fee-desc') {
+          newVal = 'fee-asc';
+        } else {
+          newVal = 'fee-desc';
         }
-        return 'fee-desc';
-      }));
-    }
+      }
+      cookies.set(cookies.NAMES.TXS_SORT, newVal || '');
+      return newVal;
+    });
   }, [ setSorting ]);
 
   const {

ui/txs/TxsTable.tsx

@@ -12,7 +12,7 @@ import TxsTableItem from './TxsTableItem';
 type Props = {
   txs: Array<Transaction>;
   sort: (field: 'val' | 'fee') => () => void;
-  sorting: Sort;
+  sorting?: Sort;
 }
 
 const TxsTable = ({ txs, sort, sorting }: Props) => {

ui/txs/TxsWithSort.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import type { TransactionsResponse } from 'types/api/transaction';
 import type { Sort } from 'types/client/txs-sort';
 
-import compareBns from 'lib/bigint/compareBns';
+import sortTxs from 'lib/tx/sortTxs';
 
 import TxsListItem from './TxsListItem';
 import TxsTable from './TxsTable';
@@ -20,25 +20,10 @@ const TxsWithSort = ({
   sorting,
   sort,
 }: Props) => {
-  const [ sortedTxs, setSortedTxs ] = useState(txs);
+  const [ sortedTxs, setSortedTxs ] = useState<TransactionsResponse['items']>(sortTxs(txs, sorting));
 
   useEffect(() => {
-    switch (sorting) {
-      case 'val-desc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx1.value, tx2.value)));
-        break;
-      case 'val-asc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx2.value, tx1.value)));
-        break;
-      case 'fee-desc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx1.fee.value, tx2.fee.value)));
-        break;
-      case 'fee-asc':
-        setSortedTxs([ ...txs ].sort((tx1, tx2) => compareBns(tx2.fee.value, tx1.fee.value)));
-        break;
-      default:
-        setSortedTxs(txs);
-    }
+    setSortedTxs(sortTxs(txs, sorting));
   }, [ sorting, txs ]);
 
   return (