Skip to content

Commit

Permalink
handle pagination and filter clearing
Browse files Browse the repository at this point in the history
  • Loading branch information
Jennievon committed Jul 5, 2024
1 parent b9598ab commit 3291203
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 40 deletions.
50 changes: 24 additions & 26 deletions tools/tenscan/frontend/pages/batch/txs/[fullHash].tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { fetchBatchTransactions } from "@/api/batches";
import Layout from "@/src/components/layouts/default-layout";
import { DataTable } from "@/src/components/modules/common/data-table/data-table";
import EmptyState from "@/src/components/modules/common/empty-state";
import { columns } from "@/src/components/modules/batches/transaction-columns";
import {
Card,
Expand All @@ -13,6 +12,7 @@ import {
import { useQuery } from "@tanstack/react-query";
import { useRouter } from "next/router";
import { getOptions } from "@/src/lib/constants";
import TruncatedAddress from "@/src/components/modules/common/truncated-address";

export default function BatchTransactions() {
const router = useRouter();
Expand All @@ -31,32 +31,30 @@ export default function BatchTransactions() {

return (
<Layout>
{TransactionsData ? (
<Card className="col-span-3">
<CardHeader>
<CardTitle>Transactions</CardTitle>
<CardDescription>
Overview of transactions at batch{" "}
{"#" + TransactionsData[0]?.BatchHeight}
</CardDescription>
</CardHeader>
<CardContent>
<DataTable
columns={columns}
data={TransactionsData}
refetch={refetch}
total={+Total}
isLoading={isLoading}
noPagination={true}
<Card className="col-span-3">
<CardHeader>
<CardTitle>Transactions</CardTitle>
<CardDescription className="flex items-center space-x-2">
<p>Overview of all transactions in this batch:</p>
<TruncatedAddress
address={fullHash as string}
showCopy={false}
link={"/batch/" + fullHash}
/>
</CardContent>
</Card>
) : (
<EmptyState
title="No transactions found"
description="There are no transactions in this batch."
/>
)}
</CardDescription>
</CardHeader>
<CardContent>
<DataTable
columns={columns}
data={TransactionsData}
refetch={refetch}
total={+Total}
isLoading={isLoading}
noResultsMessage="No transactions found in this batch."
noPagination={true}
/>
</CardContent>
</Card>
</Layout>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ interface DataTableProps<TData, TValue> {
isLoading?: boolean;
noPagination?: boolean;
noResultsWord?: string;
noResultsMessage?: string;
}

export function DataTable<TData, TValue>({
Expand All @@ -57,6 +58,7 @@ export function DataTable<TData, TValue>({
isLoading,
noPagination,
noResultsWord,
noResultsMessage,
}: DataTableProps<TData, TValue>) {
const { query, push, pathname } = useRouter();
const [rowSelection, setRowSelection] = React.useState({});
Expand Down Expand Up @@ -171,26 +173,33 @@ export function DataTable<TData, TValue>({
colSpan={columns.length}
className="h-24 text-center"
>
<p>
No {noResultsWord || "results"} found for the selected
filters.
<Button
variant={"link"}
onClick={() => {
setPagination({ pageIndex: 1, pageSize: 20 });
refetch?.();
}}
>
Clear Filters
</Button>
</p>
{pagination.pageIndex > 1 ? (
<p>
No {noResultsWord || "results"} found for the selected
filters.
<Button
variant={"link"}
onClick={() => {
setPagination({ pageIndex: 1, pageSize: 20 });
refetch?.();
}}
>
Clear Filters
</Button>
</p>
) : (
<p>
{noResultsMessage ||
`No ${noResultsWord || "results"} found.`}
</p>
)}
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
{data && (table?.getRowModel()?.rows?.length > 0 || noPagination) && (
{(data || isLoading) && !noPagination && (
<DataTablePagination
table={table}
refetch={refetch}
Expand Down

0 comments on commit 3291203

Please sign in to comment.