From 8c3d17c655ca4dfa7a4003ab2bfd7a6e4041b5ff Mon Sep 17 00:00:00 2001
From: Kevin Stadler <kevin.stadler@oeaw.ac.at>
Date: Thu, 9 Jan 2025 17:32:12 +0100
Subject: [PATCH] refactor: separate search page instantsearch provider and
 layout

---
 app/[locale]/search/layout.tsx    | 24 +++++++++
 app/[locale]/search/page.tsx      | 59 ++++++++++------------
 components/instantsearch-view.tsx | 82 -------------------------------
 3 files changed, 51 insertions(+), 114 deletions(-)
 create mode 100644 app/[locale]/search/layout.tsx
 delete mode 100644 components/instantsearch-view.tsx

diff --git a/app/[locale]/search/layout.tsx b/app/[locale]/search/layout.tsx
new file mode 100644
index 0000000..6cebaa4
--- /dev/null
+++ b/app/[locale]/search/layout.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+import { ThomasBernhardInstantSearchProvider } from "@/components/instantsearch/thomas-bernhard/thomasbernhard-instantsearchprovider";
+
+interface SearchLayoutProps {
+	children: ReactNode;
+}
+
+export default function SearchLayout(props: SearchLayoutProps): ReactNode {
+	const { children } = props;
+
+	return (
+		<ThomasBernhardInstantSearchProvider
+			queryArgsToMenuFields={{
+				language: "language" as const,
+				category: "contains.work.category" as const,
+				work: "contains.work.short_title" as const,
+				translator: "contains.translators.name" as const,
+			}}
+		>
+			{children}
+		</ThomasBernhardInstantSearchProvider>
+	);
+}
diff --git a/app/[locale]/search/page.tsx b/app/[locale]/search/page.tsx
index b1418a5..270dafe 100644
--- a/app/[locale]/search/page.tsx
+++ b/app/[locale]/search/page.tsx
@@ -4,7 +4,7 @@ import { cn } from "@acdh-oeaw/style-variants";
 import { useTranslations } from "next-intl";
 import { Menu, type MenuProps } from "react-instantsearch";
 
-import { InstantSearchView } from "@/components/instantsearch-view";
+import { Results } from "@/components/instantsearch/results";
 import { MainContent } from "@/components/main-content";
 
 function FilterMenu(props: {
@@ -51,41 +51,36 @@ function FilterMenu(props: {
 export default function SearchPage() {
 	const tl = useTranslations("Languages");
 	return (
-		<MainContent className="mx-auto h-full w-screen max-w-screen-lg p-6">
-			<InstantSearchView
-				queryArgsToMenuFields={{
-					// the order of elements here determines the order of refinement lists in the UI
-					language: "language" as const,
-					category: "contains.work.category" as const,
-					work: "contains.work.short_title" as const,
-					translator: "contains.translators.name" as const,
-				}}
-			>
-				<div className="absolute h-full overflow-y-auto pr-5">
-					<FilterMenu attribute="contains.work.short_title" />
+		<MainContent>
+			<div className="grid h-full grid-cols-[25%_75%] gap-6 px-2">
+				<div className="relative h-full">
+					<div className="absolute size-full overflow-y-auto px-2">
+						<FilterMenu attribute="contains.work.short_title" />
 
-					<FilterMenu
-						attribute="language"
-						className="lowercase"
-						transformItems={(items) => {
-							return items.map((item) => {
-								// eslint-disable-next-line @typescript-eslint/no-explicit-any
-								item.label = tl(item.label as any);
-								return item;
-							});
-						}}
-					/>
+						<FilterMenu
+							attribute="language"
+							className="lowercase"
+							transformItems={(items) => {
+								return items.map((item) => {
+									// eslint-disable-next-line @typescript-eslint/no-explicit-any
+									item.label = tl(item.label as any);
+									return item;
+								});
+							}}
+						/>
 
-					{
-						// FIXME when changing the query removes a refinement from the list, that refinement
-						// should become inactive!? otherwise it's not clear that it's still toggled...
-						// TODO pass transform
-						// <FilterMenu attribute="contains.work.category" />
-					}
+						{
+							// FIXME when changing the query removes a refinement from the list, that refinement
+							// should become inactive!? otherwise it's not clear that it's still toggled...
+							// TODO pass transform
+							// <FilterMenu attribute="contains.work.category" />
+						}
 
-					<FilterMenu attribute="contains.translators.name" />
+						<FilterMenu attribute="contains.translators.name" />
+					</div>
 				</div>
-			</InstantSearchView>
+				<Results />
+			</div>
 		</MainContent>
 	);
 }
diff --git a/components/instantsearch-view.tsx b/components/instantsearch-view.tsx
deleted file mode 100644
index 4ebb0ad..0000000
--- a/components/instantsearch-view.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-"use client";
-
-import {
-	ArrowDownAZ,
-	CalendarArrowDown,
-	CalendarArrowUp,
-	LayoutGrid,
-	LayoutList,
-} from "lucide-react";
-import { useTranslations } from "next-intl";
-import { type ReactNode, useState } from "react";
-import { Switch } from "react-aria-components";
-import { SearchBox } from "react-instantsearch";
-
-import { InfiniteScroll } from "./instantsearch/infinitescroll";
-import { PaginatedTable } from "./instantsearch/paginated-table";
-import { SingleRefinementDropdown } from "./instantsearch/single-refinement-dropdown";
-import { InstantSearchSortBy } from "./instantsearch/sortby";
-import { InstantSearchStats } from "./instantsearch/stats";
-import {
-	ThomasBernhardInstantSearchProvider,
-	type ThomasBernhardInstantSearchProviderProps,
-} from "./instantsearch/thomas-bernhard/thomasbernhard-instantsearchprovider";
-
-interface InstantSearchViewProps extends Partial<ThomasBernhardInstantSearchProviderProps> {
-	refinementDropdowns?: Record<string, string>;
-}
-
-const sortOptions = {
-	"year:asc": CalendarArrowDown,
-	"year:desc": CalendarArrowUp,
-	"title:asc": ArrowDownAZ,
-};
-
-export function InstantSearchView(props: InstantSearchViewProps): ReactNode {
-	const t = useTranslations("InstantSearch");
-
-	// TODO encode current view state in URL
-	const [view, setView] = useState<"covers" | "detail">("covers");
-
-	return (
-		<ThomasBernhardInstantSearchProvider defaultSort={Object.keys(sortOptions)[0]} {...props}>
-			<div className="grid h-full grid-cols-[12rem_1fr] gap-6 px-2">
-				<div className="relative h-full">{props.children}</div>
-				<div className="h-full">
-					<div className="flex place-content-between items-center gap-6">
-						<SearchBox placeholder={t("query_placeholder")} />
-						<span className="grow">
-							<InstantSearchStats />
-						</span>
-						{props.refinementDropdowns
-							? Object.keys(props.refinementDropdowns).map((attribute) => {
-									return (
-										<SingleRefinementDropdown
-											key={attribute}
-											allLabel={props.refinementDropdowns![attribute]!}
-											attribute={attribute}
-										/>
-									);
-								})
-							: null}
-						<InstantSearchSortBy sortOptions={sortOptions} />
-						<Switch
-							isSelected={view === "detail"}
-							onChange={(isSelected) => {
-								setView(isSelected ? "detail" : "covers");
-							}}
-						>
-							<LayoutGrid size={18} />
-							<div className="indicator" />
-							<LayoutList size={18} />
-							<span className="sr-only">{t("view.table")}</span>
-						</Switch>
-					</div>
-					<div className="relative size-full">
-						{view === "covers" ? <InfiniteScroll /> : <PaginatedTable />}
-					</div>
-				</div>
-			</div>
-		</ThomasBernhardInstantSearchProvider>
-	);
-}