Merge pull request #31 from penumbra-zone/pagination-fix

Fixed pagination bug, added `errorMessage` to `PaginatedDataTable` props.
penumbra-zone · Dec 14, 2023 · 597808d · 597808d
2 parents ad6d8d8 + 83b1d05
commit 597808d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 25 deletions.
diff --git a/src/app/api/blocks/route.ts b/src/app/api/blocks/route.ts
@@ -1,13 +1,15 @@
 import db from "@/lib/db";
 
 export async function POST(req: Request) {
-  console.log("incoming POST req on /api/blocks/", req);
+  console.log("POST req on /api/blocks/", req);
   try {
     const url = new URL(req.url);
     const pageParam = url.searchParams.get("page")?.trim() ?? "";
 
     const pageOffset = (parseInt(pageParam, 10)) * 10;
-
+
+    console.log("pageOffset", pageOffset);
+
     const blocksQuery = db.blocks.findMany({
       select: {
         height: true,

diff --git a/src/components/BlocksTable/index.tsx b/src/components/BlocksTable/index.tsx
@@ -2,7 +2,7 @@
 
 import { columns } from "./columns";
 import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
-import { PaginatedDataTable, type TableQueryKey } from "../ui/paginated-data-table";
+import { PaginatedDataTable } from "../ui/paginated-data-table";
 import getBlocks from "./getBlocks";
 
 export interface BlocksTableRow {
@@ -16,24 +16,30 @@ const BlocksTable = async () => {
   const queryClient = new QueryClient();
 
   const defaultQueryOptions = {
-    pageIndex: 1,
+    pageIndex: 0,
     pageSize: 10,
   };
-
-  const queryKey: TableQueryKey = ["BlocksTable", defaultQueryOptions];
+  const queryName = "BlocksTable";
   const endpoint = "/api/blocks";
+  const errorMessage = "Failed to query data while trying to generate blocks table, please try reloading the page.";
 
   await queryClient.prefetchQuery({
     queryFn: async () => await getBlocks({ endpoint, pageIndex: 0}),
-    queryKey,
+    queryKey: [queryName, defaultQueryOptions],
     meta: {
-      errorMessage: "Failed to query data while trying to generate blocks table, please try reloading the page.",
+      errorMessage,
     },
   });
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <PaginatedDataTable queryKey={queryKey} columns={columns} fetcher={getBlocks} endpoint={endpoint}/>
+      <PaginatedDataTable
+        queryName={queryName}
+        defaultQueryOptions={defaultQueryOptions}
+        columns={columns}
+        fetcher={getBlocks}
+        endpoint={endpoint}
+        errorMessage={errorMessage}/>
     </HydrationBoundary>
   );
 };

diff --git a/src/components/TransactionsTable/index.tsx b/src/components/TransactionsTable/index.tsx
@@ -1,6 +1,6 @@
 import { columns } from "./columns";
 import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
-import { PaginatedDataTable, type TableQueryKey } from "../ui/paginated-data-table";
+import { PaginatedDataTable } from "../ui/paginated-data-table";
 import getTransactions from "./getTransactions";
 
 // TODO: resolve these typings and that with zod and how to navigate between them.
@@ -35,24 +35,30 @@ const TransactionsTable = async () => {
   const queryClient = new QueryClient();
 
   const defaultQueryOptions = {
-    pageIndex: 1,
+    pageIndex: 0,
     pageSize: 10,
   };
 
   const endpoint = "/api/transactions";
-  const queryKey: TableQueryKey = ["TransactionsTable", defaultQueryOptions];
-
+  const queryName = "TransactionsTable";
+  const errorMessage = "Failed to query data while trying to generate event table, please try reloading the page.";
   await queryClient.prefetchQuery({
     queryFn: async () => await getTransactions({ endpoint, pageIndex: 0}),
-    queryKey,
+    queryKey: [queryName, defaultQueryOptions],
     meta: {
-      errorMessage: "Failed to query data while trying to generate event table, please try reloading the page.",
+      errorMessage,
     },
   });
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
-      <PaginatedDataTable queryKey={queryKey} columns={columns} endpoint="/api/events" fetcher={getTransactions}/>
+      <PaginatedDataTable
+        queryName={queryName}
+        defaultQueryOptions={defaultQueryOptions}
+        columns={columns}
+        endpoint={endpoint}
+        fetcher={getTransactions}
+        errorMessage={errorMessage}/>
     </HydrationBoundary>
   );
 };

diff --git a/src/components/ui/paginated-data-table.tsx b/src/components/ui/paginated-data-table.tsx
@@ -27,8 +27,6 @@ export interface QueryOptions {
   pageSize: number,
 }
 
-export type TableQueryKey = [string, QueryOptions];
-
 interface FetcherParams {
   endpoint: string,
   pageIndex: number
@@ -38,32 +36,38 @@ type Fetcher<Z extends z.ZodTypeAny> = ({ endpoint, pageIndex} : FetcherParams)
 
 interface PaginatedDataTableProps<TData, TValue, Z extends z.ZodTypeAny> {
   columns: Array<ColumnDef<TData, TValue>>
-  queryKey: TableQueryKey,
+  queryName: string,
+  defaultQueryOptions: QueryOptions,
   endpoint: string,
   fetcher: Fetcher<Z>,
+  errorMessage: string,
 }
 
 export function PaginatedDataTable<TData, TValue, Z extends z.ZodTypeAny>({
   columns,
-  queryKey,
+  queryName,
+  defaultQueryOptions,
   endpoint,
   fetcher,
+  errorMessage,
 }: PaginatedDataTableProps<TData, TValue, Z>) {
 
-  const options = queryKey[1];
+  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({...defaultQueryOptions});
 
-  const [{ pageIndex, pageSize }, setPagination] = useState<PaginationState>({...options});
+  const queryOptions = {
+    pageIndex,
+    pageSize,
+  };
 
   const { data } = useQuery({
-    queryKey,
+    queryKey: [queryName, queryOptions],
     queryFn: async () => await fetcher({ endpoint, pageIndex }),
     meta: {
-      errorMessage: "Failed to query paginated data to populate table. Please try again.",
+      errorMessage,
     },
   });
 
   const [pageCount, tableData] : z.infer<Z> = data ?? [0, []];
-  console.log("pageCount", pageCount);
 
   const pagination = useMemo(
     () => ({