feat: wire subject filter into the viewer with index reset

src/App.test.tsx

@@ -97,6 +97,8 @@ describe("App", () => {
     const user = userEvent.setup();
     withProviders(<App />);
     await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
+    await user.click(screen.getByRole("button", { name: "Show next book" }));
+    await screen.findByRole("heading", { name: "The Hobbit" });
 
     await user.selectOptions(screen.getByRole("combobox", { name: "Sort by" }), "newest");
 
@@ -105,12 +107,16 @@ describe("App", () => {
     ).toBeInTheDocument();
     expect(getSearchRequestCount()).toBe(1);
     expect(screen.getByRole("combobox", { name: "Jump to book" })).toHaveValue("0");
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
     expect(screen.getByRole("option", { name: "The Left Hand of Darkness" })).toBeInTheDocument();
   });
 
-  it("fetches once more when the subject changes", async () => {
+  it("fetches once more when the subject changes and resets to the first book", async () => {
+    const user = userEvent.setup();
     withProviders(<App />);
     await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
+    await user.click(screen.getByRole("button", { name: "Show next book" }));
+    await screen.findByRole("heading", { name: "The Hobbit" });
 
     fireEvent.change(screen.getByRole("combobox", { name: "Subject" }), {
       target: { value: "mystery" },
@@ -120,6 +126,7 @@ describe("App", () => {
     expect(
       await screen.findByRole("heading", { name: "A Wizard of Earthsea" }),
     ).toBeInTheDocument();
+    expect(screen.getByText("1 / 3")).toBeInTheDocument();
     expect(JSON.parse(sessionStorage.getItem("t19.preferences") ?? "{}")).toMatchObject({
       subject: "mystery",
     });

src/App.tsx

@@ -7,6 +7,7 @@ import { SubjectFilter } from "./components/SubjectFilter";
 import { useBooks } from "./hooks/useBooks";
 import { useFavorites } from "./hooks/useFavorites";
 import { usePreferences } from "./hooks/usePreferences";
+import type { SortOption } from "./types";
 import { SortSelect } from "./components/SortSelect";
 import { sortBooks } from "./utils/sortBooks";
 import "./App.css";
@@ -23,15 +24,25 @@ function App() {
 
   const { favoriteKeys, toggleFavorite, removeFavorite } = useFavorites();
 
+  function handleSubjectChange(nextSubject: string) {
+    setSubject(nextSubject);
+    setIndex(0);
+  }
+
+  function handleSortChange(nextSort: SortOption) {
+    setSort(nextSort);
+    setIndex(0);
+  }
+
   return (
     <div className="app">
       <header className="app-header">
         <h1>Digital Library</h1>
         <p>Browse reading material from OpenLibrary, one book at a time.</p>
       </header>
       <main className="app-main">
-        <SubjectFilter subject={subject} onSubjectChange={setSubject} />
-        <SortSelect sort={sort} onSortChange={setSort} />
+        <SubjectFilter subject={subject} onSubjectChange={handleSubjectChange} />
+        <SortSelect sort={sort} onSortChange={handleSortChange} />
         {isLoading && <p role="status">Loading books…</p>}
         {isError && <p role="alert">Could not load books. Please try refreshing the page.</p>}
         {!isLoading && !isError && books.length === 0 && (

src/hooks/usePreferences.ts

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { DEFAULT_SUBJECT, SUBJECT_OPTIONS } from "../constants/subjects";
+import { SORT_OPTIONS } from "../utils/sortBooks";
 import type { SortOption } from "../types";
 
 const PREFERENCES_KEY = "t19.preferences";
-export const DEFAULT_SORT: SortOption = "title-asc";
+const DEFAULT_SORT: SortOption = "title-asc";
 
 interface Preferences {
   [key: string]: unknown;
@@ -32,7 +33,7 @@ function isSupportedSubject(subject: unknown): subject is string {
 }
 
 function isSortOption(sort: unknown): sort is SortOption {
-  return sort === "title-asc" || sort === "title-desc" || sort === "newest" || sort === "oldest";
+  return SORT_OPTIONS.some((option) => option.value === sort);
 }
 
 function getStoredSubject(): string {

src/test/setup.ts

@@ -7,6 +7,8 @@ beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
 
 afterEach(() => {
   cleanup();
+  sessionStorage.clear();
+  localStorage.clear();
   server.resetHandlers();
 });