Remove page number on sorting changes, add test and comments

__test__/pages/search/searchResults.test.tsx

@@ -12,11 +12,14 @@ jest.mock("next/router", () => jest.requireActual("next-router-mock"))
 
 describe("Search Results page", () => {
   describe("More than 50 bibs", () => {
-    it("displays many bibs", () => {
-      const query = "spaghetti"
+    let query: string
+
+    beforeEach(() => {
+      query = "spaghetti"
       mockRouter.push(`/search?q=${query}`)
       render(<SearchResults results={results} />)
-
+    })
+    it("displays many bibs", () => {
       const displayingText = screen.getByRole("heading", { level: 2 })
       expect(displayingText).toHaveTextContent(
         `Displaying 1-50 of ${results.results.totalResults} results for keyword "${query}"`
@@ -25,10 +28,6 @@ describe("Search Results page", () => {
       expect(cards).toHaveLength(50)
     })
     it("renders the sort select field and updates the query string in the url on changes", async () => {
-      const query = "spaghetti"
-      await mockRouter.push(`/search?q=${query}`)
-      render(<SearchResults results={results} />)
-
       const sortSelect = screen.getByLabelText("Sort by")
       expect(sortSelect).toHaveValue("relevance")
       await userEvent.selectOptions(sortSelect, "Title (A - Z)")
@@ -38,6 +37,15 @@ describe("Search Results page", () => {
         "/?q=spaghetti&sort=title&sort_direction=asc"
       )
     })
+    it("returns the user to the first page on sorting changes", async () => {
+      await mockRouter.push(`/search?q=${query}&page=2`)
+      const sortSelect = screen.getByLabelText("Sort by")
+      await userEvent.selectOptions(sortSelect, "Title (Z - A)")
+
+      expect(mockRouter.asPath).toBe(
+        "/?q=spaghetti&sort=title&sort_direction=desc"
+      )
+    })
   })
   describe("No bibs", () => {
     it("displays No results message", () => {

pages/search/index.tsx

@@ -4,6 +4,7 @@ import {
   SimpleGrid,
   Select,
 } from "@nypl/design-system-react-components"
+import type { ChangeEvent } from "react"
 import { useRouter } from "next/router"
 import { parse } from "qs"
 
@@ -18,6 +19,7 @@ import {
   getQueryString,
   sortOptions,
 } from "../../src/utils/searchUtils"
+import type { SortKey, SortOrder } from "../../src/types/searchTypes"
 import { mapWorksToDRBResults } from "../../src/utils/drbUtils"
 import { SITE_NAME } from "../../src/config/constants"
 import type SearchResultsBib from "../../src/models/SearchResultsBib"
@@ -43,9 +45,17 @@ export default function Search({ results }) {
   // Map DRB Works from response to DRBResult objects
   const drbResults = mapWorksToDRBResults(drbWorks)
 
-  const handleSortChange = async (e) => {
-    const [sortBy, order] = e.target.value.split("_")
-    await push(getQueryString({ ...searchParams, sortBy, order }))
+  const handleSortChange = async (e: ChangeEvent<HTMLInputElement>) => {
+    const selectedSortOption = e.target.value
+    // Extract sort key and order from selected sort option using "_" delineator
+    const [sortBy, order] = selectedSortOption.split("_") as [
+      SortKey,
+      SortOrder | undefined
+    ]
+    // Push the new query values, removing the page number if set.
+    await push(
+      getQueryString({ ...searchParams, sortBy, order, page: undefined })
+    )
   }
 
   return (