- refactor pagination logic

- update rollups, txns, blocks and batches headings
ten-protocol · Jul 5, 2024 · 7454683 · 7454683
1 parent 1f5c0da
commit 7454683
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 38 deletions.
diff --git a/tools/tenscan/frontend/pages/batches/index.tsx b/tools/tenscan/frontend/pages/batches/index.tsx
@@ -4,6 +4,7 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBatchesService } from "@/src/services/useBatchesService";
+import { firstItem, lastItem } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Batches",
@@ -27,16 +28,20 @@ export default function Batches() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const firstBatchHeight = Number(firstItem(BatchesData, "height"));
+  const lastBatchHeight = Number(lastItem(BatchesData, "height"));
+
   return (
     <Layout>
       <div className="h-full flex-1 flex-col space-y-8 md:flex">
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
-            {BatchesData.length > 0 && (
+            {BatchesData?.length > 0 && (
               <p className="text-sm text-muted-foreground">
-                Showing batches #{BatchesData[0]?.height} to #
-                {BatchesData[BatchesData.length - 1]?.height}
+                Showing batches #{firstBatchHeight}{" "}
+                {lastBatchHeight !== firstBatchHeight &&
+                  "to #" + lastBatchHeight}
                 {/* uncomment the following line when total count feature is implemented */}
                 {/* of {formatNumber(Total)} batches. */}
               </p>

diff --git a/tools/tenscan/frontend/pages/blocks/index.tsx b/tools/tenscan/frontend/pages/blocks/index.tsx
@@ -4,6 +4,7 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { Metadata } from "next";
 import { useBlocksService } from "@/src/services/useBlocksService";
+import { firstItem, lastItem } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Blocks",
@@ -24,17 +25,20 @@ export default function Blocks() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const firstBlockNumber = Number(firstItem(BlocksData, "blockHeader.number"));
+  const lastBlockNumber = Number(lastItem(BlocksData, "blockHeader.number"));
+
   return (
     <Layout>
       <div className="h-full flex-1 flex-col space-y-8 md:flex">
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
-            {BlocksData.length > 0 && (
+            {BlocksData?.length > 0 && (
               <p className="text-sm text-muted-foreground">
-                Showing blocks #{Number(BlocksData[0]?.blockHeader?.number)} to
-                #
-                {Number(BlocksData[BlocksData.length - 1]?.blockHeader?.number)}
+                Showing blocks #{firstBlockNumber}{" "}
+                {lastBlockNumber !== firstBlockNumber &&
+                  "to #" + lastBlockNumber}
                 {/* uncomment the following line when total count feature is implemented */}
                 {/* of {formatNumber(Total)} blocks. */}
               </p>

diff --git a/tools/tenscan/frontend/pages/rollups/index.tsx b/tools/tenscan/frontend/pages/rollups/index.tsx
@@ -4,6 +4,7 @@ import Layout from "@/src/components/layouts/default-layout";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import { Metadata } from "next";
 import { columns } from "@/src/components/modules/rollups/columns";
+import { firstItem, lastItem } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Rollups",
@@ -27,16 +28,19 @@ export default function Rollups() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const firstRollupID = Number(firstItem(RollupsData, "ID"));
+  const lastRollupID = Number(lastItem(RollupsData, "ID"));
+
   return (
     <Layout>
       <div className="h-full flex-1 flex-col space-y-8 md:flex">
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Rollups</h2>
-            {RollupsData.length > 0 && (
+            {RollupsData?.length > 0 && (
               <p className="text-sm text-muted-foreground">
-                Showing rollups #{RollupsData[0]?.ID} to #
-                {RollupsData[RollupsData.length - 1]?.ID}
+                Showing rollups #{firstRollupID}{" "}
+                {lastRollupID !== firstRollupID && "to #" + lastRollupID}
                 {/* uncomment the following line when total count feature is implemented */}
                 {/* of {formatNumber(Total)} rollups. */}
               </p>

diff --git a/tools/tenscan/frontend/pages/transactions/index.tsx b/tools/tenscan/frontend/pages/transactions/index.tsx
@@ -4,7 +4,7 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { useTransactionsService } from "@/src/services/useTransactionsService";
 import { Metadata } from "next";
-import { formatNumber } from "@/src/lib/utils";
+import { firstItem, lastItem } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Transactions",
@@ -32,16 +32,26 @@ export default function Transactions() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const firstBatchHeight = firstItem(TransactionsData, "BatchHeight");
+  const lastBatchHeight = lastItem(TransactionsData, "BatchHeight");
+
   return (
     <Layout>
       <div className="h-full flex-1 flex-col space-y-8 md:flex">
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Transactions</h2>
-            {/* uncomment the following line when total count feature is implemented */}
-            {/* <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Transactions found.
-            </p> */}
+            {TransactionsData?.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing transactions in batch
+                {firstBatchHeight !== lastBatchHeight && "es"} #
+                {firstBatchHeight}{" "}
+                {firstBatchHeight !== lastBatchHeight &&
+                  "to #" + lastBatchHeight}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} transactions. */}
+              </p>
+            )}
           </div>
         </div>
         {TransactionsData ? (

diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table-pagination.tsx
@@ -3,7 +3,7 @@ import {
   ChevronRightIcon,
   DoubleArrowLeftIcon,
 } from "@radix-ui/react-icons";
-import { Table } from "@tanstack/react-table";
+import { PaginationState, Table } from "@tanstack/react-table";
 import { Button } from "@/src/components/ui/button";
 import {
   Select,
@@ -18,11 +18,13 @@ import { useState } from "react";
 interface DataTablePaginationProps<TData> {
   table: Table<TData>;
   refetch?: () => void;
+  setPagination: (pagination: PaginationState) => void;
 }
 
 export function DataTablePagination<TData>({
   table,
   refetch,
+  setPagination,
 }: DataTablePaginationProps<TData>) {
   const [page, setPage] = useState(table.getState().pagination.pageIndex);
 
@@ -53,7 +55,7 @@ export function DataTablePagination<TData>({
             value={`${table.getState().pagination.pageSize}`}
             onValueChange={(value: string) => {
               table.setPageSize(Number(value));
-              refetch?.();
+              setPagination({ pageIndex: 1, pageSize: Number(value) });
             }}
           >
             <SelectTrigger className="h-8 w-[70px]">

diff --git a/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/tenscan/frontend/src/components/modules/common/data-table/data-table.tsx
@@ -63,17 +63,23 @@ export function DataTable<TData, TValue>({
     []
   );
   const [sorting, setSorting] = React.useState<SortingState>([]);
+
   const pagination = React.useMemo(() => {
     return {
-      pageIndex: (Number(query.page) - 1 || 0) + 1,
+      pageIndex: Number(query.page) || 1,
       pageSize: Number(query.size) || 20,
     };
   }, [query.page, query.size]);
 
   const setPagination: OnChangeFn<PaginationState> = (func) => {
     const { pageIndex, pageSize } =
       typeof func === "function" ? func(pagination) : func;
-    const params = { ...query, page: pageIndex, size: pageSize };
+    const newPageIndex = pagination.pageSize !== pageSize ? 1 : pageIndex;
+    const params = {
+      ...query,
+      page: newPageIndex > 0 ? newPageIndex : 1,
+      size: pageSize <= 100 ? pageSize : 100,
+    };
     push({ pathname, query: params });
   };
 
@@ -168,7 +174,11 @@ export function DataTable<TData, TValue>({
         </Table>
       </div>
       {(table.getRowModel().rows.length > 0 || noPagination) && (
-        <DataTablePagination table={table} refetch={refetch} />
+        <DataTablePagination
+          table={table}
+          refetch={refetch}
+          setPagination={setPagination}
+        />
       )}
     </div>
   );

diff --git a/tools/tenscan/frontend/src/lib/constants.ts b/tools/tenscan/frontend/src/lib/constants.ts
@@ -11,25 +11,20 @@ export const pricePollingInterval = 60 * 1000;
 
 export const RESET_COPIED_TIMEOUT = 2000;
 
-export const getOptions = (query: {
-  page?: string | string[];
-  size?: string | string[];
-}) => {
-  const offset =
-    query.page && query.size
-      ? (parseInt(query.page as string, 10) - 1) *
-        parseInt(query.size as string, 10)
-      : 0;
-  const options = {
-    offset: Number.isNaN(offset) ? 0 : offset,
-    size: Number.isNaN(parseInt(query.size as string, 10))
-      ? 20
-      : parseInt(query.size as string, 10),
-    // sort: query.sort ? (query.sort as string) : "blockNumber",
-    // order: query.order ? (query.order as string) : "desc",
-    // filter: query.filter ? (query.filter as string) : "",
+const calculateOffset = (page: number, size: number) => {
+  if (page <= 0) return 0;
+  return (page - 1) * size;
+};
+
+export const getOptions = (query: { page?: number; size?: number }) => {
+  const defaultSize = 20;
+  const size = query.size ? (query.size > 100 ? 100 : query.size) : defaultSize;
+  const page = query.page || 1;
+  const offset = calculateOffset(page, size);
+  return {
+    offset: Number.isNaN(offset) || offset < 0 ? 0 : offset,
+    size,
   };
-  return options;
 };
 
 export const version = process.env.NEXT_PUBLIC_FE_VERSION;

diff --git a/tools/tenscan/frontend/src/lib/utils.ts b/tools/tenscan/frontend/src/lib/utils.ts
@@ -25,3 +25,15 @@ export const formatNumber = (number: string | number) => {
   const num = Number(number);
   return num.toLocaleString();
 };
+
+export const firstItem = <T>(arr: T[], key: keyof T) => {
+  if (!arr.length) return null;
+  if (!arr[0][key]) return null;
+  return arr[0][key];
+};
+
+export const lastItem = <T>(arr: T[], key: keyof T) => {
+  if (!arr.length) return null;
+  if (!arr[0][key]) return null;
+  return arr[arr.length - 1][key];
+};