From 8710c83813dd726fcd1a233f127cf510ca491507 Mon Sep 17 00:00:00 2001
From: Michele Riva <ciao@micheleriva.it>
Date: Wed, 20 Mar 2024 08:19:21 -0700
Subject: [PATCH 1/2] reverts #6478 - removes debounce on search

---
 .../Common/Search/States/WithSearchBox.tsx    | 377 +++++++++---------
 1 file changed, 188 insertions(+), 189 deletions(-)

diff --git a/components/Common/Search/States/WithSearchBox.tsx b/components/Common/Search/States/WithSearchBox.tsx
index 273391c18f880..9b90a507214c8 100644
--- a/components/Common/Search/States/WithSearchBox.tsx
+++ b/components/Common/Search/States/WithSearchBox.tsx
@@ -1,27 +1,26 @@
-'use client';
+"use client";
 
 import {
-  MagnifyingGlassIcon,
-  ChevronLeftIcon,
-} from '@heroicons/react/24/outline';
-import type { Results, Nullable } from '@orama/orama';
-import classNames from 'classnames';
-import { useState, useRef, useEffect } from 'react';
-import type { FC } from 'react';
-
-import styles from '@/components/Common/Search/States/index.module.css';
-import { WithAllResults } from '@/components/Common/Search/States/WithAllResults';
-import { WithEmptyState } from '@/components/Common/Search/States/WithEmptyState';
-import { WithError } from '@/components/Common/Search/States/WithError';
-import { WithNoResults } from '@/components/Common/Search/States/WithNoResults';
-import { WithPoweredBy } from '@/components/Common/Search/States/WithPoweredBy';
-import { WithSearchResult } from '@/components/Common/Search/States/WithSearchResult';
-import { useClickOutside } from '@/hooks/react-client';
-import { useRouter } from '@/navigation.mjs';
-import { DEFAULT_ORAMA_QUERY_PARAMS } from '@/next.constants.mjs';
-import { search as oramaSearch, getInitialFacets } from '@/next.orama.mjs';
-import type { SearchDoc } from '@/types';
-import { debounce } from '@/util/debounce';
+	MagnifyingGlassIcon,
+	ChevronLeftIcon,
+} from "@heroicons/react/24/outline";
+import type { Results, Nullable } from "@orama/orama";
+import classNames from "classnames";
+import { useState, useRef, useEffect } from "react";
+import type { FC } from "react";
+
+import styles from "@/components/Common/Search/States/index.module.css";
+import { WithAllResults } from "@/components/Common/Search/States/WithAllResults";
+import { WithEmptyState } from "@/components/Common/Search/States/WithEmptyState";
+import { WithError } from "@/components/Common/Search/States/WithError";
+import { WithNoResults } from "@/components/Common/Search/States/WithNoResults";
+import { WithPoweredBy } from "@/components/Common/Search/States/WithPoweredBy";
+import { WithSearchResult } from "@/components/Common/Search/States/WithSearchResult";
+import { useClickOutside } from "@/hooks/react-client";
+import { useRouter } from "@/navigation.mjs";
+import { DEFAULT_ORAMA_QUERY_PARAMS } from "@/next.constants.mjs";
+import { search as oramaSearch, getInitialFacets } from "@/next.orama.mjs";
+import type { SearchDoc } from "@/types";
 
 type Facets = { [key: string]: number };
 
@@ -30,171 +29,171 @@ type SearchResults = Nullable<Results<SearchDoc>>;
 type SearchBoxProps = { onClose: () => void };
 
 export const WithSearchBox: FC<SearchBoxProps> = ({ onClose }) => {
-  const [searchTerm, setSearchTerm] = useState('');
-  const [searchResults, setSearchResults] = useState<SearchResults>(null);
-  const [selectedFacet, setSelectedFacet] = useState<number>(0);
-  const [searchError, setSearchError] = useState<Nullable<Error>>(null);
-
-  const router = useRouter();
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const searchBoxRef = useRef<HTMLDivElement>(null);
-
-  const search = (term: string) => {
-    oramaSearch({
-      term,
-      ...DEFAULT_ORAMA_QUERY_PARAMS,
-      mode: 'fulltext',
-      returning: [
-        'path',
-        'pageSectionTitle',
-        'pageTitle',
-        'path',
-        'siteSection',
-      ],
-      ...filterBySection(),
-    })
-      .then(setSearchResults)
-      .catch(setSearchError);
-  };
-
-  useClickOutside(searchBoxRef, () => {
-    reset();
-    onClose();
-  });
-
-  useEffect(() => {
-    searchInputRef.current?.focus();
-
-    getInitialFacets().then(setSearchResults).catch(setSearchError);
-
-    return reset;
-  }, []);
-
-  useEffect(
-    () => {
-      debounce(() => search(searchTerm), 1000)();
-    },
-    // we don't need to care about memoization of search function
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [searchTerm, selectedFacet]
-  );
-
-  const reset = () => {
-    setSearchTerm('');
-    setSearchResults(null);
-    setSelectedFacet(0);
-  };
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    router.push(`/search?q=${searchTerm}&section=${selectedFacetName}`);
-    onClose();
-  };
-
-  const changeFacet = (idx: number) => setSelectedFacet(idx);
-
-  const filterBySection = () => {
-    if (selectedFacet === 0) {
-      return {};
-    }
-
-    return { where: { siteSection: { eq: selectedFacetName } } };
-  };
-
-  const facets: Facets = {
-    all: searchResults?.facets
-      ? Object.values(searchResults?.facets.siteSection.values).reduce(
-          (a, b) => a + b,
-          0
-        )
-      : 0,
-    ...(searchResults?.facets?.siteSection?.values ?? {}),
-  };
-
-  const selectedFacetName = Object.keys(facets)[selectedFacet];
-
-  return (
-    <div className={styles.searchBoxModalContainer}>
-      <div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
-        <div className={styles.searchBoxInnerPanel}>
-          <div className={styles.searchBoxInputContainer}>
-            <button
-              onClick={onClose}
-              className={styles.searchBoxBackIconContainer}
-            >
-              <ChevronLeftIcon className={styles.searchBoxBackIcon} />
-            </button>
-
-            <MagnifyingGlassIcon
-              className={styles.searchBoxMagnifyingGlassIcon}
-            />
-
-            <form onSubmit={onSubmit}>
-              <input
-                ref={searchInputRef}
-                type="search"
-                className={styles.searchBoxInput}
-                onChange={event => setSearchTerm(event.target.value)}
-                value={searchTerm}
-              />
-            </form>
-          </div>
-
-          <div className={styles.fulltextSearchSections}>
-            {Object.keys(facets).map((facetName, idx) => (
-              <button
-                key={facetName}
-                className={classNames(styles.fulltextSearchSection, {
-                  [styles.fulltextSearchSectionSelected]: selectedFacet === idx,
-                })}
-                onClick={() => changeFacet(idx)}
-              >
-                {facetName}
-                <span className={styles.fulltextSearchSectionCount}>
-                  ({facets[facetName].toLocaleString('en')})
-                </span>
-              </button>
-            ))}
-          </div>
-
-          <div className={styles.fulltextResultsContainer}>
-            {searchError && <WithError />}
-
-            {!searchError && !searchTerm && <WithEmptyState />}
-
-            {!searchError && searchTerm && (
-              <>
-                {searchResults &&
-                  searchResults.count > 0 &&
-                  searchResults.hits.map(hit => (
-                    <WithSearchResult
-                      key={hit.id}
-                      hit={hit}
-                      searchTerm={searchTerm}
-                    />
-                  ))}
-
-                {searchResults && searchResults.count === 0 && (
-                  <WithNoResults searchTerm={searchTerm} />
-                )}
-
-                {searchResults && searchResults.count > 8 && (
-                  <WithAllResults
-                    searchResults={searchResults}
-                    searchTerm={searchTerm}
-                    selectedFacetName={selectedFacetName}
-                    onSeeAllClick={onClose}
-                  />
-                )}
-              </>
-            )}
-          </div>
-
-          <div className={styles.fulltextSearchFooter}>
-            <WithPoweredBy />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+	const [searchTerm, setSearchTerm] = useState("");
+	const [searchResults, setSearchResults] = useState<SearchResults>(null);
+	const [selectedFacet, setSelectedFacet] = useState<number>(0);
+	const [searchError, setSearchError] = useState<Nullable<Error>>(null);
+
+	const router = useRouter();
+	const searchInputRef = useRef<HTMLInputElement>(null);
+	const searchBoxRef = useRef<HTMLDivElement>(null);
+
+	const search = (term: string) => {
+		oramaSearch({
+			term,
+			...DEFAULT_ORAMA_QUERY_PARAMS,
+			mode: "fulltext",
+			returning: [
+				"path",
+				"pageSectionTitle",
+				"pageTitle",
+				"path",
+				"siteSection",
+			],
+			...filterBySection(),
+		})
+			.then(setSearchResults)
+			.catch(setSearchError);
+	};
+
+	useClickOutside(searchBoxRef, () => {
+		reset();
+		onClose();
+	});
+
+	useEffect(() => {
+		searchInputRef.current?.focus();
+
+		getInitialFacets().then(setSearchResults).catch(setSearchError);
+
+		return reset;
+	}, []);
+
+	useEffect(
+		() => {
+			search(searchTerm);
+		},
+		// we don't need to care about memoization of search function
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[searchTerm, selectedFacet],
+	);
+
+	const reset = () => {
+		setSearchTerm("");
+		setSearchResults(null);
+		setSelectedFacet(0);
+	};
+
+	const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		router.push(`/search?q=${searchTerm}&section=${selectedFacetName}`);
+		onClose();
+	};
+
+	const changeFacet = (idx: number) => setSelectedFacet(idx);
+
+	const filterBySection = () => {
+		if (selectedFacet === 0) {
+			return {};
+		}
+
+		return { where: { siteSection: { eq: selectedFacetName } } };
+	};
+
+	const facets: Facets = {
+		all: searchResults?.facets
+			? Object.values(searchResults?.facets.siteSection.values).reduce(
+					(a, b) => a + b,
+					0,
+			  )
+			: 0,
+		...(searchResults?.facets?.siteSection?.values ?? {}),
+	};
+
+	const selectedFacetName = Object.keys(facets)[selectedFacet];
+
+	return (
+		<div className={styles.searchBoxModalContainer}>
+			<div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
+				<div className={styles.searchBoxInnerPanel}>
+					<div className={styles.searchBoxInputContainer}>
+						<button
+							onClick={onClose}
+							className={styles.searchBoxBackIconContainer}
+						>
+							<ChevronLeftIcon className={styles.searchBoxBackIcon} />
+						</button>
+
+						<MagnifyingGlassIcon
+							className={styles.searchBoxMagnifyingGlassIcon}
+						/>
+
+						<form onSubmit={onSubmit}>
+							<input
+								ref={searchInputRef}
+								type="search"
+								className={styles.searchBoxInput}
+								onChange={(event) => setSearchTerm(event.target.value)}
+								value={searchTerm}
+							/>
+						</form>
+					</div>
+
+					<div className={styles.fulltextSearchSections}>
+						{Object.keys(facets).map((facetName, idx) => (
+							<button
+								key={facetName}
+								className={classNames(styles.fulltextSearchSection, {
+									[styles.fulltextSearchSectionSelected]: selectedFacet === idx,
+								})}
+								onClick={() => changeFacet(idx)}
+							>
+								{facetName}
+								<span className={styles.fulltextSearchSectionCount}>
+									({facets[facetName].toLocaleString("en")})
+								</span>
+							</button>
+						))}
+					</div>
+
+					<div className={styles.fulltextResultsContainer}>
+						{searchError && <WithError />}
+
+						{!searchError && !searchTerm && <WithEmptyState />}
+
+						{!searchError && searchTerm && (
+							<>
+								{searchResults &&
+									searchResults.count > 0 &&
+									searchResults.hits.map((hit) => (
+										<WithSearchResult
+											key={hit.id}
+											hit={hit}
+											searchTerm={searchTerm}
+										/>
+									))}
+
+								{searchResults && searchResults.count === 0 && (
+									<WithNoResults searchTerm={searchTerm} />
+								)}
+
+								{searchResults && searchResults.count > 8 && (
+									<WithAllResults
+										searchResults={searchResults}
+										searchTerm={searchTerm}
+										selectedFacetName={selectedFacetName}
+										onSeeAllClick={onClose}
+									/>
+								)}
+							</>
+						)}
+					</div>
+
+					<div className={styles.fulltextSearchFooter}>
+						<WithPoweredBy />
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 };

From cb185288964eede1bb9c53cf41f63897d5458520 Mon Sep 17 00:00:00 2001
From: Michele Riva <ciao@micheleriva.it>
Date: Wed, 20 Mar 2024 08:48:22 -0700
Subject: [PATCH 2/2] fixes style

---
 .../Common/Search/States/WithSearchBox.tsx    | 376 +++++++++---------
 1 file changed, 188 insertions(+), 188 deletions(-)

diff --git a/components/Common/Search/States/WithSearchBox.tsx b/components/Common/Search/States/WithSearchBox.tsx
index 9b90a507214c8..c15188d3c7b7b 100644
--- a/components/Common/Search/States/WithSearchBox.tsx
+++ b/components/Common/Search/States/WithSearchBox.tsx
@@ -1,26 +1,26 @@
-"use client";
+'use client';
 
 import {
-	MagnifyingGlassIcon,
-	ChevronLeftIcon,
-} from "@heroicons/react/24/outline";
-import type { Results, Nullable } from "@orama/orama";
-import classNames from "classnames";
-import { useState, useRef, useEffect } from "react";
-import type { FC } from "react";
-
-import styles from "@/components/Common/Search/States/index.module.css";
-import { WithAllResults } from "@/components/Common/Search/States/WithAllResults";
-import { WithEmptyState } from "@/components/Common/Search/States/WithEmptyState";
-import { WithError } from "@/components/Common/Search/States/WithError";
-import { WithNoResults } from "@/components/Common/Search/States/WithNoResults";
-import { WithPoweredBy } from "@/components/Common/Search/States/WithPoweredBy";
-import { WithSearchResult } from "@/components/Common/Search/States/WithSearchResult";
-import { useClickOutside } from "@/hooks/react-client";
-import { useRouter } from "@/navigation.mjs";
-import { DEFAULT_ORAMA_QUERY_PARAMS } from "@/next.constants.mjs";
-import { search as oramaSearch, getInitialFacets } from "@/next.orama.mjs";
-import type { SearchDoc } from "@/types";
+  MagnifyingGlassIcon,
+  ChevronLeftIcon,
+} from '@heroicons/react/24/outline';
+import type { Results, Nullable } from '@orama/orama';
+import classNames from 'classnames';
+import { useState, useRef, useEffect } from 'react';
+import type { FC } from 'react';
+
+import styles from '@/components/Common/Search/States/index.module.css';
+import { WithAllResults } from '@/components/Common/Search/States/WithAllResults';
+import { WithEmptyState } from '@/components/Common/Search/States/WithEmptyState';
+import { WithError } from '@/components/Common/Search/States/WithError';
+import { WithNoResults } from '@/components/Common/Search/States/WithNoResults';
+import { WithPoweredBy } from '@/components/Common/Search/States/WithPoweredBy';
+import { WithSearchResult } from '@/components/Common/Search/States/WithSearchResult';
+import { useClickOutside } from '@/hooks/react-client';
+import { useRouter } from '@/navigation.mjs';
+import { DEFAULT_ORAMA_QUERY_PARAMS } from '@/next.constants.mjs';
+import { search as oramaSearch, getInitialFacets } from '@/next.orama.mjs';
+import type { SearchDoc } from '@/types';
 
 type Facets = { [key: string]: number };
 
@@ -29,171 +29,171 @@ type SearchResults = Nullable<Results<SearchDoc>>;
 type SearchBoxProps = { onClose: () => void };
 
 export const WithSearchBox: FC<SearchBoxProps> = ({ onClose }) => {
-	const [searchTerm, setSearchTerm] = useState("");
-	const [searchResults, setSearchResults] = useState<SearchResults>(null);
-	const [selectedFacet, setSelectedFacet] = useState<number>(0);
-	const [searchError, setSearchError] = useState<Nullable<Error>>(null);
-
-	const router = useRouter();
-	const searchInputRef = useRef<HTMLInputElement>(null);
-	const searchBoxRef = useRef<HTMLDivElement>(null);
-
-	const search = (term: string) => {
-		oramaSearch({
-			term,
-			...DEFAULT_ORAMA_QUERY_PARAMS,
-			mode: "fulltext",
-			returning: [
-				"path",
-				"pageSectionTitle",
-				"pageTitle",
-				"path",
-				"siteSection",
-			],
-			...filterBySection(),
-		})
-			.then(setSearchResults)
-			.catch(setSearchError);
-	};
-
-	useClickOutside(searchBoxRef, () => {
-		reset();
-		onClose();
-	});
-
-	useEffect(() => {
-		searchInputRef.current?.focus();
-
-		getInitialFacets().then(setSearchResults).catch(setSearchError);
-
-		return reset;
-	}, []);
-
-	useEffect(
-		() => {
-			search(searchTerm);
-		},
-		// we don't need to care about memoization of search function
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[searchTerm, selectedFacet],
-	);
-
-	const reset = () => {
-		setSearchTerm("");
-		setSearchResults(null);
-		setSelectedFacet(0);
-	};
-
-	const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-		e.preventDefault();
-		router.push(`/search?q=${searchTerm}&section=${selectedFacetName}`);
-		onClose();
-	};
-
-	const changeFacet = (idx: number) => setSelectedFacet(idx);
-
-	const filterBySection = () => {
-		if (selectedFacet === 0) {
-			return {};
-		}
-
-		return { where: { siteSection: { eq: selectedFacetName } } };
-	};
-
-	const facets: Facets = {
-		all: searchResults?.facets
-			? Object.values(searchResults?.facets.siteSection.values).reduce(
-					(a, b) => a + b,
-					0,
-			  )
-			: 0,
-		...(searchResults?.facets?.siteSection?.values ?? {}),
-	};
-
-	const selectedFacetName = Object.keys(facets)[selectedFacet];
-
-	return (
-		<div className={styles.searchBoxModalContainer}>
-			<div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
-				<div className={styles.searchBoxInnerPanel}>
-					<div className={styles.searchBoxInputContainer}>
-						<button
-							onClick={onClose}
-							className={styles.searchBoxBackIconContainer}
-						>
-							<ChevronLeftIcon className={styles.searchBoxBackIcon} />
-						</button>
-
-						<MagnifyingGlassIcon
-							className={styles.searchBoxMagnifyingGlassIcon}
-						/>
-
-						<form onSubmit={onSubmit}>
-							<input
-								ref={searchInputRef}
-								type="search"
-								className={styles.searchBoxInput}
-								onChange={(event) => setSearchTerm(event.target.value)}
-								value={searchTerm}
-							/>
-						</form>
-					</div>
-
-					<div className={styles.fulltextSearchSections}>
-						{Object.keys(facets).map((facetName, idx) => (
-							<button
-								key={facetName}
-								className={classNames(styles.fulltextSearchSection, {
-									[styles.fulltextSearchSectionSelected]: selectedFacet === idx,
-								})}
-								onClick={() => changeFacet(idx)}
-							>
-								{facetName}
-								<span className={styles.fulltextSearchSectionCount}>
-									({facets[facetName].toLocaleString("en")})
-								</span>
-							</button>
-						))}
-					</div>
-
-					<div className={styles.fulltextResultsContainer}>
-						{searchError && <WithError />}
-
-						{!searchError && !searchTerm && <WithEmptyState />}
-
-						{!searchError && searchTerm && (
-							<>
-								{searchResults &&
-									searchResults.count > 0 &&
-									searchResults.hits.map((hit) => (
-										<WithSearchResult
-											key={hit.id}
-											hit={hit}
-											searchTerm={searchTerm}
-										/>
-									))}
-
-								{searchResults && searchResults.count === 0 && (
-									<WithNoResults searchTerm={searchTerm} />
-								)}
-
-								{searchResults && searchResults.count > 8 && (
-									<WithAllResults
-										searchResults={searchResults}
-										searchTerm={searchTerm}
-										selectedFacetName={selectedFacetName}
-										onSeeAllClick={onClose}
-									/>
-								)}
-							</>
-						)}
-					</div>
-
-					<div className={styles.fulltextSearchFooter}>
-						<WithPoweredBy />
-					</div>
-				</div>
-			</div>
-		</div>
-	);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [searchResults, setSearchResults] = useState<SearchResults>(null);
+  const [selectedFacet, setSelectedFacet] = useState<number>(0);
+  const [searchError, setSearchError] = useState<Nullable<Error>>(null);
+
+  const router = useRouter();
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const searchBoxRef = useRef<HTMLDivElement>(null);
+
+  const search = (term: string) => {
+    oramaSearch({
+      term,
+      ...DEFAULT_ORAMA_QUERY_PARAMS,
+      mode: 'fulltext',
+      returning: [
+        'path',
+        'pageSectionTitle',
+        'pageTitle',
+        'path',
+        'siteSection',
+      ],
+      ...filterBySection(),
+    })
+      .then(setSearchResults)
+      .catch(setSearchError);
+  };
+
+  useClickOutside(searchBoxRef, () => {
+    reset();
+    onClose();
+  });
+
+  useEffect(() => {
+    searchInputRef.current?.focus();
+
+    getInitialFacets().then(setSearchResults).catch(setSearchError);
+
+    return reset;
+  }, []);
+
+  useEffect(
+    () => {
+      search(searchTerm);
+    },
+    // we don't need to care about memoization of search function
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [searchTerm, selectedFacet]
+  );
+
+  const reset = () => {
+    setSearchTerm('');
+    setSearchResults(null);
+    setSelectedFacet(0);
+  };
+
+  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    router.push(`/search?q=${searchTerm}&section=${selectedFacetName}`);
+    onClose();
+  };
+
+  const changeFacet = (idx: number) => setSelectedFacet(idx);
+
+  const filterBySection = () => {
+    if (selectedFacet === 0) {
+      return {};
+    }
+
+    return { where: { siteSection: { eq: selectedFacetName } } };
+  };
+
+  const facets: Facets = {
+    all: searchResults?.facets
+      ? Object.values(searchResults?.facets.siteSection.values).reduce(
+          (a, b) => a + b,
+          0
+        )
+      : 0,
+    ...(searchResults?.facets?.siteSection?.values ?? {}),
+  };
+
+  const selectedFacetName = Object.keys(facets)[selectedFacet];
+
+  return (
+    <div className={styles.searchBoxModalContainer}>
+      <div className={styles.searchBoxModalPanel} ref={searchBoxRef}>
+        <div className={styles.searchBoxInnerPanel}>
+          <div className={styles.searchBoxInputContainer}>
+            <button
+              onClick={onClose}
+              className={styles.searchBoxBackIconContainer}
+            >
+              <ChevronLeftIcon className={styles.searchBoxBackIcon} />
+            </button>
+
+            <MagnifyingGlassIcon
+              className={styles.searchBoxMagnifyingGlassIcon}
+            />
+
+            <form onSubmit={onSubmit}>
+              <input
+                ref={searchInputRef}
+                type="search"
+                className={styles.searchBoxInput}
+                onChange={event => setSearchTerm(event.target.value)}
+                value={searchTerm}
+              />
+            </form>
+          </div>
+
+          <div className={styles.fulltextSearchSections}>
+            {Object.keys(facets).map((facetName, idx) => (
+              <button
+                key={facetName}
+                className={classNames(styles.fulltextSearchSection, {
+                  [styles.fulltextSearchSectionSelected]: selectedFacet === idx,
+                })}
+                onClick={() => changeFacet(idx)}
+              >
+                {facetName}
+                <span className={styles.fulltextSearchSectionCount}>
+                  ({facets[facetName].toLocaleString('en')})
+                </span>
+              </button>
+            ))}
+          </div>
+
+          <div className={styles.fulltextResultsContainer}>
+            {searchError && <WithError />}
+
+            {!searchError && !searchTerm && <WithEmptyState />}
+
+            {!searchError && searchTerm && (
+              <>
+                {searchResults &&
+                  searchResults.count > 0 &&
+                  searchResults.hits.map(hit => (
+                    <WithSearchResult
+                      key={hit.id}
+                      hit={hit}
+                      searchTerm={searchTerm}
+                    />
+                  ))}
+
+                {searchResults && searchResults.count === 0 && (
+                  <WithNoResults searchTerm={searchTerm} />
+                )}
+
+                {searchResults && searchResults.count > 8 && (
+                  <WithAllResults
+                    searchResults={searchResults}
+                    searchTerm={searchTerm}
+                    selectedFacetName={selectedFacetName}
+                    onSeeAllClick={onClose}
+                  />
+                )}
+              </>
+            )}
+          </div>
+
+          <div className={styles.fulltextSearchFooter}>
+            <WithPoweredBy />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
 };