feat: pagination of books

src/App.tsx

@@ -7,6 +7,7 @@ import type { Book } from "./api/types.ts";
 
 function App() {
   const [selectedBook, setSelectedBook] = useState<Book | null>(null);
+  const [page, setPage] = useState(1);
 
   return (
     <>
@@ -18,7 +19,11 @@ function App() {
             onGoBack={() => setSelectedBook(null)}
           />
         ) : (
-          <BookGrid onBookSelect={setSelectedBook} />
+          <BookGrid
+            page={page}
+            onBookSelect={setSelectedBook}
+            onPageChange={setPage}
+          />
         )}
       </main>
       <Footer />

src/api/openLibrary.ts

@@ -23,8 +23,17 @@ async function searchBooks(
 ): Promise<OpenLibrarySearchResponse> {
   const url = new URL(SEARCH_URL);
   url.searchParams.set("q", params.query);
-  url.searchParams.set("limit", String(SEARCH_LIMIT));
+  url.searchParams.set(
+    "limit",
+    params.limit ? String(params.limit) : String(SEARCH_LIMIT),
+  );
   url.searchParams.set("fields", SEARCH_FIELDS.join(","));
+  url.searchParams.set("lang", params.lang ?? "en");
+  url.searchParams.set("page", params.page ? String(params.page) : "1");
+
+  if (params.sort) {
+    url.searchParams.set("sort", params.sort);
+  }
 
   const response = await fetch(url);
 
@@ -52,4 +61,4 @@ function toBook(doc: OpenLibraryDoc): Book {
   };
 }
 
-export { searchBooks, toBook };
+export { SEARCH_URL, SEARCH_LIMIT, searchBooks, toBook };

src/api/types.ts

@@ -14,7 +14,11 @@ export interface OpenLibraryDoc {
 
 export interface BookSearchParams {
   query: string;
-  // Add more search parameters here as needed.
+  fields?: string;
+  sort?: string;
+  lang?: string;
+  limit?: number;
+  page?: number;
 }
 
 export interface Book {

src/api/useBooks.ts

@@ -1,20 +1,19 @@
 import { useQuery } from "@tanstack/react-query";
 import { searchBooks, toBook } from "./openLibrary";
-import type {
-  Book,
-  BookSearchParams,
-  OpenLibrarySearchResponse,
-} from "./types";
+import type { BookSearchParams, OpenLibrarySearchResponse } from "./types";
 
-function toBooks(data: OpenLibrarySearchResponse): Book[] {
-  return data.docs.map(toBook);
+function parseBooks(data: OpenLibrarySearchResponse) {
+  return {
+    numFound: data.numFound,
+    books: data.docs.map(toBook),
+  };
 }
 
 function useBooks(params: BookSearchParams) {
   return useQuery({
     queryKey: ["books", params],
     queryFn: () => searchBooks(params),
-    select: toBooks,
+    select: parseBooks,
   });
 }
 

src/components/BookGrid/BookGrid.tsx

@@ -2,14 +2,19 @@ import { BookCard } from "../BookCard/BookCard";
 import styles from "./BookGrid.module.css";
 import { useBooks } from "../../api/useBooks";
 import type { Book } from "../../api/types";
+import { Pagination } from "../Pagination/Pagination";
+import { SEARCH_LIMIT } from "../../api/openLibrary";
 
 interface BookGridProps {
+  page: number;
   onBookSelect: (book: Book) => void;
+  onPageChange: (page: number) => void;
 }
 
-function BookGrid({ onBookSelect }: BookGridProps) {
+function BookGrid({ page, onBookSelect, onPageChange }: BookGridProps) {
   const { data, isPending, isError, error } = useBooks({
     query: "subject:fantasy",
+    page,
   });
 
   if (isPending) {
@@ -28,7 +33,7 @@ function BookGrid({ onBookSelect }: BookGridProps) {
     );
   }
 
-  if (data.length === 0) {
+  if (!data || data.books.length === 0) {
     return (
       <p role="status" className={styles.message}>
         No books found for this search
@@ -37,13 +42,20 @@ function BookGrid({ onBookSelect }: BookGridProps) {
   }
 
   return (
-    <ul className={styles.bookGrid}>
-      {data.map((book) => (
-        <li key={book.id}>
-          <BookCard book={book} onBookSelect={onBookSelect} />
-        </li>
-      ))}
-    </ul>
+    <>
+      <ul className={styles.bookGrid}>
+        {data.books.map((book) => (
+          <li key={book.id}>
+            <BookCard book={book} onBookSelect={onBookSelect} />
+          </li>
+        ))}
+      </ul>
+      <Pagination
+        currentPage={page}
+        totalPages={Math.ceil(data.numFound / SEARCH_LIMIT)}
+        onPageChange={onPageChange}
+      />
+    </>
   );
 }
 

src/components/Pagination/Pagination.module.css

@@ -0,0 +1,39 @@
+.pagination {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 0.75rem 0;
+}
+
+.pagination-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 6rem;
+  padding: 0.5rem 1.25rem;
+  color: var(--theme-color);
+  background-color: white;
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: 0.15s ease-in-out;
+}
+
+.pagination-button:hover:not(:disabled) {
+  background-color: #f3f4f6;
+  border-color: #9ca3af;
+}
+
+.pagination-button:disabled {
+  color: var(--muted);
+  background-color: var(--muted-background);
+  border-color: var(--border-color);
+  cursor: not-allowed;
+}
+
+.pagination-info {
+  font-weight: 500;
+  width: 5rem;
+  text-align: center;
+}

src/components/Pagination/Pagination.tsx

@@ -0,0 +1,40 @@
+import styles from "./Pagination.module.css";
+
+function Pagination({
+  totalPages,
+  currentPage,
+  onPageChange,
+}: {
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}) {
+  const handlePageChange = (newPage: number) => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+    onPageChange(newPage);
+  };
+
+  return (
+    <section className={styles.pagination}>
+      <button
+        className={styles.paginationButton}
+        onClick={() => handlePageChange(currentPage - 1)}
+        disabled={currentPage === 1}
+      >
+        Previous
+      </button>
+      <span className={styles.paginationInfo}>
+        {currentPage} of {totalPages}
+      </span>
+      <button
+        className={styles.paginationButton}
+        onClick={() => handlePageChange(currentPage + 1)}
+        disabled={currentPage === totalPages}
+      >
+        Next
+      </button>
+    </section>
+  );
+}
+
+export { Pagination };

src/index.css

@@ -4,6 +4,8 @@
   --footer-background-color: #2b2a2a;
   --border-color: #ebe9e6;
   --border-radius: 8px;
+  --muted: #6b7280;
+  --muted-background: rgba(255, 255, 255, 0.25);
 }
 
 * {