impl

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

@@ -2,7 +2,12 @@ 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';
 
@@ -11,6 +16,7 @@ import { SearchHelp } from './SearchHelp';
 import { SearchMethodMenuItem } from './SearchMethodMenuItem';
 import { SearchResultMenuItem } from './SearchResultMenuItem';
 
+
 const SearchModal = (): JSX.Element => {
   const [searchKeyword, setSearchKeyword] = useState('');
 
@@ -24,6 +30,45 @@ 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('');
@@ -33,16 +78,23 @@ const SearchModal = (): JSX.Element => {
   return (
     <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
       <ModalBody>
-        <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 />
+        <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>
       </ModalBody>
     </Modal>
   );