Connect search component to monitor table

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