Updates display of query and results on Search result pages (#216)

Exygy · Sep 30, 2024 · 85ae285 · 85ae285
1 parent ce5a4f1
commit 85ae285
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/app/components/search/Header/SearchHeaderSection.tsx b/app/components/search/Header/SearchHeaderSection.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { useSearchBox } from "react-instantsearch-core";
 import styles from "./SearchHeaderSection.module.scss";
 
 /**
@@ -8,11 +9,18 @@ export const SearchHeaderSection = ({
   descriptionText,
 }: {
   descriptionText: string;
-}) => (
-  <div className={styles.searchHeaderContainer}>
-    <div className={styles.searchHeaderContainerLeft}>
-      <h1 className={styles.title}>Services</h1>
+}) => {
+  const { query } = useSearchBox();
+  return (
+    <div className={styles.searchHeaderContainer}>
+      <div className={styles.searchHeaderContainerLeft}>
+        {query ? (
+          <h1>Search results for "{query}"</h1>
+        ) : (
+          <h1>Search results</h1>
+        )}
+      </div>
+      <span>{descriptionText}</span>
     </div>
-    <span>{descriptionText}</span>
-  </div>
-);
+  );
+};
diff --git a/app/components/search/SearchResults/SearchResults.tsx b/app/components/search/SearchResults/SearchResults.tsx
@@ -58,13 +58,7 @@ const SearchResults = ({
   const searchResultsHeader = () => {
     return (
       <div className={styles.searchResultsHeader}>
-        {query ? (
-          <h2>
-            {searchResults.nbHits} search results for {query}
-          </h2>
-        ) : (
-          <h2>{searchResults.nbHits} search results</h2>
-        )}
+        <h2>{searchResults.nbHits} results</h2>
         <ClearSearchButton />
       </div>
     );