1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
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
|
