diff --git a/src/components/Search/Search.test.tsx b/src/components/Search/Search.test.tsx index bf0c25f..957b37c 100644 --- a/src/components/Search/Search.test.tsx +++ b/src/components/Search/Search.test.tsx @@ -21,8 +21,4 @@ describe('Search component', () => { expect(screen.getByRole('textbox')).toHaveValue(searchPhrase); }); - // it('calls setSearchQuery prop 6 times', () => { - // userEvent.type(screen.getByRole('textbox'), searchPhrase); - // expect(mockSearchQueryHandler).toHaveBeenCalledTimes(searchPhrase.length); - // }); }); diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 9ad48a3..aa7983e 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -1,19 +1,30 @@ -import { useRecoilState } from 'recoil'; +import { useSetRecoilState } from 'recoil'; import { AiOutlineSearch } from 'react-icons/ai'; +import { useState, useEffect } from 'react'; import { InputWrapper } from './Search.styles'; import { searchQueryState } from 'store'; const Search = ({ placeholder }: { placeholder: string }) => { - const [searchQuery, setSearchQuery] = useRecoilState(searchQueryState); + const setSearchQuery = useSetRecoilState(searchQueryState); + const [input, setInput] = useState(''); + + useEffect(() => { + const id = setTimeout(() => { + setSearchQuery(input); + }, 500); + return () => { + clearTimeout(id); + }; + }, [input, setSearchQuery]); return ( setSearchQuery(e.target.value)} + onChange={e => setInput(e.target.value)} aria-label={placeholder} />