Feature: ISBN Lookup

package.json

@@ -48,6 +48,7 @@
     "date-fns": "^3.6.0",
     "drizzle-orm": "^0.29.3",
     "embla-carousel-react": "^8.0.0",
+    "fast-xml-parser": "^4.3.6",
     "framer-motion": "^11.0.5",
     "html-react-parser": "^5.1.4",
     "lucia": "^3.0.1",

src/components/domain/sayings/user-actions/submit-quote/book-combobox.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useState } from "react";
+import { api } from "~/trpc/react";
+
+// import components
+import { Button } from "~/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "~/components/ui/dialog";
+import { Input } from "~/components/ui/input";
+import { useToast } from "~/components/ui/use-toast";
+
+export default function BookCombobox() {
+  // isbn search cannot be a form, proper.
+  // if this form is nested in the larger SubmitQuote form
+  // submitting this form will trigger submit for that form
+  // there are "solutions" online but I don't have the patience today
+  const [isbnValue, setIsbnValue] = useState("");
+  const [submitError, setSubmitError] = useState("");
+  const [addBookOpen, setAddBookOpen] = useState(false);
+  const { toast } = useToast();
+
+  const createBook = api.work.create.useMutation({
+    onSuccess: (data) => {
+      toast({
+        title: `Success`,
+        description: `${data?.title} has been submitted!`,
+      });
+      return setAddBookOpen(false);
+    },
+    onError: (e) => {
+      return setSubmitError(e.message);
+    },
+  });
+
+  const searchIsbn = api.work.isbnSearch.useMutation({
+    onSuccess: (data, variables) => {
+      return createBook.mutate({
+        title: data.title,
+        authorId: null, // TODO: add authorId to connect with saints later
+        authors: data.authors,
+        isbn: variables.isbn,
+        blurb: data.blurb ?? null,
+        coverImage: data.coverImage,
+        publisher: data.publisher ?? "Unknown", // TODO: admin dashboard should filter by unknowns to fix
+        publicationYear: data.publicationYear,
+        publicationCity: data.publicationCity ?? "Unknown", // TODO: admin dashboard should filter by unknowns to fix
+      });
+    },
+    onError: (e) => {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+      return setSubmitError(JSON.parse(e.message)[0].message);
+    },
+  });
+
+  function onSubmit(isbn: string) {
+    searchIsbn.mutate({
+      isbn: isbn,
+    });
+  }
+
+  return (
+    <>
+      <Dialog open={addBookOpen} onOpenChange={setAddBookOpen}>
+        <DialogTrigger asChild>
+          <Button onClick={() => setAddBookOpen(true)}>Add Book</Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-[425px]">
+          <DialogHeader>
+            <DialogTitle>Submit a New Book</DialogTitle>
+            <DialogDescription>
+              Our list of approved books are ever expanding. Help us out by
+              adding one!
+            </DialogDescription>
+          </DialogHeader>
+
+          <Input
+            type="text"
+            placeholder="ISBN"
+            className="text-black w-full rounded-full px-4 py-2"
+            value={isbnValue}
+            onChange={(e) => setIsbnValue(e.target.value)}
+          />
+
+          {submitError && (
+            <p className="pl-4 font-bold text-secondary-red-500">
+              {submitError}
+            </p>
+          )}
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant={searchIsbn.isLoading ? "disabled" : "default"}
+              onClick={() => onSubmit(isbnValue)}
+            >
+              {searchIsbn.isLoading ? "Submitting..." : "Submit"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

src/components/domain/sayings/user-actions/submit-quote/formSchema.ts

@@ -3,8 +3,14 @@ import { z } from "zod";
 export const formSchema = z.object({
   text: z.string().min(1),
   saint: z.number(),
-  publicationCity: z.string().min(1),
-  publicationYear: z.string().min(1),
-  pageStart: z.string().min(1),
-  pageEnd: z.string().min(1),
+  citation: z.object({
+    book: z.object({
+      title: z.string(),
+      authors: z.array(z.string()),
+    }),
+    publicationCity: z.string().min(1),
+    publicationYear: z.string().min(1),
+    pageStart: z.string().min(1),
+    pageEnd: z.string().min(1),
+  }),
 });

src/components/domain/sayings/user-actions/submit-quote/index.tsx

@@ -20,6 +20,7 @@ import {
 import { useToast } from "~/components/ui/use-toast";
 import { Textarea } from "~/components/ui/textarea";
 import SaintCombobox from "~/components/domain/common/saint-combobox";
+import BookCombobox from "./book-combobox";
 
 export default function SubmitQuote() {
   const [submitError, setSubmitError] = useState("");
@@ -29,10 +30,16 @@ export default function SubmitQuote() {
     resolver: zodResolver(formSchema),
     defaultValues: {
       text: "",
-      publicationCity: "",
-      publicationYear: "",
-      pageStart: "",
-      pageEnd: "",
+      citation: {
+        book: {
+          title: "",
+          authors: [],
+        },
+        publicationCity: "",
+        publicationYear: "",
+        pageStart: "",
+        pageEnd: "",
+      },
     },
   });
 
@@ -60,10 +67,10 @@ export default function SubmitQuote() {
     createQuote.mutate({
       text: formData.text,
       citation: {
-        publicationCity: formData.publicationCity, // supplied by ISBN lookup
-        publicationYear: formData.publicationYear, // supplied by ISBN lookup
-        pageStart: formData.pageStart,
-        pageEnd: formData.pageEnd,
+        publicationCity: formData.citation.publicationCity, // supplied by ISBN lookup
+        publicationYear: formData.citation.publicationYear, // supplied by ISBN lookup
+        pageStart: formData.citation.pageStart,
+        pageEnd: formData.citation.pageEnd,
       },
     });
   }
@@ -97,7 +104,7 @@ export default function SubmitQuote() {
         <span className="flex flex-col items-start justify-between gap-4">
           <FormLabel className="text-lg">Citation Details</FormLabel>
 
-          <span>
+          <span className="flex flex-row items-center justify-normal gap-16">
             <FormField
               control={form.control}
               name="saint"
@@ -111,12 +118,26 @@ export default function SubmitQuote() {
                 </>
               )}
             />
+
+            <FormField
+              control={form.control}
+              name="citation.book"
+              render={({ field }) => (
+                <>
+                  <FormItem className="flex flex-col">
+                    <FormLabel className="text-base">Book</FormLabel>
+                    <BookCombobox />
+                    <FormMessage className="pl-4 font-bold text-secondary-red-500" />
+                  </FormItem>
+                </>
+              )}
+            />
           </span>
 
           <span className="flex flex-row items-center justify-normal gap-12">
             <FormField
               control={form.control}
-              name="pageStart"
+              name="citation.pageStart"
               render={({ field }) => (
                 <>
                   <FormItem>
@@ -137,7 +158,7 @@ export default function SubmitQuote() {
 
             <FormField
               control={form.control}
-              name="pageEnd"
+              name="citation.pageEnd"
               render={({ field }) => (
                 <>
                   <FormItem>