Revert "impl"

This reverts commit 94784dcb2b3a04a9e3e05a37bf49ce0b5dcc043a.

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -2,12 +2,7 @@ import React, {
   useState, useCallback, useEffect,
 } from 'react';
 
-import Select, { components, SelectComponentsConfig } from 'react-select';
-import AsyncSelect from 'react-select/async';
 import { Modal, ModalBody } from 'reactstrap';
-import { useDebounce } from 'usehooks-ts';
-
-import { useSWRxSearch } from '~/stores/search';
 
 import { useSearchModal } from '../stores/search';
 
@@ -16,7 +11,6 @@ import { SearchHelp } from './SearchHelp';
 import { SearchMethodMenuItem } from './SearchMethodMenuItem';
 import { SearchResultMenuItem } from './SearchResultMenuItem';
 
-
 const SearchModal = (): JSX.Element => {
   const [searchKeyword, setSearchKeyword] = useState('');
 
@@ -30,45 +24,6 @@ const SearchModal = (): JSX.Element => {
     setSearchKeyword('');
   }, []);
 
-
-  // search result
-  // -----------------------------------------------------------------------------------------------------------------------------------------------
-  const debouncedKeyword = useDebounce(searchKeyword, 500);
-
-  const isEmptyKeyword = debouncedKeyword.trim() === '';
-
-  const { data: searchResult, isLoading } = useSWRxSearch(isEmptyKeyword ? null : searchKeyword, null, { limit: 10 });
-  // const options = searchResult?.data.map(pageWithMeta => ({ label: pageWithMeta.data.path }));
-
-
-  // -----------------------------------------------------------------------------------------------------------------------------------------------
-
-
-  // search method
-  // -----------------------------------------------------------------------------------------------------------------------------------------------
-
-  // -----------------------------------------------------------------------------------------------------------------------------------------------
-
-
-  // react-select settings
-  // -----------------------------------------------------------------------------------------------------------------------------------------------
-
-  // const components = {
-  //   IndicatorSeparator: () => null,
-  //   IndicatorsContainer: () => null,
-  //   DropdownIndicator: () => null,
-  //   MenuList: (props) => {
-  //     return (
-  //       <components.MenuList {...props}>
-  //         <SearchMethodMenuItem searchKeyword={searchKeyword} />
-  //         <SearchResultMenuItem searchKeyword={searchKeyword} />
-  //       </components.MenuList>
-  //     );
-  //   },
-  // };
-  // -----------------------------------------------------------------------------------------------------------------------------------------------
-
-
   useEffect(() => {
     if (!searchModalData?.isOpened) {
       setSearchKeyword('');
@@ -78,23 +33,16 @@ const SearchModal = (): JSX.Element => {
   return (
     <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
       <ModalBody>
-        <Select
-          autoFocus
-          menuIsOpen
-          components={{
-            MenuList: (props) => {
-              return (
-                <components.MenuList {...props}>
-                  <SearchMethodMenuItem searchKeyword={searchKeyword} />
-                  <SearchResultMenuItem searchKeyword={searchKeyword} />
-                </components.MenuList>
-              );
-            },
-          }}
-          placeholder="Search..."
-          onInputChange={(value) => { setSearchKeyword(value) }}
-        >
-        </Select>
+        <SearchForm
+          searchKeyword={searchKeyword}
+          onChangeSearchText={changeSearchTextHandler}
+          onClickClearButton={clickClearButtonHandler}
+        />
+        <div className="border-top mt-3 mb-3" />
+        <SearchMethodMenuItem searchKeyword={searchKeyword} />
+        <div className="border-top mt-2 mb-2" />
+        <SearchResultMenuItem searchKeyword={searchKeyword} />
+        <SearchHelp />
       </ModalBody>
     </Modal>
   );