feat(#21): implement search in tree list page

dashboard/src/components/Dashboard/Dashboard.tsx

@@ -1,19 +1,31 @@
+import { ChangeEvent, useCallback, useState } from "react";
+
 import SideMenu from "../SideMenu/SideMenu";
 import TopBar from "../TopBar/TopBar";
 import TreeListingPage from "../TreeListingPage/TreeListingPage";
+import { useDebounce } from "../../hooks/useDebounce";
 
 const Dashboard = () : JSX.Element => {
+  const [inputSearchText, setInputSearchText] = useState('');
+  const debouncedInput = useDebounce(inputSearchText, DEBOUNCE_INTERVAL);
+
+  const onInputSearchTextChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
+    setInputSearchText(e.target.value);
+  }, []);
+
   return (
     <div className="w-full h-full">
       <div className="flex flex-row w-full justify-between">
         <SideMenu />
-        <TopBar />
+        <TopBar onChangeInputText={onInputSearchTextChange}/>
         <div className="w-full px-16 pt-24 bg-lightGray">
-          <TreeListingPage />
+          <TreeListingPage inputFilter={debouncedInput}/>
         </div>
       </div>
     </div>
   );
 };
 
+const DEBOUNCE_INTERVAL = 300;
+
 export default Dashboard;

dashboard/src/components/TopBar/TopBar.tsx

@@ -1,8 +1,14 @@
 import { FormattedMessage } from "react-intl";
 
+import { ChangeEvent } from "react";
+
 import { Input } from "../ui/input";
 
-const TopBar = (): JSX.Element => {
+interface ITopBar {
+  onChangeInputText: (e: ChangeEvent<HTMLInputElement>) => void;
+}
+
+const TopBar = ({onChangeInputText}: ITopBar): JSX.Element => {
   return (
     <div className="flex fixed top-0 h-20 mx-52 pl-6 pr-12 bg-white w-full">
       <div className="flex flex-row w-full items-center justify-between">
@@ -12,7 +18,7 @@ const TopBar = (): JSX.Element => {
         <div className="flex w-2/3 px-6 items-center">
           {/* placeholder for search */}
           {/* TODO: use i18n for the input placeholder */}
-          <Input className="w-2/3 text-black" type="text" placeholder="Search by tree, branch or tag" />
+          <Input onChange={onChangeInputText} className="w-2/3" type="text" placeholder="Search by tree, branch or tag" />
         </div>
       </div>
     </div>

dashboard/src/components/TreeListingPage/TreeListingPage.tsx

@@ -19,6 +19,10 @@ interface ITableInformation {
   onClickBack: () => void; 
 }
 
+interface ITreeListingPage {
+  inputFilter: string;
+}
+
 const TableInfo = ({
   startIndex,
   endIndex,
@@ -66,15 +70,20 @@ const FilterButton = (): JSX.Element => {
   );
 };
 
-const TreeListingPage = (): JSX.Element => {
+const TreeListingPage = ({inputFilter}: ITreeListingPage): JSX.Element => {
 
   const { data } = useTreeTable();
 
   const listItems: TreeTableBody[] = useMemo(() => {
       if(!data) {
         return [];
       } else {
-          return((data as Tree[]).map(tree => {
+          return((data as Tree[])
+          .filter(tree => tree.tree_name?.includes(inputFilter)
+            || tree.git_commit_hash?.includes(inputFilter)
+              || tree.git_commit_name?.includes(inputFilter)
+                || tree.git_repository_branch?.includes(inputFilter))
+          .map(tree => {
             const fullHash = tree.git_commit_hash ?? '';
             const commitHash = fullHash.substring(0, NUMBER_CHAR_HASH) + (fullHash.length > NUMBER_CHAR_HASH ? '...' : '');
             const tagCommit = tree.git_commit_name ? `${tree.git_commit_name} - ${commitHash}` : commitHash;
@@ -90,8 +99,8 @@ const TreeListingPage = (): JSX.Element => {
           .sort((a, b) => a.name.localeCompare(b.name, undefined, {numeric: true})
                             || a.branch.localeCompare(b.branch, undefined, {numeric: true})));
         }
-  }, [data]);
-
+  }, [data, inputFilter]);
+  
   const [startIndex, setStartIndex] = useState(0);
   const [endIndex, setEndIndex] = useState(0);
 

dashboard/src/hooks/useDebounce.tsx

@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+
+export const useDebounce = (input: string, delay: number): string => {
+  const [debouncedValue, setDebouncedValue] = useState(input);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+        setDebouncedValue(input);
+    }, delay); 
+    return (): void => {
+      clearTimeout(handler);
+    };
+  }, [input, delay]);
+
+  return debouncedValue;
+};