fix: stop createURL eating up arguments under works/category

acdh-oeaw · Jan 15, 2025 · 3e1b5f9 · 3e1b5f9
1 parent 4d0b80a
commit 3e1b5f9
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 38 deletions.
diff --git a/components/instantsearch/instantsearchprovider.tsx b/components/instantsearch/instantsearchprovider.tsx
@@ -33,13 +33,12 @@ export function InstantSearchProvider(props: InstantSearchProviderProps): ReactN
 			indexName={collectionName}
 			routing={{
 				router: {
-					// FIXME without pageName the url rewriter eats up queryargs?
-
 					// "The difference here is that routing.router takes the same options as the historyRouter."
 					createURL({ location, routeState, qsModule }) {
 						const parts = location.pathname.split("/");
 						if (pageName) {
-							if (parts.at(-1) !== pageName) {
+							const splitPageName = pageName.split("/");
+							if (parts.at(-1) !== splitPageName.at(-1)) {
 								parts.pop();
 							}
 							// don't add value if it is undefined
@@ -64,7 +63,8 @@ export function InstantSearchProvider(props: InstantSearchProviderProps): ReactN
 						if (pageName) {
 							// trim leading and trailing slashes
 							const parts = location.pathname.replace(/^\/+|\/+$/gm, "").split("/");
-							if (parts.at(-1) !== pageName) {
+							const splitPageName = pageName.split("/");
+							if (parts.at(-1) !== splitPageName.at(-1)) {
 								// the last element is not the expected page name, assume it's the value of the
 								// pathnameField
 								queryArgs[pathnameField ?? pageName] = parts.at(-1);
@@ -101,9 +101,9 @@ export function InstantSearchProvider(props: InstantSearchProviderProps): ReactN
 					stateToRoute: (uiState: UiState) => {
 						const indexUiState = uiState[collectionName]!;
 						const route = {} as RouteState;
-						if (pathnameField) {
-							route[pathnameField] = undefined;
-						}
+						// if (pathnameField) {
+						// 	route[pathnameField] = undefined;
+						// }
 						if (indexUiState.query) {
 							route.q = encodeURI(indexUiState.query);
 						}
@@ -119,7 +119,9 @@ export function InstantSearchProvider(props: InstantSearchProviderProps): ReactN
 									const queryarg = Object.entries(queryArgsToMenuFields).find(([_k, v]) => {
 										return v === field;
 									})?.[0];
-									route[queryarg!] = encodeURI(value);
+									if (queryarg) {
+										route[queryarg] = encodeURI(value);
+									}
 								}
 							}
 							if (pathnameField) {

diff --git a/components/instantsearch/single-refinement-list.tsx b/components/instantsearch/single-refinement-list.tsx
@@ -1,6 +1,8 @@
 "use client";
 import { cn } from "@acdh-oeaw/style-variants";
+import type { MenuItem } from "instantsearch.js/es/connectors/menu/connectMenu";
 import type { RefinementListItem } from "instantsearch.js/es/connectors/refinement-list/connectRefinementList";
+import type { ReactNode } from "react";
 import { useMenu, type UseMenuProps } from "react-instantsearch";
 
 interface SingleRefinementListProps {
@@ -18,25 +20,64 @@ const defaultTransformItems = (items: Array<RefinementListItem>) => {
 	});
 };
 
+interface MenuItemProps {
+	className?: string;
+	item: MenuItem;
+	refine: (value: string) => void;
+	// pathname?: string;
+}
+
+function MenuItem(props: MenuItemProps): ReactNode {
+	const { className, item, refine } = props;
+	return (
+		<label
+			key={item.label}
+			className={cn(
+				"block p-1 text-right leading-tight focus-within:outline focus-within:outline-2",
+				className,
+			)}
+		>
+			<input
+				checked={item.isRefined}
+				className="sr-only"
+				name="refinement"
+				onChange={() => {
+					refine(item.value);
+				}}
+				type="radio"
+			/>
+			<span
+				className={cn(
+					"hover:cursor-pointer hover:text-[--color-link-hover]",
+					item.isRefined ? "text-[--color-link-active]" : "text-[--color-link]",
+				)}
+			>
+				{item.label}
+			</span>
+		</label>
+	);
+}
+
 // a refinement list that is alphabetically ordered and only allows filtering for one value
 export function SingleRefinementList(props: SingleRefinementListProps) {
+	const { attribute, allLabel, refinementArgs, className } = props;
 	const { items, refine } = useMenu({
-		attribute: props.attribute,
+		attribute: attribute,
 		limit: 1000,
 		sortBy: ["name"],
 		transformItems: defaultTransformItems,
-		...props.refinementArgs,
+		...refinementArgs,
 	});
 
 	return (
 		<div className="absolute grid size-full grid-rows-[auto_1fr] overflow-y-auto">
-			{props.allLabel ? (
+			{allLabel ? (
 				<div className="mt-1 px-2">
 					<label
 						key="all"
 						className={cn(
 							"block text-right focus-within:outline focus-within:outline-2",
-							props.className,
+							className,
 						)}
 					>
 						<input
@@ -60,39 +101,22 @@ export function SingleRefinementList(props: SingleRefinementListProps) {
 									: "text-[--color-link-active]",
 							)}
 						>
-							{props.allLabel}
+							{allLabel}
 						</span>
 					</label>
 				</div>
 			) : null}
 			<div className="h-full p-2">
 				{items.map((item) => {
 					return (
-						<label
-							key={item.label}
-							className={cn(
-								"block p-1 text-right leading-tight focus-within:outline focus-within:outline-2",
-								props.className,
-							)}
-						>
-							<input
-								checked={item.isRefined}
-								className="sr-only"
-								name="refinement"
-								onChange={() => {
-									refine(item.value);
-								}}
-								type="radio"
-							/>
-							<span
-								className={cn(
-									"hover:cursor-pointer hover:text-[--color-link-hover]",
-									item.isRefined ? "text-[--color-link-active]" : "text-[--color-link]",
-								)}
-							>
-								{item.label}
-							</span>
-						</label>
+						<MenuItem
+							key={item.value}
+							className={className}
+							// createURL={createURL}
+							item={item}
+							// pathname={pathname}
+							refine={refine}
+						/>
 					);
 				})}
 			</div>