clean code

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

@@ -1,10 +1,9 @@
 import React, {
-  useCallback, useRef, useEffect,
+  useCallback, useRef, useEffect, useMemo,
 } from 'react';
 
 import { GetInputProps } from '../interfaces/downshift';
 
-
 type Props = {
   searchKeyword: string,
   onChangeSearchText?: (text: string) => void,
@@ -30,6 +29,16 @@ export const SearchForm = (props: Props): JSX.Element => {
     }
   }, [onClickClearButton]);
 
+  const inputOption = useMemo(() => {
+    return ({
+      ref: inputRef,
+      type: 'text',
+      value: searchKeyword,
+      placeholder: 'Search...',
+      className: 'form-control',
+    });
+  }, [searchKeyword]);
+
   useEffect(() => {
     if (inputRef.current != null) {
       inputRef.current.focus();
@@ -41,13 +50,7 @@ export const SearchForm = (props: Props): JSX.Element => {
       <span className="material-symbols-outlined fs-4 me-3">search</span>
 
       <input
-        {...getInputProps({
-          ref: inputRef,
-          type: 'text',
-          placeholder: 'Search...',
-          value: searchKeyword,
-        })}
-        className="form-control"
+        {...getInputProps(inputOption)}
         onChange={changeSearchTextHandler}
       />
 

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

@@ -1,5 +1,5 @@
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import type { GetItemProps } from '../interfaces/downshift';
 
@@ -16,14 +16,17 @@ export const SearchMenuItem = (props: Props): JSX.Element => {
     url, getItemProps, index, highlightedIndex, children,
   } = props;
 
-  const option = {
-    index,
-    item: { url },
-    style: { backgroundColor: highlightedIndex === index ? 'lightgray' : 'white', pointer: 'cursor' },
-  };
+  const itemMenuOption = useMemo(() => {
+    return {
+      index,
+      item: { url },
+      style: { backgroundColor: highlightedIndex === index ? 'lightgray' : 'white', cursor: 'pointer' },
+      className: 'text-muted mb-2 d-flex',
+    };
+  }, [highlightedIndex, index, url]);
 
   return (
-    <li className="text-muted mb-2 d-flex" {...getItemProps(option)}>
+    <li {...getItemProps(itemMenuOption)}>
       { children }
     </li>
   );

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

@@ -11,16 +11,16 @@ import { SearchMenuItem } from './SearchMenuItem';
 type ComponentType = 'nomal' | 'tree' | 'exact';
 
 type SearchMethodMenuItemSubstanceProps = {
-  componentType: ComponentType
   index: number
   highlightedIndex: number | null
-  getItemProps: GetItemProps
   searchKeyword: string
+  componentType: ComponentType
+  getItemProps: GetItemProps
 }
 
 const SearchMethodMenuItemSubstance = (props: SearchMethodMenuItemSubstanceProps): JSX.Element => {
   const {
-    componentType, getItemProps, index, highlightedIndex, searchKeyword,
+    index, highlightedIndex, searchKeyword, getItemProps, componentType,
   } = props;
   const { t } = useTranslation('commons');
   const { data: currentPagePath } = useCurrentPagePath();

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

@@ -6,6 +6,7 @@ import Downshift from 'downshift';
 import { useRouter } from 'next/router';
 import { Modal, ModalBody } from 'reactstrap';
 
+import type { DownshiftItem } from '../interfaces/downshift';
 import { useSearchModal } from '../stores/search';
 
 import { SearchForm } from './SearchForm';
@@ -13,7 +14,6 @@ import { SearchHelp } from './SearchHelp';
 import { SearchMethodMenuItem } from './SearchMethodMenuItem';
 import { SearchResultMenuItem } from './SearchResultMenuItem';
 
-
 const SearchModal = (): JSX.Element => {
   const [searchKeyword, setSearchKeyword] = useState('');
 
@@ -30,8 +30,8 @@ const SearchModal = (): JSX.Element => {
   }, []);
 
   const selectSearchMenuItemHandler = useCallback((url: string) => {
-    router.push(url);
     closeSearchModal();
+    router.push(url);
   }, [closeSearchModal, router]);
 
   useEffect(() => {
@@ -40,11 +40,10 @@ const SearchModal = (): JSX.Element => {
     }
   }, [searchModalData?.isOpened]);
 
-
   return (
     <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal}>
       <ModalBody>
-        <Downshift itemToString={undefined} onChange={(selectedItem: { url: string }) => { selectSearchMenuItemHandler(selectedItem.url) }}>
+        <Downshift onChange={(selectedItem: DownshiftItem) => { selectSearchMenuItemHandler(selectedItem.url) }}>
           {({
             getInputProps,
             getItemProps,

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

@@ -11,8 +11,8 @@ import { SearchMenuItem } from './SearchMenuItem';
 
 type Props = {
   searchKeyword: string,
-  getItemProps: GetItemProps,
   highlightedIndex: number | null,
+  getItemProps: GetItemProps,
 }
 export const SearchResultMenuItem = (props: Props): JSX.Element => {
   const { searchKeyword, highlightedIndex, getItemProps } = props;

apps/app/src/features/search/client/interfaces/downshift.ts

@@ -1,6 +1,6 @@
 import type { ControllerStateAndHelpers } from 'downshift';
 
-type DownshiftItem = { url: string };
+export type DownshiftItem = { url: string };
 
 export type GetItemProps = ControllerStateAndHelpers<DownshiftItem>['getItemProps']
 export type GetInputProps = ControllerStateAndHelpers<DownshiftItem>['getInputProps']