feat: add deny and offer actions

Author: mjkeaton

src/components/Breadcrumbs.tsx

@@ -22,14 +22,12 @@ export function Breadcrumbs({ parents, children }: PropsWithChildren<{ parents?:
         {parents && (
           <>
             {parents.map((it, index) => (
-              <>
-                <BreadcrumbItem key={index}>
-                  <BreadcrumbLink asChild>
-                    <Link to="/">{it}</Link>
-                  </BreadcrumbLink>
+              <div className="flex items-center gap-2" key={index}>
+                <BreadcrumbItem>
+                  <>{it}</>
                 </BreadcrumbItem>
                 <BreadcrumbSeparator />
-              </>
+              </div>
             ))}
           </>
         )}

src/mocks/handlers.ts

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

src/mocks/handlers/admin_quotes.ts

@@ -1,7 +1,7 @@
 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 } from "@/generated/client"
+import { AdminLookupQuoteResponse, InfoReply, ListPendingQuotesResponse, ResolveRequest } from "@/generated/client"
 import { db } from "../db"
 
 export const fetchAdminQuotePending = http.get<never, never, ListPendingQuotesResponse>(
@@ -25,11 +25,42 @@ export const fetchAdminLookupQuote = http.get<never, never, AdminLookupQuoteResp
     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)
   },
 )
+
+export const updateAdminQuote = http.post<never, ResolveRequest>(
+  `${API_URL}${ADMIN_QUOTE_BY_ID}`,
+  async ({ params, request }) => {
+    const { id } = params
+    const body = await request.json()
+
+    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>
+    }
+
+    const quote = data[0]
+
+    if (body.action === "deny") {
+      quote.status = "denied"
+    }
+    if (body.action === "offer") {
+      quote.status = "offered"
+      quote.ttl = body.ttl ?? null
+    }
+
+    const updated = db.quotes.update({
+      where: { id: { equals: quote.id } },
+      data: quote,
+    })
+
+    return HttpResponse.json(updated as InfoReply)
+  },
+)

src/pages/quotes/QuotePage.tsx

@@ -1,11 +1,16 @@
 import { Breadcrumbs } from "@/components/Breadcrumbs"
 import { PageTitle } from "@/components/PageTitle"
+import { Button } from "@/components/ui/button"
 import { Skeleton } from "@/components/ui/skeleton"
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table"
 import { InfoReply } from "@/generated/client"
-import { adminLookupQuoteOptions } from "@/generated/client/@tanstack/react-query.gen"
+import {
+  adminLookupQuoteOptions,
+  adminLookupQuoteQueryKey,
+  resolveQuoteMutation,
+} from "@/generated/client/@tanstack/react-query.gen"
 import useLocalStorage from "@/hooks/use-local-storage"
-import { useSuspenseQuery } from "@tanstack/react-query"
+import { useMutation, useQueryClient, useSuspenseQuery } from "@tanstack/react-query"
 import { Suspense } from "react"
 import { Link, useParams } from "react-router"
 
@@ -17,6 +22,64 @@ function Loader() {
   )
 }
 
+function QuoteActions({ value }: { value: InfoReply }) {
+  const queryClient = useQueryClient()
+
+  const resolveQuote = useMutation({
+    ...resolveQuoteMutation(),
+    onError: (error) => {
+      console.log(error)
+    },
+    onSuccess: (data) => {
+      console.log(data)
+      void queryClient.invalidateQueries({
+        queryKey: adminLookupQuoteQueryKey({
+          path: {
+            id: value.id,
+          },
+        }),
+      })
+    },
+  })
+
+  const onDenyQuote = () => {
+    resolveQuote.mutate({
+      path: {
+        id: value.id,
+      },
+      body: {
+        action: "deny",
+      },
+    })
+  }
+
+  const onOfferQuote = () => {
+    resolveQuote.mutate({
+      path: {
+        id: value.id,
+      },
+      body: {
+        action: "offer",
+        discount: "1",
+        ttl: "1",
+      },
+    })
+  }
+
+  return (
+    <>
+      <div className="flex items-center gap-2">
+        <Button className="flex-1" onClick={onDenyQuote} disabled={value.status === "denied"}>
+          Deny
+        </Button>
+        <Button className="flex-1" onClick={onOfferQuote} disabled={value.status === "offered"}>
+          Offer
+        </Button>
+      </div>
+    </>
+  )
+}
+
 function Quote({ value }: { value: InfoReply }) {
   return (
     <>
@@ -31,16 +94,14 @@ function Quote({ value }: { value: InfoReply }) {
               <TableCell>status: </TableCell>
               <TableCell>{value.status}</TableCell>
             </TableRow>
-            <TableRow>
-              <TableCell>endorser: </TableCell>
-              <TableCell>{value.endorser || "(empty)"}</TableCell>
-            </TableRow>
             <TableRow>
               <TableCell>bill: </TableCell>
               <TableCell>{value.bill || "(empty)"}</TableCell>
             </TableRow>
           </TableBody>
         </Table>
+
+        <QuoteActions value={value} />
       </div>
     </>
   )