hds-web 1.36.3 → 1.36.5

package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js

@@ -1,19 +1,28 @@
 import algoliasearch from "algoliasearch/lite";
 import React, { useRef, useState, useEffect } from "react";
-import { InstantSearch, connectStateResults, Index } from "react-instantsearch-dom";
+import {
+  InstantSearch,
+  connectStateResults,
+  Index,
+} from "react-instantsearch-dom";
 import SearchBox from "./searchbox";
 import SearchResults from "./searchresults";
 import { INDEX_TYPES } from "./constants";
 import SearchFooter from "./searchfooter";
-import { Typography } from '../../foundation/Typography'
-
-
-
-const AllResults = ({ allSearchResults, children, indices, searchState, searching }) => {
+import { Typography } from "../../foundation/Typography";
+
+const AllResults = ({
+  allSearchResults,
+  children,
+  indices,
+  searchState,
+  searching,
+}) => {
   if (!searchState?.query) return null;
 
   const hasResults =
-    allSearchResults && Object.values(allSearchResults).some(results => results.nbHits > 0);
+    allSearchResults &&
+    Object.values(allSearchResults).some((results) => results.nbHits > 0);
   return !hasResults ? (
     <div>
       <div>
@@ -27,7 +36,7 @@ const AllResults = ({ allSearchResults, children, indices, searchState, searchin
           </span>
         )}
       </div>
-      {indices.map(index => (
+      {indices.map((index) => (
         <Index indexName={index.name} key={index.name} />
       ))}
       <SearchFooter />
@@ -45,57 +54,74 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
   const handleOnClick = (indexType) => {
     if (indexType === INDEX_TYPES.All) {
       showAll = true;
-      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
-        acc[key] = true;
-        return acc;
-      }, {});
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
+        (acc, key) => {
+          acc[key] = true;
+          return acc;
+        },
+        {}
+      );
       setActiveIndexTypes(allFiltersSelected);
     } else {
-      showAll = false
-      const allFiltersSelected = Object.keys(activeIndexTypes).reduce((acc, key) => {
-        acc[key] = false;
-        return acc;
-      }, {});
+      showAll = false;
+      const allFiltersSelected = Object.keys(activeIndexTypes).reduce(
+        (acc, key) => {
+          acc[key] = false;
+          return acc;
+        },
+        {}
+      );
       setActiveIndexTypes(allFiltersSelected);
       setActiveIndexTypes((prevState) => ({
         ...prevState,
         [indexType]: !prevState[indexType],
       }));
     }
-    setShowDropdown(false)
+    setShowDropdown(false);
   };
 
   return (
     <div className="relative">
-    <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
-      <ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
-        {Object.values(INDEX_TYPES).map((index) => (
-          <li key={index} className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0">
-            <button
-              onClick={() => handleOnClick(index)}
-              className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${(activeIndexTypes[index] && index === 'All') ? "bg-blue-500 " : ""
-                } ${(activeIndexTypes[index] && !showAll) ? 'bg-blue-500': ''} `}
+      <div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
+        <ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
+          {Object.values(INDEX_TYPES).map((index) => (
+            <li
+              key={index}
+              className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0"
             >
-              <Typography
-                textStyle="body3c-medium"
-                className={`${(activeIndexTypes[index] && index === 'All') ? "text-neutral-0 " : ""} ${(activeIndexTypes[index] && !showAll) ? 'text-neutral-0' : ''} `
-              }
+              <button
+                onClick={() => handleOnClick(index)}
+                className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${
+                  activeIndexTypes[index] && index === "All"
+                    ? "bg-blue-500 "
+                    : ""
+                } ${activeIndexTypes[index] && !showAll ? "bg-blue-500" : ""} `}
               >
-                {index}
-              </Typography>
-            </button>
-          </li>
-        ))}
-      </ul>
-
-    </div>
+                <Typography
+                  textStyle="body3c-medium"
+                  className={`${
+                    activeIndexTypes[index] && index === "All"
+                      ? "text-neutral-0 "
+                      : ""
+                  } ${
+                    activeIndexTypes[index] && !showAll ? "text-neutral-0" : ""
+                  } `}
+                >
+                  {index}
+                </Typography>
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
       <div className="relative hds-hidden-tbm">
         <button
           onClick={() => setShowDropdown(!showDropdown)}
           className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-800 text-left rounded-full text-neutral-800 bg-transparent"
         >
-          {Object.values(INDEX_TYPES).find((index) => activeIndexTypes[index]) || "All"}
-
+          {Object.values(INDEX_TYPES).find(
+            (index) => activeIndexTypes[index]
+          ) || "All"}
         </button>
         {showDropdown && (
           <ul className="absolute top-full left-0 w-full bg-neutral-0 shadow-md z-[20] p-2 rounded-3xl mt-1">
@@ -103,8 +129,11 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
               <li
                 key={index}
                 onClick={() => handleOnClick(index)}
-                className={`capitalize cursor-pointer py-2 px-4 ${activeIndexTypes[index] ? "text-neutral-1000  " : "text-neutral-500"
-                  }`}
+                className={`capitalize cursor-pointer py-2 px-4 ${
+                  activeIndexTypes[index]
+                    ? "text-neutral-1000  "
+                    : "text-neutral-500"
+                }`}
               >
                 {index}
               </li>
@@ -112,21 +141,18 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
           </ul>
         )}
       </div>
-
     </div>
   );
 };
 
 export default function SearchWrapper({ indices, ...props }) {
-  let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY ;
-  if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY){
+  let ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY;
+  if (props.ALGOLIA_APP_ID && props.ALGOLIA_SEARCH_KEY) {
     ALGOLIA_APP_ID = props.ALGOLIA_APP_ID;
     ALGOLIA_SEARCH_KEY = props.ALGOLIA_SEARCH_KEY;
   }
-  const algoliaClient = algoliasearch(
-    ALGOLIA_APP_ID,
-    ALGOLIA_SEARCH_KEY
-  );
+
+  const algoliaClient = algoliasearch(ALGOLIA_APP_ID, ALGOLIA_SEARCH_KEY);
 
   const searchClient = {
     ...algoliaClient,
@@ -146,13 +172,17 @@ export default function SearchWrapper({ indices, ...props }) {
     },
   };
 
-
-  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce((acc, index) => {
-    acc[index] = true;
-    return acc;
-  }, {});
+  const defaultIndexTypesState = Object.values(INDEX_TYPES).reduce(
+    (acc, index) => {
+      acc[index] = true;
+      return acc;
+    },
+    {}
+  );
   const wrapperRef = useRef(null);
-  const [activeIndexTypes, setActiveIndexTypes] = useState(defaultIndexTypesState);
+  const [activeIndexTypes, setActiveIndexTypes] = useState(
+    defaultIndexTypesState
+  );
   useEffect(() => {
     setActiveIndexTypes(defaultIndexTypesState);
   }, []);
@@ -168,8 +198,8 @@ export default function SearchWrapper({ indices, ...props }) {
         <div className="tb-m:flex gap-10">
           <div className="hds-hidden tb-m:flex">
             <IndexTypeFilter
-                activeIndexTypes={activeIndexTypes}
-                setActiveIndexTypes={setActiveIndexTypes}
+              activeIndexTypes={activeIndexTypes}
+              setActiveIndexTypes={setActiveIndexTypes}
             />
           </div>
           <SearchResults
@@ -177,13 +207,14 @@ export default function SearchWrapper({ indices, ...props }) {
             indices={indices}
             wrapperRef={wrapperRef}
             activeIndexTypes={activeIndexTypes}
-            className="search-results">
-              <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
-                <IndexTypeFilter
-                  activeIndexTypes={activeIndexTypes}
-                  setActiveIndexTypes={setActiveIndexTypes}
-                />
-              </div>
+            className="search-results"
+          >
+            <div className="hds-hidden-tbm sticky top-[124px] tb:top-[114px] z-10 bg-neutral-100 pb-3">
+              <IndexTypeFilter
+                activeIndexTypes={activeIndexTypes}
+                setActiveIndexTypes={setActiveIndexTypes}
+              />
+            </div>
           </SearchResults>
         </div>
       </CustomAllResults>