Merge pull request #161 from penumbra-zone/update-search

Updated /search page and SearchResultsTable to match new stylings.
penumbra-zone · Aug 1, 2024 · 5ede76a · 5ede76a
2 parents dd4d7d8 + 27f3543
commit 5ede76a
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 64 deletions.
diff --git a/src/app/api/search/route.ts b/src/app/api/search/route.ts
@@ -3,8 +3,8 @@ import { sql } from "@pgtyped/runtime";
 import { QueryKind, SearchValidator } from "@/lib/validators/search";
 import { IGetBlockSearchQuery, IGetChannelSearchQuery, IGetClientSearchQuery, IGetConnectionSearchQuery, IGetTransactionSearchQuery } from "./route.types";
 
-export async function POST(req: Request) {
-  console.log("POST req on /api/search");
+export async function GET(req: Request) {
+  console.log("GET req on /api/search");
   try {
     const url = new URL(req.url);
     const queryParam = url.searchParams.get("q")?.trim() ?? "";
@@ -79,6 +79,8 @@ export async function POST(req: Request) {
 
       if (clientSearch.length === 0) return new Response("No results.", { status: 404 });
 
+      console.log("Results found:", { kind: searchQuery.kind, identifier: searchQuery.value, related: clientSearch});
+
       return new Response(JSON.stringify({
         kind: searchQuery.kind,
         identifier: searchQuery.value,

diff --git a/src/app/search/[query]/page.tsx b/src/app/search/[query]/page.tsx
@@ -1,8 +1,6 @@
-"use client";
 import SearchResultsTable from "@/components/SearchResultsTable";
-// import { SearchResultValidator } from "@/lib/validators/search";
-import { useQuery } from "@tanstack/react-query";
-import axios from "axios";
+import { getBaseURL, getQueryClient } from "@/lib/utils";
+import { dehydrate, HydrationBoundary } from "@tanstack/react-query";
 import { type FC } from "react";
 
 interface PageProps {
@@ -13,43 +11,27 @@ interface PageProps {
 
 const Page : FC<PageProps> = ({ params }) => {
   const { query } = params;
+  const queryClient = getQueryClient();
 
-  const { data: searchResultData , isError } = useQuery({
+  queryClient.prefetchQuery({
     queryFn: async () => {
-      console.log(`Fetching: GET /api/search?q=${query}`);
-      const { data } = await axios.post(`/api/search?q=${query}`);
-      console.log("Fetched result:", data);
-      return data;
-      // const result = SearchResultValidator.safeParse(data);
-      // if (result.success) {
-      //   console.log(result.data);
-      //   return result.data;
-      // } else {
-      //   throw new Error(result.error.message);
-      // }
+      const baseUrl = getBaseURL();
+      console.log(`FETCHING: GET ${baseUrl}/api/search?q=${query}`);
+      const data = await fetch(`${baseUrl}/api/search?q=${query}`, { method: "GET" });
+      return await data.json();
     },
     queryKey: ["searchResult", query],
-    retry: false,
     meta: {
-      errorMessage: "Failed to find any results from the provided query. Please try a different query.",
+      errorMessage: "Failed to find any results for the search term. Please try looking for something else.",
     },
   });
 
-  if (isError) {
-    return (
-      <div className="py-5 flex justify-center">
-        <h1 className="text-4xl font-semibold">No results found.</h1>
-      </div>
-    );
-  }
-
   return (
-    <div className="flex flex-col gap-5 pt-5 items-center bg-primary">
-        <h1 className="sm:text-2xl font-bold">Search results</h1>
-        {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
-          searchResultData ? <SearchResultsTable className="sm:w-1/2 w-full" data={[searchResultData]}/>
-          : <p>No results</p>
-        }
+    <div className="bg-primary flex flex-col gap-5 sm:p-8">
+      <h1 className="sm:text-2xl font-bold">Search results</h1>
+      <HydrationBoundary state={dehydrate(queryClient)}>
+        <SearchResultsTable className="w-full" query={query}/>
+      </HydrationBoundary>
     </div>
   );
 };

diff --git a/src/components/SearchResultsTable/columns.tsx b/src/components/SearchResultsTable/columns.tsx
@@ -1,18 +1,11 @@
-"use client";
-
-// import { QueryKind } from "@/lib/validators/search";
 import { type ColumnDef } from "@tanstack/react-table";
-// import Link from "next/link";
-import { type RelatedQuery, type SearchResult } from ".";
+import { SearchResult, type RelatedQuery } from ".";
 import Link from "next/link";
 
-
-type SearchResultsColumns = SearchResult;
-
 // NOTE: Search Results diverges from all the other table stylings in that most of the text is not xs on smaller devices.
 //       Until I start getting more data, it feels overkill to make it so small for now. This could turn out to be a dumb
 //       pre-caution that I will have to revert sooner than later.
-export const columns : Array<ColumnDef<SearchResultsColumns>> = [
+export const columns : Array<ColumnDef<SearchResult>> = [
   {
     accessorKey: "kind",
     header: () => <div className="text-sm">Kind</div>,
@@ -32,7 +25,7 @@ export const columns : Array<ColumnDef<SearchResultsColumns>> = [
     },
   },
   {
-    id: "related",
+    // id: "related",
     accessorKey: "related",
     header: () => <div className="text-sm break-words">Related Queries</div>,
     cell: ({ row }) => {
@@ -50,16 +43,19 @@ export const columns : Array<ColumnDef<SearchResultsColumns>> = [
       // }
       if (related !== undefined && related.length !== 0) {
         return (
-        <ul>
-          {/* {related.map(({ type, indentifier }, i) => <li key={i}>{type} : {indentifier}</li>)} */}
-          {related.map(({ type, hash }, i) => {
-            return <li key={i}>{type}: <Link href={`/transaction/${hash}`} className="text-link text-sm"><pre>{hash}</pre></Link></li>;
-          })
-          }
-        </ul>
+          <div className="flex flex-col w-full">
+            {related.map(({type, hash}, i) => {
+              return (
+                <div className="flex gap-x-4 gap-y-2 justify-start" key={i}>
+                  <p className="text=sm">{type}</p>
+                  <Link href={`/transaction/${hash}`} className="text-link text-sm"><pre className="sm:max-w-full max-w-24 overflow-hidden overflow-ellipsis">{hash}</pre></Link>
+                </div>
+              );
+            })}
+          </div>
         );
       }
-      return <p className="text-center">None</p>;
+      return <p className="text-center text-sm">None</p>;
     },
   },
 ];
diff --git a/src/components/SearchResultsTable/index.tsx b/src/components/SearchResultsTable/index.tsx
@@ -1,7 +1,9 @@
+"use client";
 import { columns } from "./columns";
 import { DataTable } from "../ui/data-table";
 import { type FC } from "react";
-
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { getBaseURL } from "@/lib/utils";
 
 export interface RelatedQuery {
   type: string,
@@ -13,19 +15,28 @@ export interface SearchResult {
   identifier: string,
   related?: RelatedQuery[],
 }
-// TODO?
-// interface TransactionSearchResult {}
-// interface BlockSearchResult {}
+
 interface SearchResultsTableProps {
   className?: string,
-  data: SearchResult[]
+  query: string,
 }
 
-const SearchResultsTable : FC<SearchResultsTableProps> = ({ className, data }) => {
-  const relatedVisible = !!data[0].related;
-  console.log("relatedVisible", relatedVisible);
+const SearchResultsTable : FC<SearchResultsTableProps> = ({ className, query }) => {
+  const { data } = useSuspenseQuery({
+    queryFn: async () => {
+      const baseUrl = getBaseURL();
+      console.log(`FETCHING: GET /api/search?q=${query}`);
+      const data = await fetch(`${baseUrl}/api/search?q=${query}`, { method: "GET" });
+      return await data.json();
+    },
+    queryKey: ["searchResult", query],
+  }) as { data: SearchResult };
+
+  const relatedVisible = !!data?.related?.at(0);
+  const columnVisibility = { "related": relatedVisible };
+
   return (
-    <DataTable className={className} columns={columns} data={data} columnVisibility={{ "related": relatedVisible }}/>
+    <DataTable className={className} columns={columns} data={[data]} columnVisibility={columnVisibility}/>
   );
 };
 

diff --git a/src/components/Searchbar/index.tsx b/src/components/Searchbar/index.tsx
@@ -32,7 +32,6 @@ const SearchBar : FC<SearchProps> = ({ className }) => {
 
   const searchCmd = () => {
     router.push(`/search/${input}`);
-    router.refresh();
   };
 
   return (
@@ -59,7 +58,7 @@ const SearchBar : FC<SearchProps> = ({ className }) => {
               toast({
                 variant: "destructive",
                 title: "Invalid search query.",
-                description: "Please try again with a block height or transaction hash.",
+                description: "Try again with a block height, hash hash, or IBC identifier.",
               });
             }
           }

diff --git a/src/components/TransactionsTable/columns.tsx b/src/components/TransactionsTable/columns.tsx
@@ -33,7 +33,7 @@ export const columns : Array<ColumnDef<EventColumns>> = [
     header: () => <div className="text-sm">Hash</div>,
     cell: ({ row }) => {
       const tx_hash : string = row.getValue("tx_hash");
-      return <Link href={`/transaction/${tx_hash}`} className="text-link text-sm"><pre className="sm:max-w-full max-w-[90px] overflow-hidden overflow-ellipsis">{tx_hash}</pre></Link>;
+      return <Link href={`/transaction/${tx_hash}`} className="text-link text-sm"><pre className="sm:max-w-full max-w-24 overflow-hidden overflow-ellipsis">{tx_hash}</pre></Link>;
     },
   },
 ];