chore: add Quote page

Author: mjkeaton

src/main.tsx

@@ -10,6 +10,7 @@ import SettingsPage from "./pages/settings/SettingsPage"
 import meta from "./constants/meta"
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
 import InfoPage from "./pages/info/InfoPage"
+import QuotePage from "./pages/quotes/QuotePage"
 
 const queryClient = new QueryClient()
 
@@ -30,6 +31,7 @@ void prepare().then(() => {
               <Route index element={<HomePage />} />
               <Route path="balances" element={<BalancesPage />} />
               <Route path="quotes" element={<QuotesPage />} />
+              <Route path="quotes/:id" element={<QuotePage />} />
               <Route path="settings" element={<SettingsPage />} />
               <Route path="info" element={<InfoPage />} />
             </Route>

src/mocks/db.ts

@@ -16,8 +16,8 @@ export const db = factory({
     suggested_expiration: nullable(String), // pending
     ttl: nullable(String), // offered
     signatures: Array<string>, // accepted
-    tstamp: nullable(String) // rejected
-  }
+    tstamp: nullable(String), // rejected
+  },
 })
 
 db.info.create({

src/mocks/handlers.ts

@@ -1,5 +1,5 @@
-import { fetchAdminQuotePending } from "./handlers/admin_quotes"
+import { fetchAdminLookupQuote, fetchAdminQuotePending } from "./handlers/admin_quotes"
 import { fetchBalances } from "./handlers/balances"
 import { fetchInfo } from "./handlers/info"
 
-export const handlers = [fetchInfo, fetchBalances, fetchAdminQuotePending]
+export const handlers = [fetchInfo, fetchBalances, fetchAdminQuotePending, fetchAdminLookupQuote]

src/mocks/handlers/admin_quotes.ts

@@ -1,18 +1,35 @@
-import { http, delay, HttpResponse } from "msw"
+import { http, delay, HttpResponse, StrictResponse } from "msw"
 import { API_URL } from "@/constants/api"
-import { ADMIN_QUOTE_PENDING } from "@/constants/endpoints"
-import { ListPendingQuotesResponse } from "@/generated/client"
+import { ADMIN_QUOTE_BY_ID, ADMIN_QUOTE_PENDING } from "@/constants/endpoints"
+import { AdminLookupQuoteResponse, InfoReply, ListPendingQuotesResponse } from "@/generated/client"
 import { db } from "../db"
 
 export const fetchAdminQuotePending = http.get<never, never, ListPendingQuotesResponse>(
   `${API_URL}${ADMIN_QUOTE_PENDING}`,
   async () => {
     await delay(1_000)
 
-    const data = db.quotes.getAll().filter((it) => it.status === 'pending');
+    const data = db.quotes.getAll().filter((it) => it.status === "pending")
 
     return HttpResponse.json({
       quotes: data.map((it) => it.id),
     })
   },
 )
+
+export const fetchAdminLookupQuote = http.get<never, never, AdminLookupQuoteResponse>(
+  `${API_URL}${ADMIN_QUOTE_BY_ID}`,
+  async ({ params }) => {
+    const { id } = params
+
+    await delay(1_000)
+
+    const data = db.quotes.getAll().filter((it) => it.id === id)
+
+    if (data.length === 0) {
+      return HttpResponse.json(null, { status: 404 }) as unknown as StrictResponse<InfoReply>
+    }
+
+    return HttpResponse.json(data[0] as InfoReply)
+  },
+)

src/pages/quotes/QuotePage.tsx

@@ -0,0 +1,98 @@
+import { Breadcrumbs } from "@/components/Breadcrumbs"
+import { PageTitle } from "@/components/PageTitle"
+import { Skeleton } from "@/components/ui/skeleton"
+import { InfoReply } from "@/generated/client"
+import useApiClient from "@/hooks/use-api-client"
+import useLocalStorage from "@/hooks/use-local-storage"
+import { useSuspenseQuery } from "@tanstack/react-query"
+import { Suspense } from "react"
+import { useParams } from "react-router"
+
+function Loader() {
+  return (
+    <div className="flex flex-col gap-1.5 py-2">
+      <Skeleton className="h-48 rounded-lg" />
+    </div>
+  )
+}
+
+function Quote({ value }: { value: InfoReply }) {
+  return (
+    <>
+      <div className="flex flex-col gap-1">
+        <div className="flex-1">{value.id}</div>
+      </div>
+    </>
+  )
+}
+
+function DevSection({ id }: { id: InfoReply["id"] }) {
+  const [devMode] = useLocalStorage("devMode", false)
+
+  const client = useApiClient()
+
+  const { data } = useSuspenseQuery({
+    queryKey: ["quote", id],
+    queryFn: () =>
+      client.adminLookupQuote({
+        path: {
+          id,
+        },
+      }),
+  })
+
+  return (
+    <>
+      {devMode && (
+        <>
+          <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
+            {JSON.stringify(data, null, 2)}
+          </pre>
+        </>
+      )}
+    </>
+  )
+}
+
+function PageBody({ id }: { id: InfoReply["id"] }) {
+  const client = useApiClient()
+
+  const { data } = useSuspenseQuery({
+    queryKey: ["quote", id],
+    queryFn: () =>
+      client.adminLookupQuote({
+        path: {
+          id,
+        },
+      }),
+  })
+
+  return (
+    <>
+      {data.data && (
+        <>
+          <Quote value={data.data} />
+        </>
+      )}
+    </>
+  )
+}
+
+export default function QuotePage() {
+  const { id } = useParams<{ id: InfoReply["id"] }>()
+
+  if (!id) {
+    throw Error("Missing `id` param.")
+  }
+
+  return (
+    <>
+      <Breadcrumbs>Quote {id}</Breadcrumbs>
+      <PageTitle>Quote {id}</PageTitle>
+      <Suspense fallback={<Loader />}>
+        <PageBody id={id} />
+        <DevSection id={id} />
+      </Suspense>
+    </>
+  )
+}

src/pages/quotes/QuotesPage.tsx

@@ -27,11 +27,9 @@ function QuoteListPendingRaw() {
 
   return (
     <>
-      {data.data && (
-        <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
-          {JSON.stringify(data.data, null, 2)}
-        </pre>
-      )}
+      <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
+        {JSON.stringify(data, null, 2)}
+      </pre>
     </>
   )
 }