diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-19 22:06:00 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-19 22:06:00 +0700 |
| commit | d0d2a927fa1b9ac0a0e571f6e6f1294445db66a4 (patch) | |
| tree | 1898f8205265a7e800aeeac28e2b145dea45d7de /src/core/components/elements/NavBar/Search.jsx | |
| parent | 67582cf3274929359eebe849b2fbeda4f3a8f630 (diff) | |
fix
Diffstat (limited to 'src/core/components/elements/NavBar/Search.jsx')
| -rw-r--r-- | src/core/components/elements/NavBar/Search.jsx | 89 |
1 files changed, 0 insertions, 89 deletions
diff --git a/src/core/components/elements/NavBar/Search.jsx b/src/core/components/elements/NavBar/Search.jsx deleted file mode 100644 index cca1a97c..00000000 --- a/src/core/components/elements/NavBar/Search.jsx +++ /dev/null @@ -1,89 +0,0 @@ -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" - -const Search = () => { - const router = useRouter() - const queryRef = useRef() - const [ query, setQuery ] = useState('') - const [ suggestions, setSuggestions ] = useState([]) - - useEffect(() => { - setQuery(router.query.q) - }, [router.query]) - - const loadSuggestion = useCallback(() => { - if (query && document.activeElement == queryRef.current) { - (async () => { - const dataSuggestion = await searchSuggestApi({ query }) - setSuggestions(dataSuggestion.data.suggestions) - })() - return - } else { - setSuggestions([]) - } - }, [ query ]) - - useEffect(() => { - if (query && document.activeElement == queryRef.current) { - loadSuggestion() - } else { - setSuggestions([]) - } - }, [ loadSuggestion, query ]) - - const handleSubmit = (e) => { - e.preventDefault() - if (query) { - router.push(`/shop/search?q=${query}`) - } else { - queryRef.current.focus() - } - } - - const onInputBlur = () => { - setTimeout(() => { - setSuggestions([]) - }, 100) - } - - return ( - <form - onSubmit={handleSubmit} - className="flex relative" - > - <input - type="text" - ref={queryRef} - className="form-input p-3 rounded-r-none border-r-0 focus:border-gray_r-6" - placeholder="Ketik nama, part number, merk" - value={query} - onChange={(e) => setQuery(e.target.value)} - onBlur={onInputBlur} - onFocus={loadSuggestion} - /> - <button - type="submit" - className="rounded-r border border-l-0 border-gray_r-6 px-2" - > - <MagnifyingGlassIcon className="w-6" /> - </button> - - { suggestions.length > 1 && ( - <> - <div className="absolute w-full top-[50px] rounded-b bg-gray_r-1 border border-gray_r-6 divide-y divide-gray_r-6"> - {suggestions.map((suggestion, index) => ( - <Link href={`/shop/search?q=${suggestion.term}`} key={index} className="px-3 py-3 !text-gray_r-12 font-normal"> - {suggestion.term} - </Link> - ))} - </div> - </> - ) } - </form> - ) -} - -export default Search
\ No newline at end of file |
