From 66b5e8f37da4a23a52edd341fd97f187da2a83b0 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Mon, 1 Jul 2024 18:13:34 +0400
Subject: [PATCH] - fix pagination bug - update default size constant to 20 per
 page

---
 tools/tenscan/frontend/api/rollups.ts           |  7 ++++---
 tools/tenscan/frontend/pages/batches/index.tsx  | 17 +++++++++++------
 tools/tenscan/frontend/pages/blocks/index.tsx   | 13 ++++++++-----
 tools/tenscan/frontend/pages/rollups/index.tsx  | 13 ++++++++-----
 tools/tenscan/frontend/src/lib/constants.ts     |  2 +-
 .../frontend/src/services/useRollupsService.ts  |  2 +-
 6 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/tools/tenscan/frontend/api/rollups.ts b/tools/tenscan/frontend/api/rollups.ts
index cff318ced6..eddfc0ed12 100644
--- a/tools/tenscan/frontend/api/rollups.ts
+++ b/tools/tenscan/frontend/api/rollups.ts
@@ -18,12 +18,13 @@ export const fetchLatestRollups = async (
   });
 };
 
-export const fetchRollups = async (): Promise<
-  ResponseDataInterface<RollupsResponse>
-> => {
+export const fetchRollups = async (
+  payload?: Record<string, any>
+): Promise<ResponseDataInterface<RollupsResponse>> => {
   return await httpRequest<ResponseDataInterface<RollupsResponse>>({
     method: "get",
     url: pathToUrl(apiRoutes.getRollups),
+    searchParams: payload,
   });
 };
 
diff --git a/tools/tenscan/frontend/pages/batches/index.tsx b/tools/tenscan/frontend/pages/batches/index.tsx
index a5de7d1b7c..f8d57c07ef 100644
--- a/tools/tenscan/frontend/pages/batches/index.tsx
+++ b/tools/tenscan/frontend/pages/batches/index.tsx
@@ -4,7 +4,6 @@ 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 { formatNumber } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Batches",
@@ -12,7 +11,8 @@ export const metadata: Metadata = {
 };
 
 export default function Batches() {
-  const { batches, refetchBatches, setNoPolling } = useBatchesService();
+  const { batches, refetchBatches, isBatchesLoading, setNoPolling } =
+    useBatchesService();
   const { BatchesData, Total } = batches?.result || {
     BatchesData: [],
     Total: 0,
@@ -33,10 +33,14 @@ export default function Batches() {
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Batches</h2>
-            {/* uncomment the following line when total count feature is implemented */}
-            {/* <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Batch(es) found.
-            </p> */}
+            {BatchesData.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing batches #{BatchesData[0]?.height} to #
+                {BatchesData[BatchesData.length - 1]?.height}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} batches. */}
+              </p>
+            )}
           </div>
         </div>
         {BatchesData ? (
@@ -45,6 +49,7 @@ export default function Batches() {
             data={BatchesData}
             refetch={refetchBatches}
             total={+Total}
+            isLoading={isBatchesLoading}
           />
         ) : (
           <p>Loading...</p>
diff --git a/tools/tenscan/frontend/pages/blocks/index.tsx b/tools/tenscan/frontend/pages/blocks/index.tsx
index 844a2ebd61..a4418d49e1 100644
--- a/tools/tenscan/frontend/pages/blocks/index.tsx
+++ b/tools/tenscan/frontend/pages/blocks/index.tsx
@@ -4,7 +4,6 @@ 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 { formatNumber } from "@/src/lib/utils";
 
 export const metadata: Metadata = {
   title: "Blocks",
@@ -31,10 +30,14 @@ export default function Blocks() {
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Blocks</h2>
-            {/* uncomment the following line when total count feature is implemented */}
-            {/* <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Blocks found.
-            </p> */}
+            {BlocksData.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing blocks #{BlocksData[0]?.height} to #
+                {BlocksData[BlocksData.length - 1]?.height}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} blocks. */}
+              </p>
+            )}
           </div>
         </div>
         {BlocksData ? (
diff --git a/tools/tenscan/frontend/pages/rollups/index.tsx b/tools/tenscan/frontend/pages/rollups/index.tsx
index 954fcb4f1c..b3e51336af 100644
--- a/tools/tenscan/frontend/pages/rollups/index.tsx
+++ b/tools/tenscan/frontend/pages/rollups/index.tsx
@@ -3,7 +3,6 @@ import { DataTable } from "@/src/components/modules/common/data-table/data-table
 import Layout from "@/src/components/layouts/default-layout";
 import { useRollupsService } from "@/src/services/useRollupsService";
 import { Metadata } from "next";
-import { formatNumber } from "@/src/lib/utils";
 import { columns } from "@/src/components/modules/rollups/columns";
 
 export const metadata: Metadata = {
@@ -34,10 +33,14 @@ export default function Rollups() {
         <div className="flex items-center justify-between space-y-2">
           <div>
             <h2 className="text-2xl font-bold tracking-tight">Rollups</h2>
-            {/* uncomment the following line when total count feature is implemented */}
-            {/* <p className="text-sm text-muted-foreground">
-              {formatNumber(Total)} Rollups found.
-            </p> */}
+            {RollupsData.length > 0 && (
+              <p className="text-sm text-muted-foreground">
+                Showing rollups #{RollupsData[0]?.ID} to #
+                {RollupsData[RollupsData.length - 1]?.ID}
+                {/* uncomment the following line when total count feature is implemented */}
+                {/* of {formatNumber(Total)} rollups. */}
+              </p>
+            )}
           </div>
         </div>
         {RollupsData ? (
diff --git a/tools/tenscan/frontend/src/lib/constants.ts b/tools/tenscan/frontend/src/lib/constants.ts
index c0dd94ee4d..c91cef1d1d 100644
--- a/tools/tenscan/frontend/src/lib/constants.ts
+++ b/tools/tenscan/frontend/src/lib/constants.ts
@@ -23,7 +23,7 @@ export const getOptions = (query: {
   const options = {
     offset: Number.isNaN(offset) ? 0 : offset,
     size: Number.isNaN(parseInt(query.size as string, 10))
-      ? 10
+      ? 20
       : parseInt(query.size as string, 10),
     // sort: query.sort ? (query.sort as string) : "blockNumber",
     // order: query.order ? (query.order as string) : "desc",
diff --git a/tools/tenscan/frontend/src/services/useRollupsService.ts b/tools/tenscan/frontend/src/services/useRollupsService.ts
index a6902dcd9c..921267e57f 100644
--- a/tools/tenscan/frontend/src/services/useRollupsService.ts
+++ b/tools/tenscan/frontend/src/services/useRollupsService.ts
@@ -29,7 +29,7 @@ export const useRollupsService = () => {
     refetch: refetchRollups,
   } = useQuery({
     queryKey: ["rollups"],
-    queryFn: () => fetchRollups(),
+    queryFn: () => fetchRollups(options),
     refetchInterval: noPolling ? false : pollingInterval,
   });