feat: browse to previous and next book in BookDetails

src/App.tsx

@@ -3,11 +3,21 @@ import { Header } from "./components/Header/Header.tsx";
 import { Footer } from "./components/Footer/Footer.tsx";
 import { BookGrid } from "./components/BookGrid/BookGrid.tsx";
 import { BookDetails } from "./components/BookDetails/BookDetails.tsx";
+import { useBooks } from "./api/useBooks.ts";
+import { useDebounce } from "./components/BookGrid/useDebounce.ts";
 import type { Book } from "./api/types.ts";
 
 function App() {
   const [selectedBook, setSelectedBook] = useState<Book | null>(null);
   const [page, setPage] = useState(1);
+  // Search state and the fetched books live here instead of in BookGrid, so
+  // they survive switching to BookDetails and back.
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const debouncedSearch = useDebounce(searchQuery, 500);
+  const query = debouncedSearch.trim() || "subject:fantasy";
+
+  const booksQuery = useBooks({ query, page });
 
   return (
     <>
@@ -16,10 +26,15 @@ function App() {
         {selectedBook ? (
           <BookDetails
             book={selectedBook}
+            books={booksQuery.data?.books ?? []}
+            onBookSelect={setSelectedBook}
             onGoBack={() => setSelectedBook(null)}
           />
         ) : (
           <BookGrid
+            booksQuery={booksQuery}
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
             page={page}
             onBookSelect={setSelectedBook}
             onPageChange={setPage}

src/components/BookDetails/BookDetails.module.css

@@ -28,6 +28,32 @@
   }
 }
 
+.browse-buttons {
+  position: absolute;
+  top: -42px;
+  right: 0;
+  display: flex;
+  gap: 8px;
+}
+
+.browse-button {
+  background-color: white;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 8px 16px;
+  cursor: pointer;
+  font-size: 0.925rem;
+
+  &:hover:not(:disabled) {
+    border-color: var(--theme-color);
+  }
+
+  &:disabled {
+    color: #9ca3af;
+    cursor: not-allowed;
+  }
+}
+
 .cover-section {
   position: relative;
   flex: 0 0 40%;

src/components/BookDetails/BookDetails.tsx

@@ -6,16 +6,31 @@ import { useBookDescription } from "../../api/useBookDescription";
 
 interface BookDetailsProps {
   book: Book;
+  // The list the book was opened from, used to browse to its neighbours.
+  books: Book[];
+  onBookSelect: (book: Book) => void;
   onGoBack: () => void;
 }
 
-function BookDetails({ book, onGoBack }: BookDetailsProps) {
+function BookDetails({
+  book,
+  books,
+  onBookSelect,
+  onGoBack,
+}: BookDetailsProps) {
   const { data: description, isPending, isError } = useBookDescription(book.id);
   const descriptionText = isPending
     ? "Loading description..."
     : isError
       ? "Error loading description"
       : (description ?? "No description available");
+
+  // index is -1 if the list has changed since the book was opened; then both
+  // browse buttons are disabled.
+  const index = books.findIndex((b) => b.id === book.id);
+  const previousBook = index > 0 ? books[index - 1] : undefined;
+  const nextBook = index >= 0 ? books[index + 1] : undefined;
+
   return (
     <article className={styles.bookDetails}>
       <section className={styles.coverSection}>
@@ -26,6 +41,30 @@ function BookDetails({ book, onGoBack }: BookDetailsProps) {
         >
           Go back
         </button>
+        <nav className={styles.browseButtons} aria-label="Browse books">
+          <button
+            type="button"
+            className={styles.browseButton}
+            onClick={() => {
+              if (previousBook) onBookSelect(previousBook);
+            }}
+            disabled={!previousBook}
+            aria-label="Previous book"
+          >
+            Previous
+          </button>
+          <button
+            type="button"
+            className={styles.browseButton}
+            onClick={() => {
+              if (nextBook) onBookSelect(nextBook);
+            }}
+            disabled={!nextBook}
+            aria-label="Next book"
+          >
+            Next
+          </button>
+        </nav>
         <FavoriteButton book={book} />
         <BookCover book={book} />
       </section>

src/components/BookGrid/BookGrid.tsx

@@ -1,32 +1,33 @@
-import { useState } from "react";
 import { BookCard } from "../BookCard/BookCard";
 import { SearchBar } from "../SearchBar/SearchBar";
 import styles from "./BookGrid.module.css";
-import { useBooks } from "../../api/useBooks";
-import { useDebounce } from "./useDebounce";
+import type { useBooks } from "../../api/useBooks";
 import type { Book } from "../../api/types";
 import { Pagination } from "../Pagination/Pagination";
 import { SEARCH_LIMIT } from "../../api/openLibrary";
 
 interface BookGridProps {
+  // The result of useBooks, owned by App so it outlives this component.
+  booksQuery: ReturnType<typeof useBooks>;
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
   page: number;
   onBookSelect: (book: Book) => void;
   onPageChange: (page: number) => void;
 }
 
-function BookGrid({ page, onBookSelect, onPageChange }: BookGridProps) {
-  const [searchQuery, setSearchQuery] = useState("");
-
-  const debouncedSearch = useDebounce(searchQuery, 500);
-  const query = debouncedSearch.trim() || "subject:fantasy";
-
-  const { data, isPending, isError, error } = useBooks({
-    query,
-    page,
-  });
+function BookGrid({
+  booksQuery,
+  searchQuery,
+  onSearchChange,
+  page,
+  onBookSelect,
+  onPageChange,
+}: BookGridProps) {
+  const { data, isPending, isError, error } = booksQuery;
 
   const searchBar = (
-    <SearchBar query={searchQuery} onQueryChange={setSearchQuery} />
+    <SearchBar query={searchQuery} onQueryChange={onSearchChange} />
   );
 
   if (isPending) {