fix: remove throw error

Author: g-francesca

apps/site/components/Common/Searchbox/EmptyResults/index.tsx

@@ -12,7 +12,7 @@ import styles from './index.module.css';
 export const EmptyResults: FC = () => {
   const t = useTranslations();
   const searchbox = useSearchbox();
-  const isSearchMode = searchbox.mode === 'search';
+  const isSearchMode = searchbox?.mode === 'search';
 
   return (
     <SearchResults.NoResults>
@@ -30,7 +30,7 @@ export const EmptyResults: FC = () => {
                 {t('components.search.suggestions')}
               </p>
               <Suggestions.Item
-                onClick={() => searchbox.switchTo('chat')}
+                onClick={() => searchbox?.switchTo('chat')}
                 tabIndex={isSearchMode ? 0 : -1}
                 aria-hidden={!isSearchMode}
                 className={styles.suggestionItem}
@@ -39,7 +39,7 @@ export const EmptyResults: FC = () => {
                 {t('components.search.suggestionOne')}
               </Suggestions.Item>
               <Suggestions.Item
-                onClick={() => searchbox.switchTo('chat')}
+                onClick={() => searchbox?.switchTo('chat')}
                 tabIndex={isSearchMode ? 0 : -1}
                 aria-hidden={!isSearchMode}
                 className={styles.suggestionItem}
@@ -50,7 +50,7 @@ export const EmptyResults: FC = () => {
               <Suggestions.Item
                 tabIndex={isSearchMode ? 0 : -1}
                 aria-hidden={!isSearchMode}
-                onClick={() => searchbox.switchTo('chat')}
+                onClick={() => searchbox?.switchTo('chat')}
                 className={styles.suggestionItem}
               >
                 <SparklesIcon />

apps/site/components/Common/Searchbox/InnerSearchboxModal/index.tsx

@@ -18,7 +18,7 @@ export const InnerSearchboxModal: FC<PropsWithChildren> = () => {
   const searchInputRef = useRef<HTMLInputElement>(null);
 
   const displaySearch =
-    !isMobileScreen || (isMobileScreen && searchbox.mode === 'search');
+    !isMobileScreen || (isMobileScreen && searchbox?.mode === 'search');
 
   useEffect(() => {
     const checkScreenSize = () => {
@@ -35,12 +35,12 @@ export const InnerSearchboxModal: FC<PropsWithChildren> = () => {
     <>
       {isMobileScreen && (
         <MobileTopBar
-          isChatOpen={searchbox.mode === 'chat'}
-          onSelect={searchbox.switchTo}
+          isChatOpen={searchbox?.mode === 'chat'}
+          onSelect={searchbox?.switchTo}
         />
       )}
       {displaySearch && <Search ref={searchInputRef} />}
-      {isMobileScreen && searchbox.mode === 'chat' && (
+      {isMobileScreen && searchbox?.mode === 'chat' && (
         <>
           <div className={styles.mobileChatContainer}>
             <div className={styles.mobileChatTop}>
@@ -53,11 +53,11 @@ export const InnerSearchboxModal: FC<PropsWithChildren> = () => {
           <Footer />
         </>
       )}
-      {!isMobileScreen && searchbox.mode === 'chat' && (
+      {!isMobileScreen && searchbox?.mode === 'chat' && (
         <SlidingChatPanel
-          open={searchbox.isChatOpen}
+          open={searchbox?.isChatOpen}
           onClose={() => {
-            searchbox.closeChatAndReset(() => {
+            searchbox?.closeChatAndReset(() => {
               searchInputRef.current?.focus();
             });
           }}

apps/site/components/Common/Searchbox/MobileTopBar/index.tsx

@@ -16,12 +16,12 @@ import styles from './index.module.css';
 
 export const MobileTopBar: FC<{
   isChatOpen: boolean;
-  onSelect: (mode: 'search' | 'chat') => void;
+  onSelect?: (mode: 'search' | 'chat') => void;
 }> = ({ isChatOpen, onSelect }) => {
   const [animated, setAnimated] = useState(false);
 
   function selectMode(mode: 'search' | 'chat') {
-    onSelect(mode);
+    onSelect?.(mode);
 
     if (!animated) {
       setAnimated(true);

apps/site/components/Common/Searchbox/Search/index.tsx

@@ -17,7 +17,7 @@ type SearchProps = PropsWithChildren & React.RefAttributes<HTMLInputElement>;
 export const Search: FC<SearchProps> = ({ ref }) => {
   const t = useTranslations();
   const searchbox = useSearchbox();
-  const isSearchMode = searchbox.mode === 'search';
+  const isSearchMode = searchbox?.mode === 'search';
 
   return (
     <div className={styles.searchContainer}>

apps/site/components/Common/Searchbox/SearchResults/index.tsx

@@ -21,13 +21,13 @@ export const SearchResultsWrapper: FC = () => {
     context: { searchTerm, selectedFacet },
   } = useSearch();
   const searchbox = useSearchbox();
-  const isSearchMode = searchbox.mode === 'search';
+  const isSearchMode = searchbox?.mode === 'search';
 
   return (
     <div className={styles.searchResultsContainer}>
       <div className={styles.chatButtonWrapper}>
         <SlidingPanel.Trigger
-          onClick={() => searchbox.switchTo('chat')}
+          onClick={() => searchbox?.switchTo('chat')}
           className={classNames(styles.chatButton, {
             [styles.chatButtonWithSearch]: searchTerm,
           })}

apps/site/providers/searchboxProvider.tsx

@@ -9,10 +9,11 @@ import searchboxReducer, {
 } from '#site/reducers/searchboxReducer';
 import type * as Types from '#site/types/searchbox';
 
-type SearchboxContextType = Types.SearchboxState &
-  Types.SearchboxDispatchActions;
+type SearchboxContextType =
+  | (Types.SearchboxState & Types.SearchboxDispatchActions)
+  | null;
 
-const SearchboxContext = createContext<SearchboxContextType | null>(null);
+const SearchboxContext = createContext<SearchboxContextType>(null);
 
 export const SearchboxProvider: FC<PropsWithChildren> = ({ children }) => {
   const [state, dispatch] = useReducer(searchboxReducer, searchboxState);
@@ -32,8 +33,5 @@ export const SearchboxProvider: FC<PropsWithChildren> = ({ children }) => {
 
 export const useSearchbox = (): SearchboxContextType => {
   const context = useContext(SearchboxContext);
-  if (!context) {
-    throw new Error('useSearchbox must be used within a SearchboxProvider');
-  }
   return context;
 };