From fc35644250ffc059a464914b57862c033dfee2ce Mon Sep 17 00:00:00 2001
From: Robert Andreas Kyllo <robertky@stud.ntnu.no>
Date: Wed, 16 Sep 2026 13:39:16 +0200
Subject: [PATCH 1/2] feat: add author and rating sorting (#36)

---
 src/App.test.tsx                      | 21 ++++++++++--
 src/__snapshots__/App.test.tsx.snap   | 10 ++++++
 src/api/openLibrary.test.ts           |  8 +++++
 src/api/openLibrary.ts                |  9 +++++-
 src/components/FavoritesView.test.tsx |  2 ++
 src/components/SortSelect.test.tsx    |  6 ++--
 src/test/handlers.ts                  |  6 ++++
 src/types.ts                          |  7 +++-
 src/utils/sortBooks.test.ts           | 38 ++++++++++++++++++++++
 src/utils/sortBooks.ts                | 46 +++++++++++++++++++++++++++
 10 files changed, 146 insertions(+), 7 deletions(-)

diff --git a/src/App.test.tsx b/src/App.test.tsx
index de5f00a..4aa1baf 100644
--- a/src/App.test.tsx
+++ b/src/App.test.tsx
@@ -111,6 +111,21 @@ describe("App", () => {
     expect(screen.getByRole("option", { name: "The Left Hand of Darkness" })).toBeInTheDocument();
   });
 
+  it("sorts by author and rating 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" }), "author-asc");
+    expect(await screen.findByRole("heading", { name: "The Hobbit" })).toBeInTheDocument();
+
+    await user.selectOptions(screen.getByRole("combobox", { name: "Sort by" }), "rating-desc");
+    expect(
+      await screen.findByRole("heading", { name: "The Left Hand of Darkness" }),
+    ).toBeInTheDocument();
+    expect(getSearchRequestCount()).toBe(1);
+  });
+
   it("fetches once more when the subject changes and resets to the first book", async () => {
     const user = userEvent.setup();
     withProviders(<App />);
@@ -140,15 +155,15 @@ describe("App", () => {
     await waitFor(() => expect(getSearchRequestCount()).toBe(1));
   });
 
-  it("restores the selected sort and preserves the subject preference", async () => {
+  it("restores the selected rating sort and preserves the subject preference", async () => {
     sessionStorage.setItem(
       "t19.preferences",
-      JSON.stringify({ subject: "mystery", sort: "newest" }),
+      JSON.stringify({ subject: "mystery", sort: "rating-desc" }),
     );
     withProviders(<App />);
 
     expect(screen.getByRole("combobox", { name: "Subject" })).toHaveValue("mystery");
-    expect(screen.getByRole("combobox", { name: "Sort by" })).toHaveValue("newest");
+    expect(screen.getByRole("combobox", { name: "Sort by" })).toHaveValue("rating-desc");
     expect(
       await screen.findByRole("heading", { name: "The Left Hand of Darkness" }),
     ).toBeInTheDocument();
diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
index 99d18d7..c9dddbb 100644
--- a/src/__snapshots__/App.test.tsx.snap
+++ b/src/__snapshots__/App.test.tsx.snap
@@ -79,6 +79,16 @@ exports[`App > matches the snapshot 1`] = `
             >
               Title Z-A
             </option>
+            <option
+              value="author-asc"
+            >
+              Author A-Z
+            </option>
+            <option
+              value="rating-desc"
+            >
+              Highest rated
+            </option>
             <option
               value="newest"
             >
diff --git a/src/api/openLibrary.test.ts b/src/api/openLibrary.test.ts
index 3c2df49..74cba71 100644
--- a/src/api/openLibrary.test.ts
+++ b/src/api/openLibrary.test.ts
@@ -10,6 +10,8 @@ const searchResponse = {
       title: "A Book",
       author_name: ["Jane Doe"],
       first_publish_year: 2001,
+      ratings_average: 4.5,
+      ratings_count: 23,
       cover_i: 123,
       subject: ["fantasy"],
     },
@@ -37,6 +39,8 @@ describe("searchBooksBySubject", () => {
       title: "A Book",
       authors: ["Jane Doe"],
       firstPublishYear: 2001,
+      averageRating: 4.5,
+      ratingsCount: 23,
       coverId: 123,
       subjects: ["fantasy"],
     });
@@ -45,6 +49,8 @@ describe("searchBooksBySubject", () => {
       title: "Bare Bones",
       authors: [],
       firstPublishYear: null,
+      averageRating: null,
+      ratingsCount: null,
       coverId: null,
       subjects: [],
     });
@@ -58,6 +64,8 @@ describe("searchBooksBySubject", () => {
     expect(url.searchParams.get("subject")).toBe("history");
     expect(url.searchParams.get("limit")).toBe(String(BOOKS_PER_SUBJECT));
     expect(url.searchParams.get("fields")).toContain("title");
+    expect(url.searchParams.get("fields")).toContain("ratings_average");
+    expect(url.searchParams.get("fields")).toContain("ratings_count");
   });
 
   it("throws on a failed response", async () => {
diff --git a/src/api/openLibrary.ts b/src/api/openLibrary.ts
index eafb841..707ba1c 100644
--- a/src/api/openLibrary.ts
+++ b/src/api/openLibrary.ts
@@ -5,7 +5,8 @@ const COVER_URL = "https://covers.openlibrary.org/b/id";
 
 export const BOOKS_PER_SUBJECT = 10;
 
-const BOOK_FIELDS = "key,title,author_name,first_publish_year,cover_i,subject";
+const BOOK_FIELDS =
+  "key,title,author_name,first_publish_year,ratings_average,ratings_count,cover_i,subject";
 
 export async function searchBooksBySubject(
   subject: string,
@@ -30,7 +31,13 @@ function toBook(doc: OpenLibrarySearchDoc): Book {
     title: doc.title,
     authors: doc.author_name ?? [],
     firstPublishYear: doc.first_publish_year ?? null,
+    averageRating: numberOrNull(doc.ratings_average),
+    ratingsCount: numberOrNull(doc.ratings_count),
     coverId: doc.cover_i ?? null,
     subjects: doc.subject ?? [],
   };
 }
+
+function numberOrNull(value: number | undefined): number | null {
+  return typeof value === "number" && Number.isFinite(value) ? value : null;
+}
diff --git a/src/components/FavoritesView.test.tsx b/src/components/FavoritesView.test.tsx
index d983911..f61fd1f 100644
--- a/src/components/FavoritesView.test.tsx
+++ b/src/components/FavoritesView.test.tsx
@@ -9,6 +9,8 @@ const books: Book[] = [
     title: "The Hobbit",
     authors: ["J. R. R. Tolkien"],
     firstPublishYear: 1937,
+    averageRating: 4.2,
+    ratingsCount: 100,
     coverId: 123,
     subjects: ["fantasy"],
   },
diff --git a/src/components/SortSelect.test.tsx b/src/components/SortSelect.test.tsx
index f5d21a5..4e36530 100644
--- a/src/components/SortSelect.test.tsx
+++ b/src/components/SortSelect.test.tsx
@@ -12,6 +12,8 @@ describe("SortSelect", () => {
     expect(screen.getAllByRole("option").map((option) => option.textContent)).toEqual([
       "Title A-Z",
       "Title Z-A",
+      "Author A-Z",
+      "Highest rated",
       "Newest first",
       "Oldest first",
     ]);
@@ -22,9 +24,9 @@ describe("SortSelect", () => {
     render(<SortSelect sort="title-asc" onSortChange={onSortChange} />);
 
     fireEvent.change(screen.getByRole("combobox", { name: "Sort by" }), {
-      target: { value: "newest" },
+      target: { value: "rating-desc" },
     });
 
-    expect(onSortChange).toHaveBeenCalledWith("newest");
+    expect(onSortChange).toHaveBeenCalledWith("rating-desc");
   });
 });
diff --git a/src/test/handlers.ts b/src/test/handlers.ts
index 865437c..cbb4c99 100644
--- a/src/test/handlers.ts
+++ b/src/test/handlers.ts
@@ -7,6 +7,8 @@ export const fixtureDocs: OpenLibrarySearchDoc[] = [
     title: "The Hobbit",
     author_name: ["J. R. R. Tolkien"],
     first_publish_year: 1937,
+    ratings_average: 4.2,
+    ratings_count: 100,
     cover_i: 123,
     subject: ["fantasy", "dragons"],
   },
@@ -15,6 +17,8 @@ export const fixtureDocs: OpenLibrarySearchDoc[] = [
     title: "A Wizard of Earthsea",
     author_name: ["Ursula K. Le Guin"],
     first_publish_year: 1968,
+    ratings_average: 4.8,
+    ratings_count: 20,
     subject: ["fantasy", "magic"],
   },
   {
@@ -22,6 +26,8 @@ export const fixtureDocs: OpenLibrarySearchDoc[] = [
     title: "The Left Hand of Darkness",
     author_name: ["Ursula K. Le Guin"],
     first_publish_year: 1969,
+    ratings_average: 4.8,
+    ratings_count: 50,
   },
 ];
 
diff --git a/src/types.ts b/src/types.ts
index 678843e..eaefb68 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -3,6 +3,8 @@ export interface Book {
   title: string;
   authors: string[];
   firstPublishYear: number | null;
+  averageRating: number | null;
+  ratingsCount: number | null;
   coverId: number | null;
   subjects: string[];
 }
@@ -12,6 +14,8 @@ export interface OpenLibrarySearchDoc {
   title: string;
   author_name?: string[];
   first_publish_year?: number;
+  ratings_average?: number;
+  ratings_count?: number;
   cover_i?: number;
   subject?: string[];
 }
@@ -24,4 +28,5 @@ export interface OpenLibrarySearchResponse {
 
 export type CoverSize = "S" | "M" | "L";
 
-export type SortOption = "title-asc" | "title-desc" | "newest" | "oldest";
+export type SortOption =
+  "title-asc" | "title-desc" | "author-asc" | "rating-desc" | "newest" | "oldest";
diff --git a/src/utils/sortBooks.test.ts b/src/utils/sortBooks.test.ts
index 941ad40..c0dde4c 100644
--- a/src/utils/sortBooks.test.ts
+++ b/src/utils/sortBooks.test.ts
@@ -8,6 +8,8 @@ const books: Book[] = fixtureDocs.map((doc) => ({
   title: doc.title,
   authors: doc.author_name ?? [],
   firstPublishYear: doc.first_publish_year ?? null,
+  averageRating: doc.ratings_average ?? null,
+  ratingsCount: doc.ratings_count ?? null,
   coverId: doc.cover_i ?? null,
   subjects: doc.subject ?? [],
 }));
@@ -19,6 +21,8 @@ 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"]],
+    ["author-asc", ["The Hobbit", "A Wizard of Earthsea", "The Left Hand of Darkness"]],
+    ["rating-desc", ["The Left Hand of Darkness", "A Wizard of Earthsea", "The Hobbit"]],
     ["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) => {
@@ -32,4 +36,38 @@ describe("sortBooks", () => {
 
     expect(books).toEqual(originalBooks);
   });
+
+  it("places books with missing authors and ratings after available values", () => {
+    const booksWithMissingValues: Book[] = [
+      {
+        key: "/works/OL4",
+        title: "No Details",
+        authors: [],
+        firstPublishYear: null,
+        averageRating: null,
+        ratingsCount: null,
+        coverId: null,
+        subjects: [],
+      },
+      {
+        key: "/works/OL5",
+        title: "Rated Book",
+        authors: ["Ada Author"],
+        firstPublishYear: null,
+        averageRating: 4.5,
+        ratingsCount: 10,
+        coverId: null,
+        subjects: [],
+      },
+    ];
+
+    expect(sortBooks(booksWithMissingValues, "author-asc").map((book) => book.title)).toEqual([
+      "Rated Book",
+      "No Details",
+    ]);
+    expect(sortBooks(booksWithMissingValues, "rating-desc").map((book) => book.title)).toEqual([
+      "Rated Book",
+      "No Details",
+    ]);
+  });
 });
diff --git a/src/utils/sortBooks.ts b/src/utils/sortBooks.ts
index e28407c..948bd58 100644
--- a/src/utils/sortBooks.ts
+++ b/src/utils/sortBooks.ts
@@ -3,6 +3,8 @@ 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: "author-asc", label: "Author A-Z" },
+  { value: "rating-desc", label: "Highest rated" },
   { value: "newest", label: "Newest first" },
   { value: "oldest", label: "Oldest first" },
 ];
@@ -23,6 +25,14 @@ function compareBooks(left: Book, right: Book, sort: SortOption): number {
     return sort === "title-asc" ? comparison : -comparison;
   }
 
+  if (sort === "author-asc") {
+    return compareAuthors(left, right);
+  }
+
+  if (sort === "rating-desc") {
+    return compareRatings(left, right);
+  }
+
   if (left.firstPublishYear === null && right.firstPublishYear === null) {
     return 0;
   }
@@ -36,3 +46,39 @@ function compareBooks(left: Book, right: Book, sort: SortOption): number {
   const comparison = left.firstPublishYear - right.firstPublishYear;
   return sort === "oldest" ? comparison : -comparison;
 }
+
+function compareAuthors(left: Book, right: Book): number {
+  const leftAuthor = left.authors[0]?.trim() || null;
+  const rightAuthor = right.authors[0]?.trim() || null;
+
+  if (leftAuthor === null && rightAuthor === null) {
+    return 0;
+  }
+  if (leftAuthor === null) {
+    return 1;
+  }
+  if (rightAuthor === null) {
+    return -1;
+  }
+
+  return leftAuthor.localeCompare(rightAuthor);
+}
+
+function compareRatings(left: Book, right: Book): number {
+  if (left.averageRating === null && right.averageRating === null) {
+    return 0;
+  }
+  if (left.averageRating === null) {
+    return 1;
+  }
+  if (right.averageRating === null) {
+    return -1;
+  }
+
+  const ratingComparison = right.averageRating - left.averageRating;
+  if (ratingComparison !== 0) {
+    return ratingComparison;
+  }
+
+  return (right.ratingsCount ?? 0) - (left.ratingsCount ?? 0);
+}

From 5d910aef539a229ea6bd1cd45e45170ad1aa093e Mon Sep 17 00:00:00 2001
From: Robert Andreas Kyllo <robertky@stud.ntnu.no>
Date: Wed, 16 Sep 2026 13:39:57 +0200
Subject: [PATCH 2/2] feat: show OpenLibrary ratings on book cards (#36)

---
 src/__snapshots__/App.test.tsx.snap                 | 8 ++++++++
 src/components/BookCard.css                         | 5 +++++
 src/components/BookCard.test.tsx                    | 6 ++++++
 src/components/BookCard.tsx                         | 6 ++++++
 src/components/__snapshots__/BookCard.test.tsx.snap | 8 ++++++++
 5 files changed, 33 insertions(+)

diff --git a/src/__snapshots__/App.test.tsx.snap b/src/__snapshots__/App.test.tsx.snap
index c9dddbb..9ac41dc 100644
--- a/src/__snapshots__/App.test.tsx.snap
+++ b/src/__snapshots__/App.test.tsx.snap
@@ -131,6 +131,14 @@ exports[`App > matches the snapshot 1`] = `
               First published: 
               1968
             </p>
+            <p
+              class="book-card-rating"
+            >
+              Rating: 
+              4.8
+               / 5
+               (20 ratings)
+            </p>
             <ul
               aria-label="Subjects, showing 2 of 2"
               class="book-card-subjects"
diff --git a/src/components/BookCard.css b/src/components/BookCard.css
index 3ab6294..93f4b43 100644
--- a/src/components/BookCard.css
+++ b/src/components/BookCard.css
@@ -48,6 +48,11 @@
   font-weight: 600;
 }
 
+.book-card-rating {
+  color: #243b53;
+  font-weight: 600;
+}
+
 .book-card-subjects {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/BookCard.test.tsx b/src/components/BookCard.test.tsx
index e7d853f..c2ea984 100644
--- a/src/components/BookCard.test.tsx
+++ b/src/components/BookCard.test.tsx
@@ -8,6 +8,8 @@ const fullBook: Book = {
   title: "A Wizard of Earthsea",
   authors: ["Ursula K. Le Guin", "Another Author"],
   firstPublishYear: 1968,
+  averageRating: 4.2,
+  ratingsCount: 100,
   coverId: 123,
   subjects: ["Fantasy", "Magic"],
 };
@@ -17,6 +19,8 @@ const minimalBook: Book = {
   title: "Untitled Book",
   authors: [],
   firstPublishYear: null,
+  averageRating: null,
+  ratingsCount: null,
   coverId: null,
   subjects: [],
 };
@@ -27,6 +31,7 @@ describe("BookCard", () => {
 
     expect(screen.getByRole("heading", { name: fullBook.title })).toBeInTheDocument();
     expect(screen.getByText("Ursula K. Le Guin, Another Author")).toBeInTheDocument();
+    expect(screen.getByText("Rating: 4.2 / 5 (100 ratings)")).toBeInTheDocument();
     expect(screen.getByRole("img", { name: "Cover of A Wizard of Earthsea" })).toBeInTheDocument();
     expect(screen.getByRole("list", { name: "Subjects, showing 2 of 2" })).toHaveTextContent(
       "Fantasy",
@@ -39,6 +44,7 @@ describe("BookCard", () => {
 
     expect(screen.getByRole("heading", { name: minimalBook.title })).toBeInTheDocument();
     expect(screen.getByText("Unknown author")).toBeInTheDocument();
+    expect(screen.queryByText(/^Rating:/)).not.toBeInTheDocument();
     expect(screen.getByText("No cover available")).toBeInTheDocument();
     expect(screen.queryByRole("img")).not.toBeInTheDocument();
     expect(container).toMatchSnapshot();
diff --git a/src/components/BookCard.tsx b/src/components/BookCard.tsx
index 7518ce4..cb55999 100644
--- a/src/components/BookCard.tsx
+++ b/src/components/BookCard.tsx
@@ -30,6 +30,12 @@ export function BookCard({ book, isFavorite = false, onFavoriteToggle }: BookCar
         <h2>{book.title}</h2>
         <p className="book-card-authors">{authors}</p>
         {book.firstPublishYear !== null && <p>First published: {book.firstPublishYear}</p>}
+        {book.averageRating !== null && (
+          <p className="book-card-rating">
+            Rating: {book.averageRating.toFixed(1)} / 5
+            {book.ratingsCount !== null && ` (${book.ratingsCount} ratings)`}
+          </p>
+        )}
         {book.subjects.length > 0 && (
           <ul
             className="book-card-subjects"
diff --git a/src/components/__snapshots__/BookCard.test.tsx.snap b/src/components/__snapshots__/BookCard.test.tsx.snap
index f60ba5c..bf9dd87 100644
--- a/src/components/__snapshots__/BookCard.test.tsx.snap
+++ b/src/components/__snapshots__/BookCard.test.tsx.snap
@@ -28,6 +28,14 @@ exports[`BookCard > renders a complete book 1`] = `
         First published: 
         1968
       </p>
+      <p
+        class="book-card-rating"
+      >
+        Rating: 
+        4.2
+         / 5
+         (100 ratings)
+      </p>
       <ul
         aria-label="Subjects, showing 2 of 2"
         class="book-card-subjects"