diff --git a/src/search/hooks/use-search-input.ts b/src/search/hooks/use-search-input.ts index 18959d6..e3f695c 100644 --- a/src/search/hooks/use-search-input.ts +++ b/src/search/hooks/use-search-input.ts @@ -1,18 +1,34 @@ -import { useAtom } from 'jotai'; +import { useEffect, useState } from 'react'; + +import { useSetAtom } from 'jotai'; + +import { useDebouncedValue } from '@/shared/hooks/use-debounced-value'; import { searchQueryAtom } from '@/search/core/atoms'; +const DEBOUNCE_DELAY = 500; + export const useSearchInput = () => { - const [value, setValue] = useAtom(searchQueryAtom); + const [inputValue, setInputValue] = useState(''); + const debouncedValue = useDebouncedValue(inputValue, DEBOUNCE_DELAY); + const setSearchQuery = useSetAtom(searchQueryAtom); + + useEffect(() => { + setSearchQuery(debouncedValue); + }, [debouncedValue, setSearchQuery]); const onChange: React.ChangeEventHandler = (e) => { - setValue(e.target.value); + setInputValue(e.target.value); }; - const onClear = () => setValue(''); + + const onClear = () => { + setSearchQuery('') + setInputValue(''); + }; return { - value, + value: inputValue, onChange, onClear, };