/block/[ht]/page.tsx now correctly uses prefetching + suspense. remov…

…ed more default exports.

src/app/block/[ht]/page.tsx

@@ -1,10 +1,7 @@
-"use client";
-
 import { type FC } from "react";
-import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
-import { BlockData } from "@/lib/validators/search";
-import Block from "@/components/Block";
+import { Block } from "@/components/Block";
+import { getBlock } from "@/components/Block/getBlock";
+import { getQueryClient } from "@/lib/utils";
 
 interface PageProps {
   params: {
@@ -15,53 +12,30 @@ interface PageProps {
 const Page : FC<PageProps> = ({ params }) => {
   const { ht } = params;
 
-  const { data: blockData , isError, isPending, isSuccess } = useQuery({
-    queryFn: async () => {
-      console.log(`Fetching: GET /api/block?q=${ht}`);
-      const { data } = await axios.get(`/api/block?q=${ht}`);
-      console.log("Fetching result:", data);
-      const result = BlockData.safeParse(data);
-      if (result.success) {
-        return result.data;
-      } else {
-        throw new Error(result.error.message);
-      }
-    },
+  const queryClient = getQueryClient();
+
+  const endpoint = "/api/block/";
+  const queryName = "htQuery";
+  const errorMessage = "Failed to query block with provided height, please check height or try a different query";
+
+  queryClient.prefetchQuery({
+    queryFn: () => getBlock({ endpoint, ht }),
     queryKey: ["htQuery", ht],
-    retry: false,
     meta: {
-      errorMessage: "Failed to find block event with provided height. Please check height or try a different query.",
+      errorMessage,
     },
   });
 
-  if (isPending) {
-    return (
-      <div className="bg-primary rounded-sm shadow-md">
-        <h1 className="text-lg font-semibold">Loading...</h1>
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="bg-primary py-5 flex justify-center">
-        <h1 className="text-4xl font-semibold">No results found.</h1>
-      </div>
-    );
-  }
-
-  if (isSuccess) {
-    return (
-      <div className="bg-primary rounded-sm shadow-md">
-        <div className="flex flex-col gap-5 pt-5 items-center">
-          <h1 className="sm:text-2xl text-lg font-bold">Block Summary</h1>
-          <div className="sm:w-11/12 w-full">
-            <Block height={ht} {...blockData}/>
-          </div>
+  return (
+    <div className="bg-primary rounded-sm shadow-md">
+      <div className="flex flex-col gap-5 pt-5 items-center">
+        <h1 className="sm:text-2xl text-lg font-bold">Block Summary</h1>
+        <div className="sm:w-11/12 w-full">
+          <Block {...{endpoint, queryName, ht }}/>
         </div>
       </div>
-    );
-  }
+    </div>
+  );
 };
 
 export default Page;

src/app/transaction/[hash]/page.tsx

@@ -1,8 +1,7 @@
-// "use client";
 import { type FC } from "react";
 import { HydrationBoundary, dehydrate } from "@tanstack/react-query";
 import { Transaction } from "@/components/Transaction";
-import getTransaction from "@/components/Transaction/getTransaction";
+import { getTransaction } from "@/components/Transaction/getTransaction";
 import { getQueryClient } from "@/lib/utils";
 
 interface PageProps {

src/components/Block/getBlock.ts

@@ -0,0 +1,14 @@
+import { BlockData } from "@/lib/validators/search";
+
+export async function getBlock({ endpoint, ht } : { endpoint: string, ht: string}) {
+  console.log(`Fetching: GET ${endpoint}?q=${ht}`);
+  const res = await fetch(`http://localhost:3000${endpoint}?q=${ht}`, { method: "GET" });
+  const json = await res.json();
+  console.log("Fetched Result:", json);
+  const result = BlockData.safeParse(json);
+  if (result.success) {
+    return result.data;
+  } else {
+    throw new Error(result.error.message);
+  }
+}

src/components/Block/index.tsx

@@ -1,21 +1,32 @@
-import { type BlockDataPayload } from "@/lib/validators/search";
+"use client";
+
 import Link from "next/link";
 import { type FC } from "react";
 import ABCIEventsTable from "../ABCIEventsTable";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getBlock } from "./getBlock";
 
-
-interface BlockProps extends BlockDataPayload {
-  height: string
+interface BlockProps {
+  endpoint: string,
+  queryName: string,
+  ht: string,
 }
 
-// TODO: Similar to TransactionEvent, it looks increasingly likely that tanstack/table will actually work here so pulling out different DataTable representations will need to happen.
-const Block : FC<BlockProps> = ({ height, created_at, tx_hashes, events }) => {
+export const Block : FC<BlockProps> = ({ endpoint, queryName, ht }) => {
+
+  const { data } = useSuspenseQuery({
+    queryKey: [queryName, ht],
+    queryFn: () => getBlock({ endpoint, ht }),
+  });
+
+  const { created_at, tx_hashes, events } = data;
+
   return (
     <div>
       <div className="flex flex-wrap justify-between sm:p-5 p-2 sm:gap-y-10 gap-y-5 w-full">
         <div className="flex flex-wrap justify-start w-full">
           <p className="sm:w-1/6 w-full font-semibold">Block Height</p>
-          <pre className="sm:w-0 w-full">{height}</pre>
+          <pre className="sm:w-0 w-full">{ht}</pre>
         </div>
         <div className="flex flex-wrap justify-start w-full">
           <p className="w-1/6 font-semibold">Timestamp</p>
@@ -40,5 +51,3 @@ const Block : FC<BlockProps> = ({ height, created_at, tx_hashes, events }) => {
     </div>
   );
 };
-
-export default Block;

src/components/Transaction/getTransaction.ts

@@ -1,7 +1,7 @@
 import { TransactionData } from "@/lib/validators/search";
 
-export default async function getTransaction({ endpoint, hash } : { endpoint: string, hash: string}) {
-  console.log(`Fetching: POST ${endpoint}?q=${hash}`);
+export async function getTransaction({ endpoint, hash } : { endpoint: string, hash: string}) {
+  console.log(`Fetching: GET ${endpoint}?q=${hash}`);
   const res = await fetch(`http://localhost:3000${endpoint}?q=${hash}`, { method: "GET" });
   const json = await res.json();
   console.log("Fetched Result:", json);

src/components/Transaction/index.tsx

@@ -5,10 +5,9 @@ import Link from "next/link";
 import { type FC } from "react";
 import { TransactionView } from "../TransactionView";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import getTransaction from "./getTransaction";
+import { getTransaction } from "./getTransaction";
 
 interface TransactionProps {
-  // txData: TransactionDataPayload
   endpoint: string,
   queryName: string,
   hash: string,