perf: move functions out of instantsearch function component

acdh-oeaw · Sep 2, 2024 · b8f41b5 · b8f41b5
1 parent f176188
commit b8f41b5
Showing 1 changed file with 56 additions and 50 deletions.
diff --git a/app/instantsearch/instantsearch.tsx b/app/instantsearch/instantsearch.tsx
@@ -7,64 +7,70 @@ import TypesenseInstantSearchAdapter, { type SearchClient } from "typesense-inst
 import { ClickablePublicationThumbnail } from "@/components/publication-cover";
 import type { Publication } from "@/types/model";
 
-export function InstantSearch() {
-	const t = useTranslations("SearchPage");
+const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
+	server: {
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		apiKey: process.env.NEXT_PUBLIC_TYPESENSE_API_KEY!,
+		nodes: [
+			{
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				host: process.env.NEXT_PUBLIC_TYPESENSE_HOST!,
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				port: Number(process.env.NEXT_PUBLIC_TYPESENSE_PORT!),
+				// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+				protocol: process.env.NEXT_PUBLIC_TYPESENSE_PROTOCOL!,
+			},
+		],
+	},
+	// The following parameters are directly passed to Typesense's search API endpoint.
+	//  So you can pass any parameters supported by the search endpoint below.
+	//  queryBy is required.
+	additionalSearchParameters: {
+		query_by: "title",
+	},
+});
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+const searchClient = typesenseInstantsearchAdapter.searchClient as unknown as SearchClient;
 
-	const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
-		server: {
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			apiKey: process.env.NEXT_PUBLIC_TYPESENSE_API_KEY!,
-			nodes: [
-				{
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					host: process.env.NEXT_PUBLIC_TYPESENSE_HOST!,
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					port: Number(process.env.NEXT_PUBLIC_TYPESENSE_PORT!),
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					protocol: process.env.NEXT_PUBLIC_TYPESENSE_PROTOCOL!,
-				},
-			],
-		},
-		// The following parameters are directly passed to Typesense's search API endpoint.
-		//  So you can pass any parameters supported by the search endpoint below.
-		//  queryBy is required.
-		additionalSearchParameters: {
-			query_by: "title",
-		},
-	});
-	// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-	const searchClient = typesenseInstantsearchAdapter.searchClient as unknown as SearchClient;
+function DefaultRefinementList({
+	attribute,
+	placeholder,
+}: {
+	attribute: string;
+	placeholder: string;
+}) {
+	return (
+		<RefinementList
+			attribute={attribute}
+			classNames={{
+				count: 'before:content-["("] after:content-[")"]',
+				labelText: "px-1",
+			}}
+			searchable={true}
+			searchablePlaceholder={placeholder}
+			showMore={true}
+			showMoreLimit={100}
+		/>
+	);
+}
 
-	function DefaultRefinementList({
-		attribute,
-		attributeName,
-	}: {
-		attribute: string;
-		attributeName: string;
-	}) {
-		return (
-			<RefinementList
-				attribute={attribute}
-				classNames={{
-					count: 'before:content-["("] after:content-[")"]',
-					labelText: "px-1",
-				}}
-				searchable={true}
-				searchablePlaceholder={`${t("filter")} ${attributeName}`}
-				showMore={true}
-				showMoreLimit={100}
-			/>
-		);
-	}
+export function InstantSearch() {
+	const t = useTranslations("SearchPage");
 
 	return (
 		// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 		<InstantSearchNext indexName="thomas-bernhard" searchClient={searchClient}>
 			<Configure hitsPerPage={12} />
 			<div>
-				<DefaultRefinementList attribute="language" attributeName="languages" />
-				<DefaultRefinementList attribute="contains.work.title" attributeName="works" />
-				<DefaultRefinementList attribute="contains.translators.name" attributeName="translators" />
+				<DefaultRefinementList attribute="language" placeholder={`${t("filter")} languages`} />
+				<DefaultRefinementList
+					attribute="contains.work.title"
+					placeholder={`${t("filter")} works`}
+				/>
+				<DefaultRefinementList
+					attribute="contains.translators.name"
+					placeholder={`${t("filter")} translators`}
+				/>
 			</div>
 			<div>
 				<div className="flex place-content-between">