1 files changed, 44 insertions, 40 deletions
diff --git a/src/core/components/elements/Navbar/Search.jsx b/src/core/components/elements/Navbar/Search.jsx
index e4f89103..d044d6a0 100644
--- a/src/core/components/elements/Navbar/Search.jsx
+++ b/src/core/components/elements/Navbar/Search.jsx
@@ -1,68 +1,72 @@
-import searchSuggestApi from '@/core/api/searchSuggestApi'
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
-import { useCallback, useEffect, useRef, useState } from 'react'
-import Link from '../Link/Link'
-import { useRouter } from 'next/router'
-import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug'
+import searchSuggestApi from '@/core/api/searchSuggestApi';
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import Link from '../Link/Link';
+import { useRouter } from 'next/router';
+import { getIdFromSlug, getNameFromSlug } from '@/core/utils/slug';
 
 const Search = () => {
-  const router = useRouter()
-  const queryRef = useRef()
-  const { slug = '' } = router.query
-  const [query, setQuery] = useState(router.query.q || '')
-  const [suggestions, setSuggestions] = useState([])
-  const [segment, setSegment] = useState(null)
-  const [optionSegment, setOptionSegment] = useState(null)
-  const [optoinSelected, setOptionSelected] = useState(getNameFromSlug(slug) || 'default')
-  const [pathSegments, setPathSegments] = useState(router?.asPath.split('/') || [])
+  const router = useRouter();
+  const queryRef = useRef();
+  const { slug = '' } = router.query;
+  const [query, setQuery] = useState(router.query.q || '');
+  const [suggestions, setSuggestions] = useState([]);
+  const [segment, setSegment] = useState(null);
+  const [optionSegment, setOptionSegment] = useState(null);
+  const [optoinSelected, setOptionSelected] = useState(
+    getNameFromSlug(slug) || 'default'
+  );
+  const [pathSegments, setPathSegments] = useState(
+    router?.asPath.split('/') || []
+  );
 
   const loadSuggestion = useCallback(() => {
     if (query && document.activeElement == queryRef.current) {
       searchSuggestApi({ query }).then((response) => {
-        setSuggestions(response.data?.suggestions || [])
-      })
+        setSuggestions(response.data?.suggestions || []);
+      });
     } else {
-      setSuggestions([])
+      setSuggestions([]);
     }
-  }, [query])
+  }, [query]);
 
   useEffect(() => {
     if (query && document.activeElement == queryRef.current) {
-      loadSuggestion()
+      loadSuggestion();
     } else {
-      setSuggestions([])
+      setSuggestions([]);
     }
-    setFilterSearch()
-  }, [loadSuggestion, query])
+    setFilterSearch();
+  }, [loadSuggestion, query]);
 
   const handleSubmit = (e) => {
-    e.preventDefault()
+    e.preventDefault();
     if (optionSegment && optoinSelected !== 'default' && optoinSelected) {
-      router.push(`/shop/${segment}/${slug}?q=${query}`)
+      router.push(`/shop/${segment}/${slug}?q=${query}`);
     } else {
       if (query) {
-        router.push(`/shop/search?q=${query}`)
+        router.push(`/shop/search?q=${query}`);
       } else {
-        queryRef.current.focus()
+        queryRef.current.focus();
       }
     }
-  }
+  };
 
   const handleSelectChange = async (e) => {
-    await setOptionSelected(e.target.value)
-  }
+    await setOptionSelected(e.target.value);
+  };
   const setFilterSearch = async () => {
     if (router.pathname.includes('brands') && pathSegments[3]) {
-      await setSegment(pathSegments[2])
-      await setOptionSegment(getNameFromSlug(slug))
+      await setSegment(pathSegments[2]);
+      await setOptionSegment(getNameFromSlug(slug));
     }
-  }
+  };
 
   const onInputBlur = () => {
     setTimeout(() => {
-      setSuggestions([])
-    }, 100)
-  }
+      setSuggestions([]);
+    }, 100);
+  };
 
   return (
     <>
@@ -84,7 +88,7 @@ const Search = () => {
           className={`form-input p-3 ${
             segment ? 'rounded-l-none border-l-0' : ''
           } rounded-r-none border-r-0 focus:border-gray_r-6`}
-          placeholder='Ketik nama, part number, merk'
+          placeholder='Ketik nama, part number, merek'
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onBlur={onInputBlur}
@@ -115,7 +119,7 @@ const Search = () => {
         </div>
       </form>
     </>
-  )
-}
+  );
+};
 
-export default Search
+export default Search;