reverted to original component structure

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

@@ -8,39 +8,42 @@ import type { GetItemProps } from '../interfaces/downshift';
 
 import { SearchMenuItem } from './SearchMenuItem';
 
-type ComponentType = 'nomal' | 'tree' | 'exact';
-
-type SearchMethodMenuItemSubstanceProps = {
-  index: number
+type Props = {
   highlightedIndex: number | null
   searchKeyword: string
-  componentType: ComponentType
   getItemProps: GetItemProps
 }
 
-const SearchMethodMenuItemSubstance = (props: SearchMethodMenuItemSubstanceProps): JSX.Element => {
+export const SearchMethodMenuItem = (props: Props): JSX.Element => {
   const {
-    index, highlightedIndex, searchKeyword, getItemProps, componentType,
+    highlightedIndex, searchKeyword, getItemProps,
   } = props;
+
   const { t } = useTranslation('commons');
+
   const { data: currentPagePath } = useCurrentPagePath();
 
-  if (componentType === 'nomal') {
-    return (
-      <SearchMenuItem index={index} highlightedIndex={highlightedIndex} getItemProps={getItemProps} url={`/_search?q=${searchKeyword}`}>
-        <span className="material-symbols-outlined fs-4 me-3">search</span>
-        <span>{searchKeyword}</span>
-        <div className="ms-auto">
-          <span>{t('search_method_menu_item.search_in_all')}</span>
-        </div>
-      </SearchMenuItem>
-    );
-  }
+  const shouldShowMenuItem = searchKeyword.length > 0;
+
+  return (
+    <>
+      { shouldShowMenuItem && (
+        <SearchMenuItem
+          index={0}
+          highlightedIndex={highlightedIndex}
+          getItemProps={getItemProps}
+          url={`/_search?q=${searchKeyword}`}
+        >
+          <span className="material-symbols-outlined fs-4 me-3">search</span>
+          <span>{searchKeyword}</span>
+          <div className="ms-auto">
+            <span>{t('search_method_menu_item.search_in_all')}</span>
+          </div>
+        </SearchMenuItem>
+      )}
 
-  if (componentType === 'tree') {
-    return (
       <SearchMenuItem
-        index={index}
+        index={shouldShowMenuItem ? 1 : 0}
         highlightedIndex={highlightedIndex}
         getItemProps={getItemProps}
         url={`/_search?q=prefix:${currentPagePath} ${searchKeyword}`}
@@ -52,44 +55,21 @@ const SearchMethodMenuItemSubstance = (props: SearchMethodMenuItemSubstanceProps
           <span>{t('search_method_menu_item.only_children_of_this_tree')}</span>
         </div>
       </SearchMenuItem>
-    );
-  }
 
-  if (componentType === 'exact') {
-    return (
-      <SearchMenuItem index={index} highlightedIndex={highlightedIndex} getItemProps={getItemProps} url={`/_search?q="${searchKeyword}"`}>
-        <span className="material-symbols-outlined fs-4 me-3">search</span>
-        <span>{`"${searchKeyword}"`}</span>
-        <div className="ms-auto">
-          <span>{t('search_method_menu_item.exact_mutch')}</span>
-        </div>
-      </SearchMenuItem>
-    );
-  }
-
-  return (<></>);
-};
-
-
-type SearchMethodMenuItemProps = Omit<SearchMethodMenuItemSubstanceProps, 'componentType' | 'index'> & { searchKeyword: string }
-
-export const SearchMethodMenuItem = (props: SearchMethodMenuItemProps): JSX.Element => {
-
-  const { searchKeyword } = props;
-
-  const isEmptyKeyword = searchKeyword.trim().length === 0;
-
-  const searchMethodMenuItemData: Array<{ componentType: ComponentType }> = isEmptyKeyword
-    ? [{ componentType: 'tree' }]
-    : [{ componentType: 'nomal' }, { componentType: 'tree' }, { componentType: 'exact' }];
-
-  return (
-    <>
-      { searchMethodMenuItemData
-        .map((item, index) => (
-          <SearchMethodMenuItemSubstance key={item.componentType} index={index} componentType={item.componentType} {...props} />
-        ))
-      }
+      { shouldShowMenuItem && (
+        <SearchMenuItem
+          index={2}
+          highlightedIndex={highlightedIndex}
+          getItemProps={getItemProps}
+          url={`/_search?q="${searchKeyword}"`}
+        >
+          <span className="material-symbols-outlined fs-4 me-3">search</span>
+          <span>{`"${searchKeyword}"`}</span>
+          <div className="ms-auto">
+            <span>{t('search_method_menu_item.exact_mutch')}</span>
+          </div>
+        </SearchMenuItem>
+      ) }
     </>
   );
 };