feat: multi-page structure with React Router

app/api/openLibrary.test.ts

@@ -20,7 +20,7 @@ describe("toBook", () => {
     };
 
     expect(toBook(doc)).toEqual({
-      id: "/works/OL8400950W",
+      id: "OL8400950W",
       title: "The Blade Itself",
       author: ["Joe Abercrombie"],
       publishedYear: 2001,
@@ -140,7 +140,7 @@ describe("fetchWork", () => {
       .spyOn(globalThis, "fetch")
       .mockResolvedValue(Response.json(workResponse));
 
-    const data = await fetchWork("/works/OL8400950W");
+    const data = await fetchWork("OL8400950W");
     const url = fetchMock.mock.calls[0][0] as URL;
     expect(url.toString()).toBe(
       "https://openlibrary.org/works/OL8400950W.json",
@@ -154,8 +154,8 @@ describe("fetchWork", () => {
       new Response(null, { status: 429 }),
     );
 
-    await expect(fetchWork("/works/OL8400950W")).rejects.toThrow(
-      "Failed to fetch work /works/OL8400950W with status 429",
+    await expect(fetchWork("OL8400950W")).rejects.toThrow(
+      "Failed to fetch work OL8400950W with status 429",
     );
   });
 });

app/api/openLibrary.ts

@@ -66,7 +66,7 @@ async function searchBooks(
 
 function toBook(doc: OpenLibraryDoc): Book {
   return {
-    id: doc.key,
+    id: doc.key.replace("/works/", ""),
     title: doc.title,
     author: doc.author_name ?? ["Unknown author"],
     publishedYear: doc.first_publish_year,
@@ -78,7 +78,7 @@ function toBook(doc: OpenLibraryDoc): Book {
 }
 
 async function fetchWork(key: string): Promise<OpenLibraryWork> {
-  const response = await fetch(`${BASE_URL}${key}.json`);
+  const response = await fetch(`${BASE_URL}/works/${key}.json`);
 
   if (!response.ok) {
     throw new Error(

app/api/useBookDescription.ts

@@ -3,7 +3,7 @@ import { fetchWork, toDescription } from "~/api/openLibrary";
 
 function useBookDescription(key: string) {
   return useQuery({
-    queryKey: ["work", key],
+    queryKey: ["bookDescription", key],
     queryFn: () => fetchWork(key),
     select: toDescription,
   });

app/api/useBookSearchParams.ts

@@ -0,0 +1,25 @@
+import { useSearchParams } from "react-router";
+
+function useBookSearchParams() {
+  const [searchParams] = useSearchParams();
+
+  const rawQuery = searchParams.get("q") ?? "";
+  const page = parseInt(searchParams.get("page") ?? "1", 10);
+  const filters = {
+    author: searchParams.get("author") ?? undefined,
+    subject: searchParams.get("subject") ?? undefined,
+    place: searchParams.get("place") ?? undefined,
+    person: searchParams.get("person") ?? undefined,
+    language: searchParams.get("language") ?? undefined,
+    publisher: searchParams.get("publisher") ?? undefined,
+  };
+
+  const hasFilters =
+    Object.values(filters).filter((value) => value !== undefined).length > 0;
+
+  const query = rawQuery || hasFilters ? rawQuery : "subject:fantasy";
+
+  return { rawQuery, query, page, filters };
+}
+
+export { useBookSearchParams };

app/api/useWork.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchWork } from "~/api/openLibrary";
+
+function useWork(key: string) {
+  return useQuery({
+    queryKey: ["work", key],
+    queryFn: () => fetchWork(key),
+  });
+}
+
+export { useWork };

app/components/BookCard/BookCard.module.css

@@ -9,6 +9,13 @@
   border: 1px solid var(--border-color);
 }
 
+.book-card-link {
+  all: unset;
+  width: 100%;
+  height: 100%;
+
+}
+
 .book-card-button {
   all: unset;
   cursor: pointer;
@@ -17,6 +24,7 @@
   flex: 1;
   flex-direction: column;
   width: 100%;
+  height: 100%;
 
   box-sizing: border-box;
   padding: 24px;

app/components/BookCard/BookCard.test.tsx

@@ -1,12 +1,19 @@
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
 import { BookCard } from "~/components/BookCard/BookCard";
 import { bookWithCover as book } from "~/test/fixtures/books";
+import { createRoutesStub } from "react-router";
+
+const Stub = createRoutesStub([
+  {
+    path: "/",
+    Component: () => <BookCard book={book} />,
+  },
+]);
 
 describe("BookCard", () => {
   it("shows title, authors and year from the book prop", () => {
-    render(<BookCard book={book} onBookSelect={vi.fn()} />);
+    render(<Stub />);
 
     expect(
       screen.getByRole("heading", { name: "The Blade Itself" }),
@@ -15,26 +22,20 @@ describe("BookCard", () => {
     expect(screen.getByText("2001")).toBeInTheDocument();
   });
 
-  it("calls onBookSelect with the book when clicked", async () => {
-    const user = userEvent.setup();
-    const onBookSelect = vi.fn();
-    render(<BookCard book={book} onBookSelect={onBookSelect} />);
+  it("links to the book's details page, keeping the current search", () => {
+    render(<Stub initialEntries={["/?q=fantasy"]} />);
 
-    await user.click(
-      screen.getByRole("button", { name: "View details for The Blade Itself" }),
+    expect(screen.getByRole("link")).toHaveAttribute(
+      "href",
+      `/book/${book.id}?q=fantasy`,
     );
-
-    expect(onBookSelect).toHaveBeenCalledTimes(1);
-    expect(onBookSelect).toHaveBeenCalledWith(book);
   });
 
   // Snapshot test: the rendered HTML is saved in __snapshots__/ the first time
   // the test runs. Later runs fail if the markup changes unexpectedly.
   // Run `pnpm test -u` to update the snapshot when a change is intended.
   it("matches the snapshot", () => {
-    const { container } = render(
-      <BookCard book={book} onBookSelect={vi.fn()} />,
-    );
+    const { container } = render(<Stub />);
 
     expect(container).toMatchSnapshot();
   });

app/components/BookCard/BookCard.tsx

@@ -2,35 +2,37 @@ import styles from "./BookCard.module.css";
 import { BookCover } from "~/components/BookCover/BookCover";
 import { FavoriteButton } from "~/components/FavoriteButton/FavoriteButton";
 import type { Book } from "~/api/types";
+import { Link, useSearchParams } from "react-router";
 
 interface BookCardProps {
   book: Book;
-  onBookSelect: (book: Book) => void;
 }
 
-function BookCard({ book, onBookSelect }: BookCardProps) {
-  const selectBook = () => {
-    onBookSelect(book);
-  };
+function BookCard({ book }: BookCardProps) {
+  const [searchParams] = useSearchParams();
 
   return (
     <article className={styles.bookCard}>
       <FavoriteButton book={book} />
 
-      <button
-        type="button"
-        onClick={selectBook}
-        className={styles.bookCardButton}
-        aria-label={`View details for ${book.title}`}
+      <Link
+        to={`/book/${book.id}?${searchParams}`}
+        className={styles.bookCardLink}
       >
-        <BookCover book={book} />
+        <button
+          type="button"
+          className={styles.bookCardButton}
+          aria-label={`View details for ${book.title}`}
+        >
+          <BookCover book={book} />
 
-        <section className={styles.info}>
-          <h3 className={styles.title}>{book.title}</h3>
-          <p>{book.author.join(", ")}</p>
-          <p>{book.publishedYear ?? "Unknown"}</p>
-        </section>
-      </button>
+          <section className={styles.info}>
+            <h3 className={styles.title}>{book.title}</h3>
+            <p>{book.author.join(", ")}</p>
+            <p>{book.publishedYear ?? "Unknown"}</p>
+          </section>
+        </button>
+      </Link>
     </article>
   );
 }

app/components/BookCard/__snapshots__/BookCard.test.tsx.snap

@@ -13,32 +13,38 @@ exports[`BookCard > matches the snapshot 1`] = `
     >
       +
     </button>
-    <button
-      aria-label="View details for The Blade Itself"
-      class="bookCardButton"
-      type="button"
+    <a
+      class="bookCardLink"
+      data-discover="true"
+      href="/book/OL8400950W"
     >
-      <img
-        alt="Book cover of The Blade Itself"
-        class="coverImage"
-        src="https://covers.openlibrary.org/b/id/14543422-M.jpg?default=false"
-      />
-      <section
-        class="info"
+      <button
+        aria-label="View details for The Blade Itself"
+        class="bookCardButton"
+        type="button"
       >
-        <h3
-          class="title"
+        <img
+          alt="Book cover of The Blade Itself"
+          class="coverImage"
+          src="https://covers.openlibrary.org/b/id/14543422-M.jpg?default=false"
+        />
+        <section
+          class="info"
         >
-          The Blade Itself
-        </h3>
-        <p>
-          Joe Abercrombie
-        </p>
-        <p>
-          2001
-        </p>
-      </section>
-    </button>
+          <h3
+            class="title"
+          >
+            The Blade Itself
+          </h3>
+          <p>
+            Joe Abercrombie
+          </p>
+          <p>
+            2001
+          </p>
+        </section>
+      </button>
+    </a>
   </article>
 </div>
 `;