fix: updating code to the coding standards & changing the search param

client/src/Pages/Infrastructure/Monitors/Components/LoadingSpinner/index.jsx

@@ -1,46 +0,0 @@
-import { CircularProgress, Box } from "@mui/material";
-import { useTheme } from "@emotion/react";
-import PropTypes from "prop-types";
-const LoadingSpinner = ({ shouldRender }) => {
-	const theme = useTheme();
-	if (shouldRender === false) {
-		return;
-	}
-
-	return (
-		<>
-			<Box
-				width="100%"
-				height="100%"
-				position="absolute"
-				sx={{
-					backgroundColor: theme.palette.primary.main,
-					opacity: 0.8,
-					zIndex: 100,
-				}}
-			/>
-			<Box
-				height="100%"
-				position="absolute"
-				top="50%"
-				left="50%"
-				sx={{
-					transform: "translateX(-50%)",
-					zIndex: 101,
-				}}
-			>
-				<CircularProgress
-					sx={{
-						color: theme.palette.accent.main,
-					}}
-				/>
-			</Box>
-		</>
-	);
-};
-
-LoadingSpinner.propTypes = {
-	shouldRender: PropTypes.bool,
-};
-
-export default LoadingSpinner;

client/src/Pages/Infrastructure/Monitors/Components/MonitorsTable/index.jsx

@@ -5,7 +5,7 @@ import Host from "../../../../../Components/Host";
 import { StatusLabel } from "../../../../../Components/Label";
 import { Stack } from "@mui/material";
 import { InfrastructureMenu } from "../MonitorsTableMenu";
-import LoadingSpinner from "../LoadingSpinner";
+import LoadingSpinner from "../../../../Uptime/Monitors/Components/LoadingSpinner";
 // Assets
 import CPUChipIcon from "../../../../../assets/icons/cpu-chip.svg?react";
 import CustomGauge from "../../../../../Components/Charts/CustomGauge";

client/src/Pages/Infrastructure/Monitors/Components/SearchComponent/index.jsx

@@ -1,49 +0,0 @@
-import { useState } from "react";
-import Search from "../../../../../Components/Inputs/Search";
-import { Box } from "@mui/material";
-import useDebounce from "../../Hooks/useDebounce";
-import { useEffect, useRef } from "react";
-import PropTypes from "prop-types";
-
-const SearchComponent = ({ monitors = [], onSearchChange, setIsSearching }) => {
-	const isFirstRender = useRef(true);
-	const [localSearch, setLocalSearch] = useState("");
-	const debouncedSearch = useDebounce(localSearch, 500);
-	useEffect(() => {
-		if (isFirstRender.current === true) {
-			isFirstRender.current = false;
-			return;
-		}
-		onSearchChange(debouncedSearch);
-		setIsSearching(false);
-	}, [debouncedSearch, onSearchChange, setIsSearching]);
-
-	const handleSearch = (value) => {
-		setLocalSearch(value);
-		setIsSearching(true);
-	};
-
-	return (
-		<Box
-			width="25%"
-			minWidth={150}
-			ml="auto"
-			mt={2}
-		>
-			<Search
-				options={monitors}
-				filteredBy="name"
-				inputValue={localSearch}
-				handleInputChange={handleSearch}
-			/>
-		</Box>
-	);
-};
-
-SearchComponent.propTypes = {
-	monitors: PropTypes.array,
-	onSearchChange: PropTypes.func,
-	setIsSearching: PropTypes.func,
-};
-
-export default SearchComponent;

client/src/Pages/Infrastructure/Monitors/Hooks/useDebounce.jsx

@@ -1,18 +0,0 @@
-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;

client/src/Pages/Infrastructure/Monitors/Hooks/useMonitorFetch.jsx

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 import { networkService } from "../../../../main";
 import { createToast } from "../../../../Utils/toastUtils";
 
-const useMonitorFetch = ({ page, field, filter, rowsPerPage, updateTrigger, search }) => {
+const useMonitorFetch = ({ page, field, filter, rowsPerPage, updateTrigger }) => {
 	// Redux state
 	const { user } = useSelector((state) => state.auth);
 
@@ -24,7 +24,6 @@ const useMonitorFetch = ({ page, field, filter, rowsPerPage, updateTrigger, sear
 					types: ["hardware"],
 					page: page,
 					rowsPerPage: rowsPerPage,
-					search: search,
 				});
 				setMonitors(response?.data?.data?.filteredMonitors ?? []);
 				setSummary(response?.data?.data?.summary ?? {});
@@ -39,7 +38,7 @@ const useMonitorFetch = ({ page, field, filter, rowsPerPage, updateTrigger, sear
 		};
 
 		fetchMonitors();
-	}, [page, field, filter, rowsPerPage, user.teamId, updateTrigger, search]);
+	}, [page, field, filter, rowsPerPage, user.teamId, updateTrigger]);
 
 	return { monitors, summary, isLoading, networkError };
 };

client/src/Pages/Infrastructure/Monitors/index.jsx

@@ -8,7 +8,7 @@ import Pagination from "../../..//Components/Table/TablePagination";
 import GenericFallback from "../../../Components/GenericFallback";
 import Fallback from "../../../Components/Fallback";
 import Filter from "./Components/Filters";
-import SearchComponent from "./Components/SearchComponent";
+import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent";
 // Utils
 import { useTheme } from "@emotion/react";
 import { useMonitorFetch } from "./Hooks/useMonitorFetch";
@@ -56,10 +56,9 @@ const InfrastructureMonitors = () => {
 	const { monitors, summary, isLoading, networkError } = useMonitorFetch({
 		page,
 		field: field,
-		filter: toFilterStatus,
+		filter: toFilterStatus || search,
 		rowsPerPage,
 		updateTrigger,
-		search,
 	});
 
 	if (networkError === true) {

client/src/Utils/NetworkService.js

@@ -187,8 +187,7 @@ class NetworkService {
 	 */
 
 	async getMonitorsByTeamId(config) {
-		const { teamId, limit, types, page, rowsPerPage, filter, field, order, search } =
-			config;
+		const { teamId, limit, types, page, rowsPerPage, filter, field, order } = config;
 		const params = new URLSearchParams();
 
 		if (limit) params.append("limit", limit);
@@ -202,7 +201,6 @@ class NetworkService {
 		if (filter) params.append("filter", filter);
 		if (field) params.append("field", field);
 		if (order) params.append("order", order);
-		if (search) params.append("search", search);
 
 		return this.axiosInstance.get(`/monitors/team/${teamId}?${params.toString()}`, {
 			headers: {

server/db/mongo/modules/monitorModule.js

@@ -510,7 +510,7 @@ const getMonitorById = async (monitorId) => {
 };
 
 const getMonitorsByTeamId = async (req) => {
-	let { limit, type, page, rowsPerPage, filter, field, order, search } = req.query;
+	let { limit, type, page, rowsPerPage, filter, field, order } = req.query;
 	limit = parseInt(limit);
 	page = parseInt(page);
 	rowsPerPage = parseInt(rowsPerPage);
@@ -523,8 +523,8 @@ const getMonitorsByTeamId = async (req) => {
 	if (type !== undefined) {
 		matchStage.type = Array.isArray(type) ? { $in: type } : type;
 	}
-	if (search) {
-		matchStage.name = { $regex: search, $options: "i" };
+	if (field === undefined) {
+		matchStage.name = { $regex: filter, $options: "i" };
 	}
 
 	const summaryResult = await Monitor.aggregate(

server/validation/joi.js

@@ -147,7 +147,6 @@ const getMonitorsByTeamIdQueryValidation = joi.object({
 	filter: joi.string(),
 	field: joi.string(),
 	order: joi.string().valid("asc", "desc"),
-	search: joi.string(),
 });
 
 const getMonitorStatsByIdParamValidation = joi.object({