diff --git a/__tests__/url.test.ts b/__tests__/url.test.ts new file mode 100644 index 00000000..c12c5ef8 --- /dev/null +++ b/__tests__/url.test.ts @@ -0,0 +1,22 @@ +import { expect, test, vi } from "vitest" + +import { resolveUrl } from "../lib/helpers/helper.routes" + +test("That resolveUrl can return a work url", async () => { + const workUrl = resolveUrl({ type: "work", routeParams: { id: 123 } }) + expect(workUrl).toBe("/work/123") +}) + +test("That resolveUrl can return a work url with a manifestation type", async () => { + const workUrl = resolveUrl({ + type: "work", + routeParams: { id: 123 }, + queryParams: { audio: "true" }, + }) + expect(workUrl).toBe("/work/123?audio=true") +}) + +test("That resolveUrl can return a search url", async () => { + const workUrl = resolveUrl({ type: "search", queryParams: { q: "test" } }) + expect(workUrl).toBe("/search?q=test") +}) diff --git a/components/shared/workCard/WorkCard.tsx b/components/shared/workCard/WorkCard.tsx index b0f19044..efc75f1f 100644 --- a/components/shared/workCard/WorkCard.tsx +++ b/components/shared/workCard/WorkCard.tsx @@ -2,7 +2,7 @@ import Link from "next/link" import React from "react" import { WorkTeaserFragment } from "@/lib/graphql/generated/fbi/graphql" -import { resolveWorkUrl } from "@/lib/helpers/helper.routes" +import { resolveUrl } from "@/lib/helpers/helper.routes" import { getIsbnsFromWork } from "@/lib/helpers/ids" import { useGetCoverCollection } from "@/lib/rest/cover-service-api/generated/cover-service" import { GetCoverCollectionSizesItem } from "@/lib/rest/cover-service-api/generated/model" @@ -56,7 +56,9 @@ const WorkCard = ({ work }: WorkCardProps) => { const lowResCover = getLowResCoverUrl(dataCovers) return ( - +
{ const value = encodeURIComponent(params[key]) @@ -16,19 +17,40 @@ function buildRoute(route: string, params?: RouteParams, query?: QueryParams): s }, route) } + const queryParams = new URLSearchParams() if (query) { - const queryString = Object.keys(query) - .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`) - .join("&") - route += `?${queryString}` + Object.keys(query).forEach(key => { + queryParams.append(key, query[key].toString()) + }) + } + + if (queryParams.toString()) { + return `${route}?${queryParams}` } return route } -// Add url resolvers for each route below -const resolveWorkUrl = (id: string) => { - return buildRoute("/work/:id", { id: id }) -} +type ResolveUrlOptions = + | { + type: "work" + routeParams?: { id: number | string } + queryParams?: QueryParams + } + | { + type: "search" + routeParams?: undefined + queryParams?: QueryParams + } -export { resolveWorkUrl, buildRoute } +export const resolveUrl = ({ type, routeParams, queryParams }: ResolveUrlOptions) => { + switch (type as ResolveUrlOptions["type"]) { + case "work": + if (!routeParams?.id) return "" + return buildRoute({ route: "/work/:id", params: { id: routeParams.id }, query: queryParams }) + case "search": + return buildRoute({ route: "/search", query: queryParams }) + default: + return "" + } +}