From 544cf5173d1c98614469596f184c6ba8c06b8eef Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Tue, 7 Nov 2023 15:30:35 -0500 Subject: [PATCH 1/8] Initialize sort select --- pages/search/index.tsx | 43 +++++++++++++++++++++++++++++++++--------- 1 file changed, 34 insertions(+), 9 deletions(-) diff --git a/pages/search/index.tsx b/pages/search/index.tsx index d87514405..f23855724 100644 --- a/pages/search/index.tsx +++ b/pages/search/index.tsx @@ -1,5 +1,9 @@ import Head from "next/head" -import { Heading, SimpleGrid } from "@nypl/design-system-react-components" +import { + Heading, + SimpleGrid, + Select, +} from "@nypl/design-system-react-components" import { useRouter } from "next/router" import { parse } from "qs" @@ -11,6 +15,7 @@ import { fetchResults } from "../api/search" import { mapQueryToSearchParams, mapElementsToSearchResultsBibs, + getQueryString, } from "../../src/utils/searchUtils" import { mapWorksToDRBResults } from "../../src/utils/drbUtils" import { SITE_NAME } from "../../src/config/constants" @@ -21,7 +26,7 @@ import type SearchResultsBib from "../../src/models/SearchResultsBib" * as well as displaying and controlling pagination and search filters. */ export default function Search({ results }) { - const { query } = useRouter() + const { replace, query } = useRouter() const { itemListElement: searchResultsElements, totalResults } = results.results @@ -37,6 +42,11 @@ export default function Search({ results }) { // Map DRB Works from response to DRBResult objects const drbResults = mapWorksToDRBResults(drbWorks) + const handleSortChange = async (e) => { + const newQuery = getQueryString({ ...searchParams, sortBy: e.target.value }) + await replace(newQuery) + } + return ( <> @@ -45,13 +55,28 @@ export default function Search({ results }) { - ) + <> + {totalResults && ( + + )} + {drbResponse?.totalWorks && ( + + )} + } > {totalResults ? ( From 1e6d00b6378d289baafd3bb2cfa80de6904b06f0 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Tue, 7 Nov 2023 15:51:21 -0500 Subject: [PATCH 2/8] Render sort options in select --- pages/search/index.tsx | 8 ++++++-- src/types/searchTypes.ts | 9 ++++++++- src/utils/drbUtils.ts | 2 +- src/utils/searchUtils.ts | 15 ++++++++++++++- 4 files changed, 29 insertions(+), 5 deletions(-) diff --git a/pages/search/index.tsx b/pages/search/index.tsx index f23855724..8851dc4e3 100644 --- a/pages/search/index.tsx +++ b/pages/search/index.tsx @@ -16,6 +16,7 @@ import { mapQueryToSearchParams, mapElementsToSearchResultsBibs, getQueryString, + sortOptions, } from "../../src/utils/searchUtils" import { mapWorksToDRBResults } from "../../src/utils/drbUtils" import { SITE_NAME } from "../../src/config/constants" @@ -65,8 +66,11 @@ export default function Search({ results }) { onChange={handleSortChange} value={searchParams.sortBy} > - - + {Object.keys(sortOptions).map((key) => ( + + ))} )} {drbResponse?.totalWorks && ( diff --git a/src/types/searchTypes.ts b/src/types/searchTypes.ts index d640486df..8c626b881 100644 --- a/src/types/searchTypes.ts +++ b/src/types/searchTypes.ts @@ -32,7 +32,7 @@ export interface Identifiers { export interface SearchParams { q?: string field?: string - sortBy?: string + sortBy?: SortKey order?: string filters?: SearchFilters contributor?: string @@ -42,6 +42,13 @@ export interface SearchParams { identifiers?: Identifiers } +export type SortKey = + | "relevance" + | "title_asc" + | "title_desc" + | "date_asc" + | "date_desc" + type SearchFormField = { value: string } export interface SearchResultsResponse { diff --git a/src/utils/drbUtils.ts b/src/utils/drbUtils.ts index e8809dc75..e96c04030 100644 --- a/src/utils/drbUtils.ts +++ b/src/utils/drbUtils.ts @@ -80,7 +80,7 @@ function mapSearchParamsToDRBQueryParams(params: SearchParams): DRBQueryParams { } if (sortBy) { - const sortDirection = order || (sortBy === "date" ? "desc" : "asc") + const sortDirection = order || (sortBy === "date_desc" ? "desc" : "asc") drbQuery.sort = [sortBy, sortDirection].join(":") } diff --git a/src/utils/searchUtils.ts b/src/utils/searchUtils.ts index 2f3bd76ad..b48dd4f0a 100644 --- a/src/utils/searchUtils.ts +++ b/src/utils/searchUtils.ts @@ -6,6 +6,7 @@ import type { SearchFilters, Identifiers, SearchResultsElement, + SortKey, } from "../types/searchTypes" import SearchResultsBib from "../models/SearchResultsBib" @@ -165,6 +166,18 @@ export function mapElementsToSearchResultsBibs( /* eslint-disable @typescript-eslint/naming-convention */ +/** + * sortOptions + * The allowed keys for the sort field and their respective labels + */ +export const sortOptions: Record = { + relevance: "Relevance", + title_asc: "Title (A - Z)", + title_desc: "Title (Z - A)", + date_asc: "Date (Old to New)", + date_desc: "Date (New to Old)", +} + /** * mapQueryToSearchParams * Maps the SearchQueryParams structure from the request to a SearchParams object, which is expected by fetchResults @@ -191,7 +204,7 @@ export function mapQueryToSearchParams({ contributor, title, subject, - sortBy: sort, + sortBy: sort as SortKey, order: sort_direction, filters, identifiers: { From 72448ff46aff504b1b0f11acf82ae5361f5fba91 Mon Sep 17 00:00:00 2001 From: Diego Cohen Date: Tue, 7 Nov 2023 16:04:03 -0500 Subject: [PATCH 3/8] Pass sort direction on select change --- pages/search/index.tsx | 9 +++++++-- src/types/searchTypes.ts | 10 +++------- src/utils/drbUtils.ts | 2 +- src/utils/searchUtils.ts | 5 +++-- 4 files changed, 14 insertions(+), 12 deletions(-) diff --git a/pages/search/index.tsx b/pages/search/index.tsx index 8851dc4e3..068b4aa65 100644 --- a/pages/search/index.tsx +++ b/pages/search/index.tsx @@ -44,7 +44,8 @@ export default function Search({ results }) { const drbResults = mapWorksToDRBResults(drbWorks) const handleSortChange = async (e) => { - const newQuery = getQueryString({ ...searchParams, sortBy: e.target.value }) + const [sortBy, order] = e.target.value.split("_") + const newQuery = getQueryString({ ...searchParams, sortBy, order }) await replace(newQuery) } @@ -64,7 +65,11 @@ export default function Search({ results }) { labelText="Sort by" mb="l" onChange={handleSortChange} - value={searchParams.sortBy} + value={ + searchParams.order + ? `${searchParams.sortBy}_${searchParams.order}` + : searchParams.sortBy + } > {Object.keys(sortOptions).map((key) => (