Add debounce for search input

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);
-  // });
 });

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 (
     <InputWrapper>
       <AiOutlineSearch />
       <input
-        value={searchQuery}
+        value={input}
         type="text"
         placeholder={placeholder}
-        onChange={e => setSearchQuery(e.target.value)}
+        onChange={e => setInput(e.target.value)}
         aria-label={placeholder}
       />
     </InputWrapper>