From 745468335bb02ed5c13a3b8f8d55426e6703c612 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Fri, 5 Jul 2024 15:40:06 +0400 Subject: [PATCH] - refactor pagination logic - update rollups, txns, blocks and batches headings --- .../tenscan/frontend/pages/batches/index.tsx | 11 +++++-- tools/tenscan/frontend/pages/blocks/index.tsx | 12 ++++--- .../tenscan/frontend/pages/rollups/index.tsx | 10 ++++-- .../frontend/pages/transactions/index.tsx | 20 +++++++++--- .../data-table/data-table-pagination.tsx | 6 ++-- .../modules/common/data-table/data-table.tsx | 16 ++++++++-- tools/tenscan/frontend/src/lib/constants.ts | 31 ++++++++----------- tools/tenscan/frontend/src/lib/utils.ts | 12 +++++++ 8 files changed, 80 insertions(+), 38 deletions(-) diff --git a/tools/tenscan/frontend/pages/batches/index.tsx b/tools/tenscan/frontend/pages/batches/index.tsx index f8d57c07ef..d3369e1e4f 100644 --- 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 (

Batches

- {BatchesData.length > 0 && ( + {BatchesData?.length > 0 && (

- 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. */}

diff --git a/tools/tenscan/frontend/pages/blocks/index.tsx b/tools/tenscan/frontend/pages/blocks/index.tsx index 8909009803..c01aa22616 100644 --- 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 (

Blocks

- {BlocksData.length > 0 && ( + {BlocksData?.length > 0 && (

- 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. */}

diff --git a/tools/tenscan/frontend/pages/rollups/index.tsx b/tools/tenscan/frontend/pages/rollups/index.tsx index b3e51336af..40dc17626c 100644 --- 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 (

Rollups

- {RollupsData.length > 0 && ( + {RollupsData?.length > 0 && (

- 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. */}

diff --git a/tools/tenscan/frontend/pages/transactions/index.tsx b/tools/tenscan/frontend/pages/transactions/index.tsx index 40623e17d3..8b8490bcae 100644 --- 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 (

Transactions

- {/* uncomment the following line when total count feature is implemented */} - {/*

- {formatNumber(Total)} Transactions found. -

*/} + {TransactionsData?.length > 0 && ( +

+ 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. */} +

+ )}
{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 index 967b6f46fd..99e52837b7 100644 --- 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 { table: Table; refetch?: () => void; + setPagination: (pagination: PaginationState) => void; } export function DataTablePagination({ table, refetch, + setPagination, }: DataTablePaginationProps) { const [page, setPage] = useState(table.getState().pagination.pageIndex); @@ -53,7 +55,7 @@ export function DataTablePagination({ value={`${table.getState().pagination.pageSize}`} onValueChange={(value: string) => { table.setPageSize(Number(value)); - refetch?.(); + setPagination({ pageIndex: 1, pageSize: Number(value) }); }} > 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 index 44d78ab802..1577337fb8 100644 --- 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,9 +63,10 @@ export function DataTable({ [] ); const [sorting, setSorting] = React.useState([]); + 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]); @@ -73,7 +74,12 @@ export function DataTable({ const setPagination: OnChangeFn = (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({
{(table.getRowModel().rows.length > 0 || noPagination) && ( - + )}
); diff --git a/tools/tenscan/frontend/src/lib/constants.ts b/tools/tenscan/frontend/src/lib/constants.ts index c91cef1d1d..c456eb7bd8 100644 --- 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 index 83fbff0f8f..1cf6c35d27 100644 --- 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 = (arr: T[], key: keyof T) => { + if (!arr.length) return null; + if (!arr[0][key]) return null; + return arr[0][key]; +}; + +export const lastItem = (arr: T[], key: keyof T) => { + if (!arr.length) return null; + if (!arr[0][key]) return null; + return arr[arr.length - 1][key]; +};