refactor(#77): remove input from tree page and add debounced input

dashboard/src/components/DebounceInput/DebounceInput.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+import { useDebounce } from '../../hooks/useDebounce';
+import { Input, InputProps } from '../ui/input';
+
+interface IDebounceInput extends InputProps {
+  interval: number;
+}
+
+const DebounceInput = ({
+  interval,
+  onChange,
+  ...props
+}: IDebounceInput): JSX.Element => {
+  const [inputEvent, setInputEvent] =
+    useState<React.ChangeEvent<HTMLInputElement>>();
+  const eDebounced = useDebounce(inputEvent, interval);
+
+  const onInputSearchTextChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ): void => {
+    setInputEvent(e);
+  };
+
+  useEffect(() => {
+    if (eDebounced && onChange) onChange(eDebounced);
+  }, [eDebounced, onChange]);
+
+  return <Input {...props} onChange={onInputSearchTextChange} />;
+};
+
+export default DebounceInput;

dashboard/src/hooks/useDebounce.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 
-export const useDebounce = (input: string, delay: number): string => {
+export const useDebounce = <T,>(input: T, delay: number): T => {
   const [debouncedValue, setDebouncedValue] = useState(input);
 
   useEffect(() => {

dashboard/src/routes/Trees/Trees.tsx

@@ -2,13 +2,10 @@ import { ChangeEvent, useCallback, useState } from 'react';
 
 import TreeListingPage from '@/components/TreeListingPage/TreeListingPage';
 
-import { Input } from '@/components/ui/input';
-
-import { useDebounce } from '../../hooks/useDebounce';
+import DebounceInput from '@/components/DebounceInput/DebounceInput';
 
 const Trees = (): JSX.Element => {
   const [inputSearchText, setInputSearchText] = useState('');
-  const debouncedInput = useDebounce(inputSearchText, DEBOUNCE_INTERVAL);
 
   const onInputSearchTextChange = useCallback(
     (e: ChangeEvent<HTMLInputElement>) => {
@@ -20,17 +17,18 @@ const Trees = (): JSX.Element => {
   return (
     <>
       <div className="w-full px-16 pt-24 bg-lightGray">
-        <TreeListingPage inputFilter={debouncedInput} />
+        <TreeListingPage inputFilter={inputSearchText} />
       </div>
       <div className="flex fixed top-0 mx-52 pl-6 pr-12 pt-5 w-full">
         <div className="flex w-2/3 px-6 items-center">
           {/* placeholder for search */}
           {/* TODO: use i18n for the input placeholder */}
-          <Input
+          <DebounceInput
             onChange={onInputSearchTextChange}
             className="w-2/3"
             type="text"
             placeholder="Search by tree, branch or tag"
+            interval={DEBOUNCE_INTERVAL}
           />
         </div>
       </div>