refactor: clean up modal state

Author: g-francesca

apps/site/components/Common/Searchbox/InnerSearchboxModal/index.module.css

@@ -1,3 +1,5 @@
+@reference "../../../../styles/index.css";
+
 .mobileChatContainer {
   @apply flex
     grow

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

@@ -7,14 +7,12 @@ import { useSearchbox } from '#site/providers/searchboxProvider';
 import { ChatInput } from '../ChatInput';
 import { ChatInteractionsContainer } from '../ChatInteractions';
 import { Footer } from '../Footer';
-import styles from '../index.module.css';
+import styles from './index.module.css';
 import { MobileTopBar } from '../MobileTopBar';
 import { Search } from '../Search';
 import { SlidingChatPanel } from '../SlidingChatPanel';
 
-export const InnerSearchboxModal: FC<
-  PropsWithChildren<{ onClose: () => void }>
-> = ({ onClose }) => {
+export const InnerSearchboxModal: FC<PropsWithChildren> = () => {
   const searchbox = useSearchbox();
   const [isMobileScreen, setIsMobileScreen] = useState(false);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -38,7 +36,6 @@ export const InnerSearchboxModal: FC<
       {isMobileScreen && (
         <MobileTopBar
           isChatOpen={searchbox.mode === 'chat'}
-          onClose={onClose}
           onSelect={searchbox.switchTo}
         />
       )}

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

@@ -5,6 +5,7 @@ import {
   ArrowLeftIcon,
   SparklesIcon,
 } from '@heroicons/react/24/solid';
+import { Modal } from '@orama/ui/components/Modal';
 import classNames from 'classnames';
 import type { FC } from 'react';
 import { useState } from 'react';
@@ -15,9 +16,8 @@ import styles from './index.module.css';
 
 export const MobileTopBar: FC<{
   isChatOpen: boolean;
-  onClose: () => void;
   onSelect: (mode: 'search' | 'chat') => void;
-}> = ({ isChatOpen, onClose, onSelect }) => {
+}> = ({ isChatOpen, onSelect }) => {
   const [animated, setAnimated] = useState(false);
 
   function selectMode(mode: 'search' | 'chat') {
@@ -30,13 +30,12 @@ export const MobileTopBar: FC<{
 
   return (
     <div className={styles.topBar}>
-      <button
+      <Modal.Close
         className={styles.topBarArrow}
-        onClick={onClose}
-        aria-label="Close"
+        aria-label="Close search modal"
       >
         <ArrowLeftIcon />
-      </button>
+      </Modal.Close>
       <div className={styles.topBarTabs}>
         <button
           className={classNames(styles.topBarTab, {

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

@@ -3,21 +3,17 @@
 import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
 import { SearchRoot, ChatRoot, Modal } from '@orama/ui/components';
 import { useTranslations } from 'next-intl';
-import type { FC, PropsWithChildren } from 'react';
+import type { FC } from 'react';
 
 import '@orama/ui/styles.css';
 
 import { OramaProvider, useOrama } from '#site/providers/oramaProvider';
-import {
-  SearchboxProvider,
-  useSearchbox,
-} from '#site/providers/searchboxProvider';
+import { SearchboxProvider } from '#site/providers/searchboxProvider';
 
 import styles from './index.module.css';
 import { InnerSearchboxModal } from './InnerSearchboxModal';
 
 const Searchbox: FC = () => {
-  const searchbox = useSearchbox();
   const orama = useOrama();
   const t = useTranslations();
 
@@ -26,8 +22,6 @@ const Searchbox: FC = () => {
       <Modal.Root>
         <Modal.Trigger
           type="button"
-          data-testid="orama-button"
-          onClick={searchbox.toggleModal}
           disabled={!orama}
           enableCmdK
           className={styles.searchButton}
@@ -40,41 +34,34 @@ const Searchbox: FC = () => {
         </Modal.Trigger>
 
         <Modal.Wrapper
-          open={searchbox.isOpen}
-          onModalClosed={searchbox.closeModal}
           closeOnOutsideClick
           closeOnEscape
           className={styles.modalWrapper}
         >
-          <Modal.Inner className={styles.modalInner}>
-            <Modal.Content className={styles.modalContent}>
-              <InnerSearchboxModal onClose={searchbox.closeModal} />
-            </Modal.Content>
-          </Modal.Inner>
+          <SearchRoot client={orama ?? null}>
+            <ChatRoot
+              client={orama ?? null}
+              askOptions={{ throttle_delay: 50 }}
+            >
+              <Modal.Inner className={styles.modalInner}>
+                <Modal.Content className={styles.modalContent}>
+                  <InnerSearchboxModal />
+                </Modal.Content>
+              </Modal.Inner>
+            </ChatRoot>
+          </SearchRoot>
         </Modal.Wrapper>
       </Modal.Root>
     </div>
   );
 };
 
-const OramaSearch: FC<PropsWithChildren> = () => {
-  const orama = useOrama();
-
-  return (
-    <SearchRoot client={orama ?? null}>
-      <ChatRoot client={orama ?? null} askOptions={{ throttle_delay: 50 }}>
-        <SearchboxProvider>
-          <Searchbox />
-        </SearchboxProvider>
-      </ChatRoot>
-    </SearchRoot>
-  );
-};
-
 const OramaSearchWrapper = () => {
   return (
     <OramaProvider>
-      <OramaSearch />
+      <SearchboxProvider>
+        <Searchbox />
+      </SearchboxProvider>
     </OramaProvider>
   );
 };

apps/site/providers/searchboxProvider.tsx

@@ -1,14 +1,7 @@
 'use client';
 
-import { useSearchDispatch } from '@orama/ui/contexts';
 import type { FC, PropsWithChildren } from 'react';
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useReducer,
-  useCallback,
-} from 'react';
+import { createContext, useContext, useReducer } from 'react';
 
 import searchboxReducer, {
   searchboxState,
@@ -17,36 +10,17 @@ import searchboxReducer, {
 import type * as Types from '#site/types/searchbox';
 
 type SearchboxContextType = Types.SearchboxState &
-  Types.SearchboxDispatchActions & {
-    clearAll: () => void;
-  };
+  Types.SearchboxDispatchActions;
 
 const SearchboxContext = createContext<SearchboxContextType | null>(null);
 
 export const SearchboxProvider: FC<PropsWithChildren> = ({ children }) => {
   const [state, dispatch] = useReducer(searchboxReducer, searchboxState);
   const actions = getActions(dispatch);
-  const searchDispatch = useSearchDispatch();
-
-  const clearAll = useCallback(() => {
-    searchDispatch({ type: 'SET_SEARCH_TERM', payload: { searchTerm: '' } });
-    searchDispatch({
-      type: 'SET_SELECTED_FACET',
-      payload: { selectedFacet: 'All' },
-    });
-    searchDispatch({ type: 'SET_RESULTS', payload: { results: [] } });
-  }, [searchDispatch]);
-
-  useEffect(() => {
-    if (!state.isOpen) {
-      clearAll();
-    }
-  }, [state.isOpen, clearAll]);
 
   const contextValue: SearchboxContextType = {
     ...state,
     ...actions,
-    clearAll,
   };
 
   return (

apps/site/reducers/searchboxReducer.ts

@@ -3,8 +3,6 @@ import type { Dispatch } from 'react';
 import type * as Types from '#site/types/searchbox';
 
 export const searchboxState: Types.SearchboxState = {
-  // The modal starts closed
-  isOpen: false,
   // Default mode is search
   mode: 'search',
   // Chat panel starts closed
@@ -14,9 +12,6 @@ export const searchboxState: Types.SearchboxState = {
 export const getActions = (
   dispatch: Dispatch<Types.SearchboxAction>
 ): Types.SearchboxDispatchActions => ({
-  openModal: () => dispatch({ type: 'OPEN_MODAL' }),
-  closeModal: () => dispatch({ type: 'CLOSE_MODAL' }),
-  toggleModal: () => dispatch({ type: 'TOGGLE_MODAL' }),
   setMode: payload => dispatch({ type: 'SET_MODE', payload }),
   setChatOpen: payload => dispatch({ type: 'SET_CHAT_OPEN', payload }),
   closeChatAndReset: (onComplete?: () => void) =>
@@ -32,12 +27,6 @@ const reducer = (
   action: Types.SearchboxAction
 ): Types.SearchboxState => {
   switch (action.type) {
-    case 'OPEN_MODAL':
-      return { ...state, isOpen: true };
-    case 'CLOSE_MODAL':
-      return { ...state, isOpen: false };
-    case 'TOGGLE_MODAL':
-      return { ...state, isOpen: !state.isOpen };
     case 'SET_MODE':
       return { ...state, mode: action.payload };
     case 'SET_CHAT_OPEN':

apps/site/types/searchbox.ts

@@ -1,18 +1,13 @@
 export type SearchboxMode = 'search' | 'chat';
 
 export type SearchboxState = {
-  // Whether the search modal is open
-  isOpen: boolean;
   // The current mode (search or chat)
   mode: SearchboxMode;
   // Whether chat panel is open (for desktop)
   isChatOpen: boolean;
 };
 
 export type SearchboxAction =
-  | { type: 'OPEN_MODAL' }
-  | { type: 'CLOSE_MODAL' }
-  | { type: 'TOGGLE_MODAL' }
   | { type: 'SET_MODE'; payload: SearchboxMode }
   | { type: 'SET_CHAT_OPEN'; payload: boolean }
   | {
@@ -22,9 +17,6 @@ export type SearchboxAction =
   | { type: 'SWITCH_TO'; payload: SearchboxMode };
 
 export type SearchboxDispatchActions = {
-  openModal: () => void;
-  closeModal: () => void;
-  toggleModal: () => void;
   setMode: (mode: SearchboxMode) => void;
   setChatOpen: (isOpen: boolean) => void;
   closeChatAndReset: (onComplete?: () => void) => void;