refactor txs sort

lib/tx/sortTxs.ts

-import type { TransactionsResponse } from 'types/api/transaction';
+import type { Transaction } 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;
+const sortTxs = (sorting?: Sort) => (tx1: Transaction, tx2: Transaction) => {
   switch (sorting) {
     case 'val-desc':
-      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx1.value, tx2.value));
-      break;
+      return compareBns(tx1.value, tx2.value);
     case 'val-asc':
-      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx2.value, tx1.value));
-      break;
+      return compareBns(tx2.value, tx1.value);
     case 'fee-desc':
-      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx1.fee.value, tx2.fee.value));
-      break;
+      return compareBns(tx1.fee.value, tx2.fee.value);
     case 'fee-asc':
-      sortedTxs = [ ...txs ].sort((tx1, tx2) => compareBns(tx2.fee.value, tx1.fee.value));
-      break;
+      return compareBns(tx2.fee.value, tx1.fee.value);
     default:
-      sortedTxs = txs;
+      return 0;
   }
+};
 
-  return sortedTxs;
-}
+export default sortTxs;

ui/txs/TxsContent.tsx

 import { Text, Box, Show, Hide } from '@chakra-ui/react';
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 
 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 useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 
 import TxsHeader from './TxsHeader';
+import TxsListItem from './TxsListItem';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
 import TxsSkeletonMobile from './TxsSkeletonMobile';
-import TxsWithSort from './TxsWithSort';
+import TxsTable from './TxsTable';
+import useTxsSort from './useTxsSort';
 
 type Props = {
   queryName: QueryKeys.txsPending | QueryKeys.txsValidate | QueryKeys.blockTxs;
@@ -27,66 +27,41 @@ const TxsContent = ({
   stateFilter,
   apiPath,
 }: Props) => {
-  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') => () => {
-    setSorting((prevVal) => {
-      let newVal: Sort = '';
-      if (field === 'val') {
-        if (prevVal === 'val-asc') {
-          newVal = '';
-        } else if (prevVal === 'val-desc') {
-          newVal = 'val-asc';
-        } else {
-          newVal = 'val-desc';
-        }
-      }
-      if (field === 'fee') {
-        if (prevVal === 'fee-asc') {
-          newVal = '';
-        } else if (prevVal === 'fee-desc') {
-          newVal = 'fee-asc';
-        } else {
-          newVal = 'fee-desc';
-        }
-      }
-      cookies.set(cookies.NAMES.TXS_SORT, newVal);
-      return newVal;
-    });
-  }, [ ]);
-
   const {
-    data,
-    isLoading,
-    isError,
     pagination,
+    ...queryResult
   } = useQueryWithPages({
     apiPath,
     queryName,
     filters: stateFilter ? { filter: stateFilter } : undefined,
   });
   // } = useQueryWithPages({ ...filters, filter: stateFilter, apiPath });
+  const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(queryResult);
 
   const content = (() => {
     if (isError) {
       return <DataFetchAlert/>;
     }
 
-    const txs = data?.items;
-
-    if (!isLoading && !txs?.length) {
-      return <Text as="span">There are no transactions.</Text>;
+    if (isLoading) {
+      return (
+        <>
+          <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
+          <Hide below="lg" ssr={ false }><TxsSkeletonDesktop/></Hide>
+        </>
+      );
     }
 
-    if (!isLoading && txs) {
-      return <TxsWithSort txs={ txs } sorting={ sorting } sort={ sort }/>;
+    const txs = data.items;
+
+    if (!txs.length) {
+      return <Text as="span">There are no transactions.</Text>;
     }
 
     return (
       <>
-        <Show below="lg" ssr={ false }><TxsSkeletonMobile/></Show>
-        <Hide below="lg" ssr={ false }><TxsSkeletonDesktop/></Hide>
+        <Show below="lg" ssr={ false }><Box>{ txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
+        <Hide below="lg" ssr={ false }><TxsTable txs={ txs } sort={ setSortByField } sorting={ sorting }/></Hide>
       </>
     );
   })();
@@ -94,7 +69,7 @@ const TxsContent = ({
   return (
     <>
       { showDescription && <Box mb={{ base: 6, lg: 12 }}>Only the first 10,000 elements are displayed</Box> }
-      <TxsHeader mt={ -6 } sorting={ sorting } setSorting={ setSorting } paginationProps={ pagination }/>
+      <TxsHeader mt={ -6 } sorting={ sorting } setSorting={ setSortByValue } paginationProps={ pagination }/>
       { content }
     </>
   );

ui/txs/TxsHeader.tsx

@@ -14,7 +14,7 @@ import TxsSorting from 'ui/txs/TxsSorting';
 
 type Props = {
   sorting: Sort;
-  setSorting: (val: Sort | ((val: Sort) => Sort)) => void;
+  setSorting: (val: Sort) => void;
   paginationProps: PaginationProps;
   className?: string;
 }

ui/txs/TxsSorting.tsx

@@ -11,13 +11,12 @@ import React from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
-import * as cookies from 'lib/cookies';
 import SortButton from 'ui/shared/SortButton';
 
 interface Props {
   isActive: boolean;
   sorting: Sort;
-  setSorting: (val: Sort | ((val: Sort) => Sort)) => void;
+  setSorting: (val: Sort) => void;
 }
 
 const SORT_OPTIONS = [
@@ -32,14 +31,8 @@ const TxsSorting = ({ isActive, sorting, setSorting }: Props) => {
   const { isOpen, onToggle } = useDisclosure();
 
   const setSortingFromMenu = React.useCallback((val: string | Array<string>) => {
-    setSorting((prevVal: Sort) => {
-      let newVal: Sort = '';
-      if (val !== prevVal) {
-        newVal = val as Sort;
-      }
-      cookies.set(cookies.NAMES.TXS_SORT, newVal);
-      return newVal;
-    });
+    const value = val as Sort | Array<Sort>;
+    setSorting(Array.isArray(value) ? value[0] : value);
   }, [ setSorting ]);
 
   return (

ui/txs/TxsWithSort.tsx

-import { Box, Show, Hide } from '@chakra-ui/react';
-import React, { useEffect, useState } from 'react';
-
-import type { TransactionsResponse } from 'types/api/transaction';
-import type { Sort } from 'types/client/txs-sort';
-
-import sortTxs from 'lib/tx/sortTxs';
-
-import TxsListItem from './TxsListItem';
-import TxsTable from './TxsTable';
-
-type Props = {
-  txs: TransactionsResponse['items'];
-  sorting?: Sort;
-  sort: (field: 'val' | 'fee') => () => void;
-}
-
-const TxsWithSort = ({
-  txs,
-  sorting,
-  sort,
-}: Props) => {
-  const [ sortedTxs, setSortedTxs ] = useState<TransactionsResponse['items']>(sortTxs(txs, sorting));
-
-  useEffect(() => {
-    setSortedTxs(sortTxs(txs, sorting));
-  }, [ sorting, txs ]);
-
-  return (
-    <>
-      <Show below="lg" ssr={ false }><Box>{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
-      <Hide below="lg" ssr={ false }><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Hide>
-    </>
-  );
-
-};
-
-export default TxsWithSort;

ui/txs/useTxsSort.tsx

+import type { UseQueryResult } from '@tanstack/react-query';
+import React from 'react';
+
+import type { BlockTransactionsResponse } from 'types/api/block';
+import type { TransactionsResponsePending, TransactionsResponseValidated } from 'types/api/transaction';
+import type { Sort } from 'types/client/txs-sort';
+
+import * as cookies from 'lib/cookies';
+import sortTxs from 'lib/tx/sortTxs';
+
+type TxsResponse = TransactionsResponseValidated | TransactionsResponsePending | BlockTransactionsResponse;
+
+type HookResult = UseQueryResult<TxsResponse> & {
+  sorting: Sort;
+  setSortByField: (field: 'val' | 'fee') => () => void;
+  setSortByValue: (value: Sort) => void;
+}
+
+export default function useTxsSort(
+  queryResult: UseQueryResult<TxsResponse>,
+): HookResult {
+
+  const [ sorting, setSorting ] = React.useState<Sort>(cookies.get(cookies.NAMES.TXS_SORT) as Sort);
+
+  const setSortByField = React.useCallback((field: 'val' | 'fee') => () => {
+    setSorting((prevVal) => {
+      let newVal: Sort = '';
+      if (field === 'val') {
+        if (prevVal === 'val-asc') {
+          newVal = '';
+        } else if (prevVal === 'val-desc') {
+          newVal = 'val-asc';
+        } else {
+          newVal = 'val-desc';
+        }
+      }
+      if (field === 'fee') {
+        if (prevVal === 'fee-asc') {
+          newVal = '';
+        } else if (prevVal === 'fee-desc') {
+          newVal = 'fee-asc';
+        } else {
+          newVal = 'fee-desc';
+        }
+      }
+      cookies.set(cookies.NAMES.TXS_SORT, newVal);
+      return newVal;
+    });
+  }, [ ]);
+
+  const setSortByValue = React.useCallback((value: Sort) => {
+    setSorting((prevVal: Sort) => {
+      let newVal: Sort = '';
+      if (value !== prevVal) {
+        newVal = value as Sort;
+      }
+      cookies.set(cookies.NAMES.TXS_SORT, newVal);
+      return newVal;
+    });
+  }, []);
+
+  return React.useMemo(() => {
+    if (queryResult.isError || queryResult.isLoading) {
+      return { ...queryResult, setSortByField, setSortByValue, sorting };
+    }
+
+    return {
+      ...queryResult,
+      data: { ...queryResult.data, items: queryResult.data.items.slice().sort(sortTxs(sorting)) },
+      setSortByField,
+      setSortByValue,
+      sorting,
+    };
+  }, [ queryResult, setSortByField, setSortByValue, sorting ]);
+
+}