feat(searchbox): Support search types: product, category, content, be…

…stseller

src/search/hooks/search.hook.ts

@@ -0,0 +1,80 @@
+import {
+  BestsellerOptions,
+  CategorySearchOptions,
+  Configuration,
+  ContentSearchOptions,
+  ProductSearchOptions,
+  SearchResponse,
+  bestseller,
+  categorySearch,
+  contentSearch,
+  productSearch,
+} from '@bloomreach/discovery-web-sdk';
+import { useEffect, useState } from 'react';
+import { SearchType } from '../search-box/search-box.types';
+
+type SearchOptions =
+  | ProductSearchOptions
+  | CategorySearchOptions
+  | ContentSearchOptions
+  | BestsellerOptions;
+
+type UseSearch = {
+  response: SearchResponse | null;
+  loading: boolean;
+  error: unknown;
+};
+
+/**
+ * Custom hook to perform a product search using Bloomreach Discovery Web SDK.
+ *
+ * @param query - The search query string.
+ * @param configuration - The configuration object for the Bloomreach SDK.
+ * @param searchOptions - Additional search options excluding the query.
+ * @returns An object containing the search response, loading state, and any error encountered.
+ */
+export function useSearch(
+  searchType: SearchType,
+  configuration: Configuration,
+  searchOptions: SearchOptions,
+): UseSearch {
+  const [response, setResponse] = useState<SearchResponse | null>(null);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [error, setError] = useState<unknown>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setLoading(true);
+
+      if (searchType === 'product') {
+        const apiResponse = await productSearch(configuration, searchOptions as ProductSearchOptions);
+        setResponse(apiResponse);
+      }
+
+      if (searchType === 'category') {
+        const apiResponse = await categorySearch(configuration, searchOptions as CategorySearchOptions);
+        setResponse(apiResponse);
+      }
+
+      if (searchType === 'content') {
+        const apiResponse = await contentSearch(configuration, searchOptions as ContentSearchOptions);
+        setResponse(apiResponse);
+      }
+
+      if (searchType === 'bestseller') {
+        const apiResponse = await bestseller(configuration, searchOptions as BestsellerOptions);
+        setResponse(apiResponse);
+      }
+    };
+
+    fetchData()
+      .catch((e: unknown) => {
+        setError(e);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [searchType, configuration, searchOptions]);
+
+  return { response, loading, error };
+}

src/search/search-box/search-box.hook.ts

@@ -4,27 +4,42 @@ import {
   useCallback,
   useContext,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import { debounce } from '../../utils/debounce';
 import { SearchContext } from '../context/search.context';
-import { useProductSearch } from '../hooks/productSearch.hook';
+import { useSearch } from '../hooks/search.hook';
 import { SearchBoxProps } from './search-box.types';
+import { SearchResponse } from '@bloomreach/discovery-web-sdk';
 
 type UseSearchBox = {
+  response: SearchResponse | null;
+  loading: boolean;
+  error: unknown;
   changeHandler: ChangeEventHandler<HTMLInputElement>;
 };
 
 export function useSearchBox(props: SearchBoxProps): UseSearchBox {
-  const { configuration, searchOptions, debounceDelay } = props;
+  const { configuration, searchOptions, debounceDelay, searchType } = props;
 
   const [query, setQuery] = useState<string>('');
   const debouncedSetQuery = debounce((event: ChangeEvent<HTMLInputElement>) => {
     setQuery(event.target.value);
   }, debounceDelay ?? 500);
-  const { response } = useProductSearch(query, configuration, searchOptions);
+
+  const memoizedSearchOptions = useMemo(
+    () => ({
+      ...searchOptions,
+      q: query,
+    }),
+    [query, searchOptions],
+  );
+
+  const { response, error, loading } = useSearch(searchType, configuration, memoizedSearchOptions);
 
   const searchContext = useContext(SearchContext);
+
   useEffect(() => {
     if (response) {
       searchContext.setSearchResponse(response);
@@ -34,6 +49,9 @@ export function useSearchBox(props: SearchBoxProps): UseSearchBox {
   const changeHandler = useCallback(debouncedSetQuery, [debouncedSetQuery]);
 
   return {
+    response,
+    error,
+    loading,
     changeHandler,
   };
 }

src/search/search-box/search-box.stories.tsx

@@ -32,7 +32,7 @@ export const Basic: Story = {
           {({ searchResponse }) =>
             searchResponse?.response?.docs?.map((result) => {
               return (
-                <div>
+                <div key={result.pid}>
                   <h2>{result.title}</h2>
                   <p>{result.description}</p>
                 </div>
@@ -58,5 +58,6 @@ export const Basic: Story = {
       start: 0,
       url: 'https://example.com',
     },
+    searchType: 'product'
   },
 };

src/search/search-box/search-box.tsx

@@ -32,6 +32,7 @@ import type { SearchBoxProps } from './search-box.types';
  *      <SearchBox
  *        configuration={configuration}
  *        searchOptions={searchOptions}
+ *        searchType={'product'}
  *        debounceDelay={300}
  *        className="test"/>
  *
@@ -56,7 +57,15 @@ import type { SearchBoxProps } from './search-box.types';
  */
 export const SearchBox = forwardRef(
   (props: SearchBoxProps, forwardedRef: ForwardedRef<HTMLInputElement> | null): ReactElement => {
-    const { children, className, configuration, searchOptions, debounceDelay, ...rest } = props;
+    const {
+      children,
+      className,
+      configuration,
+      searchOptions,
+      debounceDelay,
+      searchType,
+      ...rest
+    } = props;
     const { changeHandler } = useSearchBox(props);
 
     return (

src/search/search-box/search-box.types.ts

@@ -22,4 +22,14 @@ export interface SearchBoxProps extends PropsWithChildren {
    * The options specific to a Bloormeach search e.g. `q` and `fl`
    */
   searchOptions: Omit<ProductSearchOptions, 'q'>;
+
+  /**
+   * The type of search.
+   */
+  searchType: SearchType;
 }
+
+/**
+ * The type of search.
+ */
+export type SearchType = 'product' | 'category' | 'content' | 'bestseller';