feat: display accepted quotes

Author: mjkeaton

src/mocks/handlers.ts

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

src/mocks/handlers/admin_quotes.ts

@@ -1,7 +1,13 @@
 import { http, delay, HttpResponse, StrictResponse } from "msw"
 import { API_URL } from "@/constants/api"
-import { ADMIN_QUOTE_BY_ID, ADMIN_QUOTE_PENDING } from "@/constants/endpoints"
-import { AdminLookupQuoteResponse, InfoReply, ListPendingQuotesResponse, ResolveRequest } from "@/generated/client"
+import { ADMIN_QUOTE_BY_ID, ADMIN_QUOTE_PENDING, ADMIN_QUOTE_ACCEPTED } from "@/constants/endpoints"
+import {
+  AdminLookupQuoteResponse,
+  InfoReply,
+  ListAcceptedQuotesResponse,
+  ListPendingQuotesResponse,
+  ResolveRequest,
+} from "@/generated/client"
 import { db } from "../db"
 
 export const fetchAdminQuotePending = http.get<never, never, ListPendingQuotesResponse>(
@@ -17,6 +23,19 @@ export const fetchAdminQuotePending = http.get<never, never, ListPendingQuotesRe
   },
 )
 
+export const fetchAdminQuoteAccepted = http.get<never, never, ListAcceptedQuotesResponse>(
+  `${API_URL}${ADMIN_QUOTE_ACCEPTED}`,
+  async () => {
+    await delay(1_000)
+
+    const data = db.quotes.getAll().filter((it) => it.status === "accepted")
+
+    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 }) => {

src/pages/quotes/QuotePage.tsx

@@ -88,14 +88,14 @@ function QuoteActions({ value, isFetching }: { value: InfoReply; isFetching: boo
         <Button
           className="flex-1"
           onClick={onDenyQuote}
-          disabled={isFetching || denyQuote.isPending || value.status === "denied"}
+          disabled={isFetching || denyQuote.isPending || value.status !== "pending"}
         >
           Deny {denyQuote.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
         </Button>
         <Button
           className="flex-1"
           onClick={onOfferQuote}
-          disabled={isFetching || offerQuote.isPending || value.status === "offered"}
+          disabled={isFetching || offerQuote.isPending || value.status !== "pending"}
         >
           Offer {offerQuote.isPending && <LoaderIcon className="stroke-1 animate-spin" />}
         </Button>

src/pages/quotes/QuotesPage.tsx

@@ -3,7 +3,7 @@ import { H3 } from "@/components/Headings"
 import { PageTitle } from "@/components/PageTitle"
 import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
-import { listPendingQuotesOptions } from "@/generated/client/@tanstack/react-query.gen"
+import { listAcceptedQuotesOptions, listPendingQuotesOptions } from "@/generated/client/@tanstack/react-query.gen"
 import useLocalStorage from "@/hooks/use-local-storage"
 import { useSuspenseQuery } from "@tanstack/react-query"
 import { LoaderIcon } from "lucide-react"
@@ -18,32 +18,63 @@ function Loader() {
   )
 }
 
-function QuoteListPendingRaw() {
-  const { data } = useSuspenseQuery({
-    ...listPendingQuotesOptions({}),
+function QuoteListPending() {
+  const navigate = useNavigate()
+
+  const { data, isFetching } = useSuspenseQuery({
+    ...listPendingQuotesOptions(),
   })
 
   return (
     <>
-      <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
-        {JSON.stringify(data, null, 2)}
-      </pre>
+      <H3>
+        <span className="flex items-center gap-1">
+          <span>Pending</span>
+          <span>{isFetching && <LoaderIcon className="stroke-1 animate-spin" />}</span>
+        </span>
+      </H3>
+
+      <div className="flex flex-col gap-1">
+        {data.quotes.map((it, index) => {
+          return (
+            <div key={index} className="flex gap-1 items-center text-sm">
+              {isFetching ? (
+                <>{it}</>
+              ) : (
+                <>
+                  <Link to={"/quotes/:id".replace(":id", it)}>{it}</Link>
+                </>
+              )}
+
+              <Button
+                size="sm"
+                disabled={isFetching}
+                onClick={() => {
+                  void navigate("/quotes/:id".replace(":id", it))
+                }}
+              >
+                View
+              </Button>
+            </div>
+          )
+        })}
+      </div>
     </>
   )
 }
 
-function QuoteListPending() {
+function QuoteListAccepted() {
   const navigate = useNavigate()
 
   const { data, isFetching } = useSuspenseQuery({
-    ...listPendingQuotesOptions({}),
+    ...listAcceptedQuotesOptions(),
   })
 
   return (
     <>
       <H3>
         <span className="flex items-center gap-1">
-          <span>Pending</span>
+          <span>Accepted</span>
           <span>{isFetching && <LoaderIcon className="stroke-1 animate-spin" />}</span>
         </span>
       </H3>
@@ -80,14 +111,36 @@ function QuoteListPending() {
 function DevSection() {
   const [devMode] = useLocalStorage("devMode", false)
 
-  return <>{devMode && <QuoteListPendingRaw />}</>
+  const { data: quotesPending } = useSuspenseQuery({
+    ...listPendingQuotesOptions({}),
+  })
+
+  const { data: quotesAccepted } = useSuspenseQuery({
+    ...listPendingQuotesOptions({}),
+  })
+
+  return (
+    <>
+      {devMode && (
+        <>
+          <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
+            {JSON.stringify(quotesPending, null, 2)}
+          </pre>
+          <pre className="text-sm bg-accent text-accent-foreground rounded-lg p-2 my-2">
+            {JSON.stringify(quotesAccepted, null, 2)}
+          </pre>
+        </>
+      )}
+    </>
+  )
 }
 
 function PageBody() {
   return (
     <>
       <Suspense fallback={<Loader />}>
         <QuoteListPending />
+        <QuoteListAccepted />
       </Suspense>
     </>
   )