From 7b9925e2a9917be3ecc25d204874dec318e2d407 Mon Sep 17 00:00:00 2001
From: Rachel Stiansen <rachelks@ntnu.no>
Date: Thu, 10 Sep 2026 12:04:01 +0200
Subject: [PATCH 1/2] feat: add book sorting with sessionStorage persistence
 (#20)

---
 src/App.test.tsx                    | 69 ++++++++++++++++++++++++-----
 src/App.tsx                         | 16 ++++---
 src/__snapshots__/App.test.tsx.snap | 49 +++++++++++++++-----
 src/components/SortSelect.css       | 25 +++++++++++
 src/components/SortSelect.test.tsx  | 30 +++++++++++++
 src/components/SortSelect.tsx       | 27 +++++++++++
 src/hooks/usePreferences.ts         | 27 ++++++++++-
 src/types.ts                        |  2 +
 src/utils/sortBooks.test.ts         | 35 +++++++++++++++
 src/utils/sortBooks.ts              | 38 ++++++++++++++++
 10 files changed, 290 insertions(+), 28 deletions(-)
 create mode 100644 src/components/SortSelect.css
 create mode 100644 src/components/SortSelect.test.tsx
 create mode 100644 src/components/SortSelect.tsx
 create mode 100644 src/utils/sortBooks.test.ts
 create mode 100644 src/utils/sortBooks.ts

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 9821139..818f54b 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -31,7 +31,7 @@ describe("App", () => {
 
   it("renders the first book once loaded", async () => {
     withProviders(<App />);
-    const heading = await screen.findByRole("heading", { name: "The Hobbit" });
+    const heading = await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
     expect(heading).toBeInTheDocument();
     expect(screen.getByRole("region", { name: "Book viewer" })).toBeInTheDocument();
   });
@@ -51,23 +51,23 @@ describe("App", () => {
   it("navigates to the next and previous book with the controls", async () => {
     const user = userEvent.setup();
     withProviders(<App />);
-    await screen.findByRole("heading", { name: "The Hobbit" });
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
 
     await user.click(screen.getByRole("button", { name: "Show next book" }));
-    expect(
-      await screen.findByRole("heading", { name: "A Wizard of Earthsea" }),
-    ).toBeInTheDocument();
+    expect(await screen.findByRole("heading", { name: "The Hobbit" })).toBeInTheDocument();
     expect(screen.getByText("2 / 3")).toBeInTheDocument();
 
     await user.click(screen.getByRole("button", { name: "Show previous book" }));
-    expect(await screen.findByRole("heading", { name: "The Hobbit" })).toBeInTheDocument();
+    expect(
+      await screen.findByRole("heading", { name: "A Wizard of Earthsea" }),
+    ).toBeInTheDocument();
     expect(screen.getByText("1 / 3")).toBeInTheDocument();
   });
 
   it("jumps directly to a book from the list", async () => {
     const user = userEvent.setup();
     withProviders(<App />);
-    await screen.findByRole("heading", { name: "The Hobbit" });
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
 
     await user.selectOptions(screen.getByLabelText("Jump to book"), "2");
     expect(
@@ -80,27 +80,45 @@ describe("App", () => {
     resetSearchRequestCount();
     const user = userEvent.setup();
     withProviders(<App />);
-    await screen.findByRole("heading", { name: "The Hobbit" });
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
 
     await user.click(screen.getByRole("button", { name: "Show next book" }));
-    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
-    await user.click(screen.getByRole("button", { name: "Show previous book" }));
     await screen.findByRole("heading", { name: "The Hobbit" });
+    await user.click(screen.getByRole("button", { name: "Show previous book" }));
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
     await user.selectOptions(screen.getByLabelText("Jump to book"), "2");
     await screen.findByRole("heading", { name: "The Left Hand of Darkness" });
 
     expect(getSearchRequestCount()).toBe(1);
   });
 
+  it("sorts the displayed books without making another API request", async () => {
+    const user = userEvent.setup();
+    withProviders(<App />);
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
+
+    await user.selectOptions(screen.getByRole("combobox", { name: "Sort by" }), "newest");
+
+    expect(
+      await screen.findByRole("heading", { name: "The Left Hand of Darkness" }),
+    ).toBeInTheDocument();
+    expect(getSearchRequestCount()).toBe(1);
+    expect(screen.getByRole("combobox", { name: "Jump to book" })).toHaveValue("0");
+    expect(screen.getByRole("option", { name: "The Left Hand of Darkness" })).toBeInTheDocument();
+  });
+
   it("fetches once more when the subject changes", async () => {
     withProviders(<App />);
-    await screen.findByRole("heading", { name: "The Hobbit" });
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
 
     fireEvent.change(screen.getByRole("combobox", { name: "Subject" }), {
       target: { value: "mystery" },
     });
 
     await waitFor(() => expect(getSearchRequestCount()).toBe(2));
+    expect(
+      await screen.findByRole("heading", { name: "A Wizard of Earthsea" }),
+    ).toBeInTheDocument();
     expect(JSON.parse(sessionStorage.getItem("t19.preferences") ?? "{}")).toMatchObject({
       subject: "mystery",
     });
@@ -114,11 +132,40 @@ describe("App", () => {
     await waitFor(() => expect(getSearchRequestCount()).toBe(1));
   });
 
+  it("restores the selected sort and preserves the subject preference", async () => {
+    sessionStorage.setItem(
+      "t19.preferences",
+      JSON.stringify({ subject: "mystery", sort: "newest" }),
+    );
+    withProviders(<App />);
+
+    expect(screen.getByRole("combobox", { name: "Subject" })).toHaveValue("mystery");
+    expect(screen.getByRole("combobox", { name: "Sort by" })).toHaveValue("newest");
+    expect(
+      await screen.findByRole("heading", { name: "The Left Hand of Darkness" }),
+    ).toBeInTheDocument();
+  });
+
+  it("preserves unrelated preferences when the sort changes", async () => {
+    const user = userEvent.setup();
+    sessionStorage.setItem("t19.preferences", JSON.stringify({ subject: "mystery" }));
+    withProviders(<App />);
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
+
+    await user.selectOptions(screen.getByRole("combobox", { name: "Sort by" }), "oldest");
+
+    expect(JSON.parse(sessionStorage.getItem("t19.preferences") ?? "{}")).toEqual({
+      subject: "mystery",
+      sort: "oldest",
+    });
+  });
+
   it("uses the default subject when stored preferences are corrupt", () => {
     sessionStorage.setItem("t19.preferences", "not valid json");
     withProviders(<App />);
 
     expect(screen.getByRole("combobox", { name: "Subject" })).toHaveValue("fantasy");
+    expect(screen.getByRole("combobox", { name: "Sort by" })).toHaveValue("title-asc");
   });
 
   it("matches the snapshot", async () => {
diff --git a/src/App.tsx b/src/App.tsx
index a7c2db0..d936f8b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,15 +5,18 @@ import { NavigationControls } from "./components/NavigationControls";
 import { SubjectFilter } from "./components/SubjectFilter";
 import { useBooks } from "./hooks/useBooks";
 import { usePreferences } from "./hooks/usePreferences";
+import { SortSelect } from "./components/SortSelect";
+import { sortBooks } from "./utils/sortBooks";
 import "./App.css";
 
 function App() {
-  const { subject, setSubject } = usePreferences();
+  const { subject, setSubject, sort, setSort } = usePreferences();
   const { books, isLoading, isError } = useBooks(subject);
+  const sortedBooks = sortBooks(books, sort);
 
   const [index, setIndex] = useState(0);
-  const safeIndex = books.length > 0 ? Math.min(index, books.length - 1) : 0;
-  const current = books[safeIndex];
+  const safeIndex = sortedBooks.length > 0 ? Math.min(index, sortedBooks.length - 1) : 0;
+  const current = sortedBooks[safeIndex];
 
   return (
     <div className="app">
@@ -23,6 +26,7 @@ function App() {
       </header>
       <main className="app-main">
         <SubjectFilter subject={subject} onSubjectChange={setSubject} />
+        <SortSelect sort={sort} onSortChange={setSort} />
         {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 && (
@@ -33,12 +37,12 @@ function App() {
             <BookCard book={current} />
             <NavigationControls
               currentIndex={safeIndex}
-              totalCount={books.length}
+              totalCount={sortedBooks.length}
               onPrevious={() => setIndex(Math.max(0, safeIndex - 1))}
-              onNext={() => setIndex(Math.min(books.length - 1, safeIndex + 1))}
+              onNext={() => setIndex(Math.min(sortedBooks.length - 1, safeIndex + 1))}
             />
             <BookJumpList
-              titles={books.map((book) => book.title)}
+              titles={sortedBooks.map((book) => book.title)}
               currentIndex={safeIndex}
               onSelect={setIndex}
             />
diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
index 10bad78..d920d45 100644
--- a/src/__snapshots__/App.test.tsx.snap
+++ b/src/__snapshots__/App.test.tsx.snap
@@ -58,6 +58,36 @@ exports[`App > matches the snapshot 1`] = `
           </option>
         </select>
       </label>
+      <label
+        class="sort-select"
+        for="sort-select"
+      >
+        Sort by
+        <select
+          id="sort-select"
+        >
+          <option
+            value="title-asc"
+          >
+            Title A-Z
+          </option>
+          <option
+            value="title-desc"
+          >
+            Title Z-A
+          </option>
+          <option
+            value="newest"
+          >
+            Newest first
+          </option>
+          <option
+            value="oldest"
+          >
+            Oldest first
+          </option>
+        </select>
+      </label>
       <section
         aria-label="Book viewer"
         class="book-viewer"
@@ -68,25 +98,24 @@ exports[`App > matches the snapshot 1`] = `
           <div
             class="book-card-cover"
           >
-            <img
-              alt="Cover of The Hobbit"
-              src="https://covers.openlibrary.org/b/id/123-L.jpg"
-            />
+            <p>
+              No cover available
+            </p>
           </div>
           <div
             class="book-card-content"
           >
             <h2>
-              The Hobbit
+              A Wizard of Earthsea
             </h2>
             <p
               class="book-card-authors"
             >
-              J. R. R. Tolkien
+              Ursula K. Le Guin
             </p>
             <p>
               First published: 
-              1937
+              1968
             </p>
             <ul
               aria-label="Subjects"
@@ -96,7 +125,7 @@ exports[`App > matches the snapshot 1`] = `
                 fantasy
               </li>
               <li>
-                dragons
+                magic
               </li>
             </ul>
           </div>
@@ -138,12 +167,12 @@ exports[`App > matches the snapshot 1`] = `
             <option
               value="0"
             >
-              The Hobbit
+              A Wizard of Earthsea
             </option>
             <option
               value="1"
             >
-              A Wizard of Earthsea
+              The Hobbit
             </option>
             <option
               value="2"
diff --git a/src/components/SortSelect.css b/src/components/SortSelect.css
new file mode 100644
index 0000000..92b0d6c
--- /dev/null
+++ b/src/components/SortSelect.css
@@ -0,0 +1,25 @@
+.sort-select {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  max-width: 20rem;
+  margin: 0 auto 1.5rem;
+  color: #243b53;
+  font-weight: 600;
+}
+
+.sort-select select {
+  min-height: 2.75rem;
+  padding: 0.625rem 0.75rem;
+  border: 1px solid #d5dde5;
+  border-radius: 0.5rem;
+  background-color: #ffffff;
+  color: #1f2933;
+  font: inherit;
+  font-weight: 400;
+}
+
+.sort-select select:focus-visible {
+  outline: 0.1875rem solid #2c3e50;
+  outline-offset: 0.125rem;
+}
diff --git a/src/components/SortSelect.test.tsx b/src/components/SortSelect.test.tsx
new file mode 100644
index 0000000..f5d21a5
--- /dev/null
+++ b/src/components/SortSelect.test.tsx
@@ -0,0 +1,30 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { SortSelect } from "./SortSelect";
+
+describe("SortSelect", () => {
+  it("renders an accessible select with all sort options", () => {
+    render(<SortSelect sort="title-asc" onSortChange={vi.fn()} />);
+
+    const select = screen.getByRole("combobox", { name: "Sort by" });
+
+    expect(select).toHaveValue("title-asc");
+    expect(screen.getAllByRole("option").map((option) => option.textContent)).toEqual([
+      "Title A-Z",
+      "Title Z-A",
+      "Newest first",
+      "Oldest first",
+    ]);
+  });
+
+  it("reports the selected sort option", () => {
+    const onSortChange = vi.fn();
+    render(<SortSelect sort="title-asc" onSortChange={onSortChange} />);
+
+    fireEvent.change(screen.getByRole("combobox", { name: "Sort by" }), {
+      target: { value: "newest" },
+    });
+
+    expect(onSortChange).toHaveBeenCalledWith("newest");
+  });
+});
diff --git a/src/components/SortSelect.tsx b/src/components/SortSelect.tsx
new file mode 100644
index 0000000..bed1c05
--- /dev/null
+++ b/src/components/SortSelect.tsx
@@ -0,0 +1,27 @@
+import type { SortOption } from "../types";
+import { SORT_OPTIONS } from "../utils/sortBooks";
+import "./SortSelect.css";
+
+interface SortSelectProps {
+  sort: SortOption;
+  onSortChange: (sort: SortOption) => void;
+}
+
+export function SortSelect({ sort, onSortChange }: SortSelectProps) {
+  return (
+    <label className="sort-select" htmlFor="sort-select">
+      Sort by
+      <select
+        id="sort-select"
+        value={sort}
+        onChange={(event) => onSortChange(event.target.value as SortOption)}
+      >
+        {SORT_OPTIONS.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    </label>
+  );
+}
diff --git a/src/hooks/usePreferences.ts b/src/hooks/usePreferences.ts
index e753872..bc079e9 100644
--- a/src/hooks/usePreferences.ts
+++ b/src/hooks/usePreferences.ts
@@ -1,7 +1,9 @@
 import { useState } from "react";
 import { DEFAULT_SUBJECT, SUBJECT_OPTIONS } from "../constants/subjects";
+import type { SortOption } from "../types";
 
 const PREFERENCES_KEY = "t19.preferences";
+export const DEFAULT_SORT: SortOption = "title-asc";
 
 interface Preferences {
   [key: string]: unknown;
@@ -29,11 +31,20 @@ function isSupportedSubject(subject: unknown): subject is string {
   return typeof subject === "string" && SUBJECT_OPTIONS.some((option) => option.value === subject);
 }
 
+function isSortOption(sort: unknown): sort is SortOption {
+  return sort === "title-asc" || sort === "title-desc" || sort === "newest" || sort === "oldest";
+}
+
 function getStoredSubject(): string {
   const { subject } = readPreferences();
   return isSupportedSubject(subject) ? subject : DEFAULT_SUBJECT;
 }
 
+function getStoredSort(): SortOption {
+  const { sort } = readPreferences();
+  return isSortOption(sort) ? sort : DEFAULT_SORT;
+}
+
 function saveSubject(subject: string) {
   try {
     sessionStorage.setItem(PREFERENCES_KEY, JSON.stringify({ ...readPreferences(), subject }));
@@ -42,13 +53,27 @@ function saveSubject(subject: string) {
   }
 }
 
+function saveSort(sort: SortOption) {
+  try {
+    sessionStorage.setItem(PREFERENCES_KEY, JSON.stringify({ ...readPreferences(), sort }));
+  } catch {
+    return;
+  }
+}
+
 export function usePreferences() {
   const [subject, setStoredSubject] = useState(getStoredSubject);
+  const [sort, setStoredSort] = useState<SortOption>(getStoredSort);
 
   function setSubject(nextSubject: string) {
     setStoredSubject(nextSubject);
     saveSubject(nextSubject);
   }
 
-  return { subject, setSubject };
+  function setSort(nextSort: SortOption) {
+    setStoredSort(nextSort);
+    saveSort(nextSort);
+  }
+
+  return { subject, setSubject, sort, setSort };
 }
diff --git a/src/types.ts b/src/types.ts
index be55fa3..678843e 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -23,3 +23,5 @@ export interface OpenLibrarySearchResponse {
 }
 
 export type CoverSize = "S" | "M" | "L";
+
+export type SortOption = "title-asc" | "title-desc" | "newest" | "oldest";
diff --git a/src/utils/sortBooks.test.ts b/src/utils/sortBooks.test.ts
new file mode 100644
index 0000000..941ad40
--- /dev/null
+++ b/src/utils/sortBooks.test.ts
@@ -0,0 +1,35 @@
+import { describe, expect, it } from "vitest";
+import { fixtureDocs } from "../test/handlers";
+import { type Book } from "../types";
+import { sortBooks } from "./sortBooks";
+
+const books: Book[] = fixtureDocs.map((doc) => ({
+  key: doc.key,
+  title: doc.title,
+  authors: doc.author_name ?? [],
+  firstPublishYear: doc.first_publish_year ?? null,
+  coverId: doc.cover_i ?? null,
+  subjects: doc.subject ?? [],
+}));
+
+const titles = (sort: Parameters<typeof sortBooks>[1]) =>
+  sortBooks(books, sort).map((book) => book.title);
+
+describe("sortBooks", () => {
+  it.each([
+    ["title-asc", ["A Wizard of Earthsea", "The Hobbit", "The Left Hand of Darkness"]],
+    ["title-desc", ["The Left Hand of Darkness", "The Hobbit", "A Wizard of Earthsea"]],
+    ["newest", ["The Left Hand of Darkness", "A Wizard of Earthsea", "The Hobbit"]],
+    ["oldest", ["The Hobbit", "A Wizard of Earthsea", "The Left Hand of Darkness"]],
+  ] as const)("sorts books with %s", (sort, expected) => {
+    expect(titles(sort)).toEqual(expected);
+  });
+
+  it("does not mutate the original books array", () => {
+    const originalBooks = [...books];
+
+    sortBooks(books, "title-desc");
+
+    expect(books).toEqual(originalBooks);
+  });
+});
diff --git a/src/utils/sortBooks.ts b/src/utils/sortBooks.ts
new file mode 100644
index 0000000..e28407c
--- /dev/null
+++ b/src/utils/sortBooks.ts
@@ -0,0 +1,38 @@
+import type { Book, SortOption } from "../types";
+
+export const SORT_OPTIONS: { value: SortOption; label: string }[] = [
+  { value: "title-asc", label: "Title A-Z" },
+  { value: "title-desc", label: "Title Z-A" },
+  { value: "newest", label: "Newest first" },
+  { value: "oldest", label: "Oldest first" },
+];
+
+export function sortBooks(books: Book[], sort: SortOption): Book[] {
+  return books
+    .map((book, index) => ({ book, index }))
+    .sort((left, right) => {
+      const comparison = compareBooks(left.book, right.book, sort);
+      return comparison === 0 ? left.index - right.index : comparison;
+    })
+    .map(({ book }) => book);
+}
+
+function compareBooks(left: Book, right: Book, sort: SortOption): number {
+  if (sort === "title-asc" || sort === "title-desc") {
+    const comparison = left.title.localeCompare(right.title);
+    return sort === "title-asc" ? comparison : -comparison;
+  }
+
+  if (left.firstPublishYear === null && right.firstPublishYear === null) {
+    return 0;
+  }
+  if (left.firstPublishYear === null) {
+    return 1;
+  }
+  if (right.firstPublishYear === null) {
+    return -1;
+  }
+
+  const comparison = left.firstPublishYear - right.firstPublishYear;
+  return sort === "oldest" ? comparison : -comparison;
+}

From 08b3aa7f368c7bc0cc2a46feb8164e03f709739d Mon Sep 17 00:00:00 2001
From: Rachel Stiansen <rachelks@ntnu.no>
Date: Thu, 10 Sep 2026 16:03:58 +0200
Subject: [PATCH 2/2] test: update app tests for sorting (#20)

---
 src/App.test.tsx                    | 14 ++++++++------
 src/__snapshots__/App.test.tsx.snap |  2 +-
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index 05b3049..e8edf03 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -171,22 +171,24 @@ describe("App", () => {
 
   it("saves, restores, and removes a favorite", async () => {
     const firstRender = withProviders(<App />);
-    await screen.findByRole("heading", { name: "The Hobbit" });
+    await screen.findByRole("heading", { name: "A Wizard of Earthsea" });
 
-    fireEvent.click(screen.getByRole("button", { name: "Add The Hobbit to favorites" }));
-    expect(localStorage.getItem("t19.favorites")).toBe(JSON.stringify(["/works/OL1"]));
+    fireEvent.click(screen.getByRole("button", { name: "Add A Wizard of Earthsea to favorites" }));
+    expect(localStorage.getItem("t19.favorites")).toBe(JSON.stringify(["/works/OL2"]));
 
     firstRender.unmount();
     withProviders(<App />);
-    await screen.findByRole("button", { name: "Remove The Hobbit from favorites list" });
+    await screen.findByRole("button", { name: "Remove A Wizard of Earthsea from favorites list" });
 
-    fireEvent.click(screen.getByRole("button", { name: "Remove The Hobbit from favorites list" }));
+    fireEvent.click(
+      screen.getByRole("button", { name: "Remove A Wizard of Earthsea from favorites list" }),
+    );
     expect(localStorage.getItem("t19.favorites")).toBe(JSON.stringify([]));
   });
 
   it("matches the snapshot", async () => {
     const { container } = withProviders(<App />);
-    await screen.findByRole("heading", { level: 2, name: "The Hobbit" });
+    await screen.findByRole("heading", { level: 2, name: "A Wizard of Earthsea" });
     expect(container).toMatchSnapshot();
   });
 });
diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
index 2cff17c..69cfc6c 100644
--- a/src/__snapshots__/App.test.tsx.snap
+++ b/src/__snapshots__/App.test.tsx.snap
@@ -129,7 +129,7 @@ exports[`App > matches the snapshot 1`] = `
               </li>
             </ul>
             <button
-              aria-label="Add The Hobbit to favorites"
+              aria-label="Add A Wizard of Earthsea to favorites"
               aria-pressed="false"
               class="favorite-button"
               type="button"