Update problems.tsx with debouncing (#4243)

* Update problems.tsx with debouncing

* Added types

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Debouncing works!

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Remove rimraf

* Restore old yarn.lock

* Removed queryHook from SearchBox.tsx

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: mjh316

src/components/ProblemsPage/SearchBox.tsx

@@ -1,11 +1,21 @@
 import * as React from 'react';
 import { useEffect, useRef } from 'react';
-import { useSearchBox } from 'react-instantsearch';
+import { useSearchBox, type UseSearchBoxProps } from 'react-instantsearch';
+import useDebounce from '../../hooks/useDebounce';
 
-export default function SearchBox(): JSX.Element {
+export default function SearchBox(props: UseSearchBoxProps): JSX.Element {
   // https://stackoverflow.com/questions/53314857/how-to-focus-something-on-next-render-with-react-hooks
-  const { query, refine: setQuery } = useSearchBox();
+  const { query, refine: setQuery } = useSearchBox(props);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [searchTerm, setSearchTerm] = React.useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 200);
+  useEffect(() => {
+    if (debouncedSearchTerm) {
+      setQuery(searchTerm);
+    } else {
+      setQuery('');
+    }
+  }, [debouncedSearchTerm]);
   useEffect(() => {
     if (inputRef.current) inputRef.current.focus();
   }, []);
@@ -30,8 +40,8 @@ export default function SearchBox(): JSX.Element {
         placeholder="Search"
         type="search"
         autoComplete="off"
-        value={query}
-        onChange={e => setQuery(e.target.value)}
+        value={searchTerm}
+        onChange={e => setSearchTerm(e.target.value)}
         ref={inputRef}
       />
     </div>

src/hooks/useDebounce.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+
+export default function useDebounce<T>(value: T, delay: number) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value]);
+
+  return debouncedValue;
+}