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 (
-
-
+
+
{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();
});