diff --git a/src/App.test.tsx b/src/App.test.tsx index e8edf03..f536b16 100644 --- a/src/App.test.tsx +++ b/src/App.test.tsx @@ -97,6 +97,8 @@ describe("App", () => { const user = userEvent.setup(); withProviders(); 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(); 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", }); diff --git a/src/App.tsx b/src/App.tsx index 8ab1884..25a4c54 100644 --- a/src/App.tsx +++ b/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,6 +24,16 @@ function App() { const { favoriteKeys, toggleFavorite, removeFavorite } = useFavorites(); + function handleSubjectChange(nextSubject: string) { + setSubject(nextSubject); + setIndex(0); + } + + function handleSortChange(nextSort: SortOption) { + setSort(nextSort); + setIndex(0); + } + return (
@@ -30,8 +41,8 @@ function App() {

Browse reading material from OpenLibrary, one book at a time.

- - + + {isLoading &&

Loading books…

} {isError &&

Could not load books. Please try refreshing the page.

} {!isLoading && !isError && books.length === 0 && ( diff --git a/src/hooks/usePreferences.ts b/src/hooks/usePreferences.ts index bc079e9..da40819 100644 --- a/src/hooks/usePreferences.ts +++ b/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 { diff --git a/src/test/setup.ts b/src/test/setup.ts index 6c25a9b..9505c15 100644 --- a/src/test/setup.ts +++ b/src/test/setup.ts @@ -7,6 +7,8 @@ beforeAll(() => server.listen({ onUnhandledRequest: "error" })); afterEach(() => { cleanup(); + sessionStorage.clear(); + localStorage.clear(); server.resetHandlers(); });