feat: membership list

Author: agmmtoo

app/books/new/error.tsx

@@ -0,0 +1,30 @@
+"use client"; // Error boundaries must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}

app/books/new/page.tsx

@@ -0,0 +1,70 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { createBook } from "@/lib/api/book";
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+
+export default function NewBook() {
+  async function create(formData: FormData) {
+    "use server";
+
+    const title = formData.get("title") as string;
+    const author = formData.get("author") as string;
+    const year = formData.get("year") as string;
+    const code = formData.get("code") as string;
+    const library_id = formData.get("library_id") as string;
+
+    await createBook({
+      title,
+      author,
+      year: Number(year),
+      code,
+      library_id,
+    });
+
+    redirect("/books");
+  }
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-2xl font-semibold">Books</h1>
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <Link href="/" passHref legacyBehavior>
+              <BreadcrumbLink>Home</BreadcrumbLink>
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <Link href="/books" passHref legacyBehavior>
+              <BreadcrumbLink>books</BreadcrumbLink>
+            </Link>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Register a book</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+
+      <form action={create} className="space-y-4 md:max-w-[40%]">
+        <Input name="title" placeholder="Title" required />
+        <Input name="author" placeholder="Author" required />
+        <Input name="year" type="number" placeholder="Year" required />
+        <Input name="code" placeholder="Code" required />
+        <Input name="library_id" placeholder="Library ID" required />
+        <Button type="submit">Create</Button>
+      </form>
+    </div>
+  );
+}

app/books/page.tsx

@@ -6,6 +6,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { Button } from "@/components/ui/button";
 import {
   Pagination,
   PaginationContent,
@@ -58,27 +59,33 @@ export default async function Borrows({
   return (
     <div>
       <h1 className="text-2xl font-semibold">Books</h1>
-      <Breadcrumb>
-        <BreadcrumbList>
-          <BreadcrumbItem>
-            <Link href="/" passHref legacyBehavior>
-              <BreadcrumbLink>Home</BreadcrumbLink>
-            </Link>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
+      <div className="flex justify-between items-center">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <Link href="/" passHref legacyBehavior>
+                <BreadcrumbLink>Home</BreadcrumbLink>
+              </Link>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
 
-          <BreadcrumbItem>
-            <BreadcrumbPage>Borrows</BreadcrumbPage>
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
+            <BreadcrumbItem>
+              <BreadcrumbPage>Books</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+        <Button asChild>
+          <Link href="/books/new">Register New Book</Link>
+        </Button>
+      </div>
 
       <Table>
         {/* <TableCaption>List of books available in the library.</TableCaption> */}
         <TableHeader>
           <TableRow>
             <TableHead>Code</TableHead>
             <TableHead>Title</TableHead>
+            <TableHead>Library</TableHead>
             <TableHead>Author</TableHead>
             <TableHead>Year</TableHead>
           </TableRow>
@@ -88,6 +95,7 @@ export default async function Borrows({
             <TableRow key={b.id}>
               <TableCell>{b.code}</TableCell>
               <TableCell>{b.title}</TableCell>
+              <TableCell>{b.library?.name}</TableCell>
               <TableCell>{b.author}</TableCell>
               <TableCell>{b.year}</TableCell>
             </TableRow>