updated /blocks components to work with new suspense support

src/app/blocks/page.tsx

@@ -1,13 +1,39 @@
 import BlocksTable from "@/components/BlocksTable";
+import getBlocks from "@/components/BlocksTable/getBlocks";
+import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
 
 export const dynamic = "force-dynamic";
 
 const Page = () => {
+  const queryClient = new QueryClient();
+
+  const defaultQueryOptions = {
+    pageIndex: 0,
+    pageSize: 10,
+  };
+  const queryName = "BlocksTable";
+  const endpoint = "/api/blocks";
+  const errorMessage = "Failed to query data while trying to generate blocks table, please try reloading the page.";
+
+  queryClient.prefetchQuery({
+    queryFn: () => getBlocks({ endpoint, pageIndex: 0}),
+    queryKey: [queryName, defaultQueryOptions],
+    meta: {
+      errorMessage,
+    },
+  });
 
   return (
     <div className="bg-primary flex flex-col gap-5 pt-5">
       <h1 className="sm:text-2xl font-bold self-center">Recent Blocks</h1>
-      <BlocksTable className="self-center sm:w-2/3 w-full"/>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <BlocksTable
+          className="self-center sm:w-2/3 w-full"
+          queryName={queryName}
+          defaultQueryOptions={defaultQueryOptions}
+          endpoint={endpoint}
+          errorMessage={errorMessage}/>
+      </HydrationBoundary>
     </div>
   );
 };

src/components/BlocksTable/getBlocks.ts

@@ -1,5 +1,3 @@
-"use server";
-
 import { BlocksTableQuery } from "@/lib/validators/table";
 
 export default async function getBlocks ({ endpoint, pageIndex } : ({ endpoint: string, pageIndex: number })) {

src/components/BlocksTable/index.tsx

@@ -1,48 +1,64 @@
-"use server";
+"use client";
 
 import { columns } from "./columns";
-import { HydrationBoundary, QueryClient, dehydrate } from "@tanstack/react-query";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { useState } from "react";
 import { PaginatedDataTable } from "../ui/paginated-data-table";
+import { PaginationState, getCoreRowModel, useReactTable } from "@tanstack/react-table";
 import getBlocks from "./getBlocks";
+import { cn } from "@/lib/utils";
 
-export interface BlocksTableRow {
-  height: number,
-  createdAt: Date,
-  // TODO: It would be nice to associate all events with a given row. Need to get testnet setup again and pull in example data for building this out.
-  // events: any[],
-};
+export interface QueryOptions {
+  pageIndex: number,
+  pageSize: number,
+}
+
+interface PaginatedDataTableProps {
+  className?: string,
+  queryName: string,
+  defaultQueryOptions: QueryOptions,
+  endpoint: string,
+  errorMessage: string,
+}
 
-const BlocksTable = async ({ className } : { className: string }) => {
-  const queryClient = new QueryClient();
 
-  const defaultQueryOptions = {
-    pageIndex: 0,
-    pageSize: 10,
-  };
-  const queryName = "BlocksTable";
-  const endpoint = "/api/blocks";
-  const errorMessage = "Failed to query data while trying to generate blocks table, please try reloading the page.";
+export function BlocksTable ({
+  className,
+  queryName,
+  defaultQueryOptions,
+  endpoint,
+  errorMessage,
+} : PaginatedDataTableProps) {
 
-  await queryClient.prefetchQuery({
-    queryFn: async () => await getBlocks({ endpoint, pageIndex: 0}),
-    queryKey: [queryName, defaultQueryOptions],
+  const [pagination, setPagination] = useState<PaginationState>({...defaultQueryOptions});
+
+  const { data } = useSuspenseQuery({
+    queryKey: [queryName, pagination],
+    queryFn: () => getBlocks({ endpoint, pageIndex: pagination.pageIndex }),
     meta: {
       errorMessage,
     },
   });
 
+  const { pages: pageCount, results: tableData } = data ?? { pages: 0, results: []};
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    pageCount,
+    state: {
+      pagination,
+    },
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+  });
+
   return (
-    <HydrationBoundary state={dehydrate(queryClient)}>
-      <PaginatedDataTable
-        className={className}
-        queryName={queryName}
-        defaultQueryOptions={defaultQueryOptions}
-        columns={columns}
-        fetcher={getBlocks}
-        endpoint={endpoint}
-        errorMessage={errorMessage}/>
-    </HydrationBoundary>
+    <div className={cn("", className)}>
+      <PaginatedDataTable table={table} columns={columns}/>
+    </div>
   );
 };
 
-export default BlocksTable;
+export default BlocksTable;