Connect search component to monitor table

Client/src/Components/Inputs/Search/index.jsx

@@ -15,15 +15,26 @@ import SearchIcon from "../../../assets/icons/search.svg?react";
  * @param {Object} props.sx - Additional styles to apply to the component
  * @returns {JSX.Element} The rendered Search component
  */
-const Search = ({ id, options, filteredBy, value, handleChange, sx }) => {
+const Search = ({
+  id,
+  options,
+  filteredBy,
+  value,
+  handleInputChange,
+  handleChange,
+  sx,
+}) => {
   const theme = useTheme();
 
   return (
     <Autocomplete
       id={id}
       inputValue={value}
-      onInputChange={(event, newValue) => {
-        handleChange(newValue);
+      onInputChange={(_, newValue) => {
+        handleInputChange(newValue);
+      }}
+      onChange={(_, newValue) => {
+        handleChange && handleChange(newValue);
       }}
       fullWidth
       freeSolo
@@ -131,7 +142,8 @@ Search.propTypes = {
   options: PropTypes.array.isRequired,
   filteredBy: PropTypes.string.isRequired,
   value: PropTypes.string.isRequired,
-  handleChange: PropTypes.func.isRequired,
+  handleInputChange: PropTypes.func.isRequired,
+  handleChange: PropTypes.func,
   sx: PropTypes.object,
 };
 

Client/src/Pages/Monitors/Home/MonitorTable/index.jsx

@@ -108,7 +108,7 @@ TablePaginationActions.propTypes = {
   onPageChange: PropTypes.func.isRequired,
 };
 
-const MonitorTable = ({ isAdmin }) => {
+const MonitorTable = ({ isAdmin, filter }) => {
   const theme = useTheme();
   const navigate = useNavigate();
   const dispatch = useDispatch();
@@ -155,7 +155,7 @@ const MonitorTable = ({ isAdmin }) => {
           normalize: true,
           page: page,
           rowsPerPage: rowsPerPage,
-          filter: null,
+          filter: filter,
           field: sort.field,
           order: sort.order,
         });
@@ -166,7 +166,7 @@ const MonitorTable = ({ isAdmin }) => {
       }
     };
     fetchPage();
-  }, [updateTrigger, authState, page, rowsPerPage]);
+  }, [updateTrigger, authState, page, rowsPerPage, filter, sort]);
 
   /**
    * Helper function to calculate the range of displayed rows.
@@ -406,6 +406,7 @@ const MonitorTable = ({ isAdmin }) => {
 
 MonitorTable.propTypes = {
   isAdmin: PropTypes.bool,
+  filter: PropTypes.string,
 };
 
 const MemoizedMonitorTable = memo(MonitorTable);

Client/src/Pages/Monitors/Home/index.jsx

@@ -13,6 +13,7 @@ import Breadcrumbs from "../../../Components/Breadcrumbs";
 import Greeting from "../../../Utils/greeting";
 import MonitorTable from "./MonitorTable";
 import Search from "../../../Components/Inputs/Search";
+import useDebounce from "../../../Utils/debounce";
 
 const Monitors = ({ isAdmin }) => {
   const theme = useTheme();
@@ -21,6 +22,7 @@ const Monitors = ({ isAdmin }) => {
   const authState = useSelector((state) => state.auth);
   const [search, setSearch] = useState("");
   const dispatch = useDispatch({});
+  const debouncedFilter = useDebounce(search, 500);
 
   useEffect(() => {
     dispatch(getUptimeMonitorsByTeamId(authState.authToken));
@@ -122,11 +124,11 @@ const Monitors = ({ isAdmin }) => {
                       options={monitorState?.monitorsSummary.monitors}
                       filteredBy="name"
                       value={search}
-                      handleChange={setSearch}
+                      handleInputChange={setSearch}
                     />
                   </Box>
                 </Stack>
-                <MonitorTable isAdmin={isAdmin} />
+                <MonitorTable isAdmin={isAdmin} filter={debouncedFilter} />
               </Box>
             </>
           )}

Client/src/Utils/debounce.jsx

@@ -0,0 +1,18 @@
+import { useState, useEffect } from "react";
+
+const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+  return debouncedValue;
+};
+
+export default useDebounce;