Merge branch 'develop' into feat/search-infra-moniters

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

@@ -12,7 +12,7 @@ import CustomGauge from "../../../../../Components/Charts/CustomGauge";
 
 // Utils
 import { useTheme } from "@emotion/react";
-import useUtils from "../../../../Uptime/Monitors/Hooks/useUtils";
+import { useMonitorUtils } from "../../../../../Hooks/useMonitorUtils";
 import { useNavigate } from "react-router-dom";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
@@ -27,7 +27,7 @@ const MonitorsTable = ({
 	// Utils
 	const theme = useTheme();
 	const { t } = useTranslation();
-	const { determineState } = useUtils();
+	const { determineState } = useMonitorUtils();
 	const navigate = useNavigate();
 
 	// Handlers
@@ -94,6 +94,7 @@ const MonitorsTable = ({
 					monitor={row}
 					isAdmin={isAdmin}
 					updateCallback={handleActionMenuDelete}
+					isLoading={isLoading}
 				/>
 			),
 		},
@@ -151,7 +152,7 @@ const MonitorsTable = ({
 };
 
 MonitorsTable.propTypes = {
-	shouldRender: PropTypes.bool,
+	isLoading: PropTypes.bool,
 	monitors: PropTypes.array,
 	isAdmin: PropTypes.bool,
 	handleActionMenuDelete: PropTypes.func,

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

@@ -1,7 +1,6 @@
 /* TODO I basically copied and pasted this component from the actionsMenu. Check how we can make it reusable */
 
 import { useRef, useState } from "react";
-import { useSelector } from "react-redux";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
 import { createToast } from "../../../../../Utils/toastUtils";
@@ -30,7 +29,6 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 	const [isOpen, setIsOpen] = useState(false);
 	const [isDialogOpen, setIsDialogOpen] = useState(false);
 	const theme = useTheme();
-	const { isLoading } = useSelector((state) => state.uptimeMonitors);
 
 	const openMenu = (e) => {
 		e.stopPropagation();
@@ -117,7 +115,6 @@ const InfrastructureMenu = ({ monitor, isAdmin, updateCallback }) => {
 				onCancel={cancelRemove}
 				confirmationButtonLabel="Delete"
 				onConfirm={handleRemove}
-				isLoading={isLoading}
 				modelTitle="modal-delete-monitor"
 				modelDescription="delete-monitor-confirmation"
 			/>

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

@@ -1,46 +0,0 @@
-import { useState, useEffect } from "react";
-import { useSelector } from "react-redux";
-import { networkService } from "../../../../main";
-import { createToast } from "../../../../Utils/toastUtils";
-
-const useMonitorFetch = ({ page, field, filter, rowsPerPage, updateTrigger }) => {
-	// Redux state
-	const { user } = useSelector((state) => state.auth);
-
-	// Local state
-	const [isLoading, setIsLoading] = useState(true);
-	const [networkError, setNetworkError] = useState(false);
-	const [monitors, setMonitors] = useState(undefined);
-	const [summary, setSummary] = useState(undefined);
-
-	useEffect(() => {
-		const fetchMonitors = async () => {
-			try {
-				const response = await networkService.getMonitorsByTeamId({
-					teamId: user.teamId,
-					limit: 1,
-					field: field,
-					filter: filter,
-					types: ["hardware"],
-					page: page,
-					rowsPerPage: rowsPerPage,
-				});
-				setMonitors(response?.data?.data?.filteredMonitors ?? []);
-				setSummary(response?.data?.data?.summary ?? {});
-			} catch (error) {
-				setNetworkError(true);
-				createToast({
-					body: error.message,
-				});
-			} finally {
-				setIsLoading(false);
-			}
-		};
-
-		fetchMonitors();
-	}, [page, field, filter, rowsPerPage, user.teamId, updateTrigger]);
-
-	return { monitors, summary, isLoading, networkError };
-};
-
-export { useMonitorFetch };

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

@@ -11,15 +11,18 @@ import Filter from "./Components/Filters";
 import SearchComponent from "../../Uptime/Monitors/Components/SearchComponent";
 // Utils
 import { useTheme } from "@emotion/react";
-import { useMonitorFetch } from "./Hooks/useMonitorFetch";
 import { useState } from "react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useTranslation } from "react-i18next";
+import { useFetchMonitorsByTeamId } from "../../../Hooks/monitorHooks";
 // Constants
+const TYPES = ["hardware"];
 const BREADCRUMBS = [{ name: `infrastructure`, path: "/infrastructure" }];
 
 const InfrastructureMonitors = () => {
 	// Redux state
+
+	// Local state
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(5);
 	const [updateTrigger, setUpdateTrigger] = useState(false);
@@ -53,7 +56,9 @@ const InfrastructureMonitors = () => {
 
 	const field = toFilterStatus !== undefined ? "status" : undefined;
 
-	const { monitors, summary, isLoading, networkError } = useMonitorFetch({
+	const [monitors, summary, isLoading, networkError] = useFetchMonitorsByTeamId({
+		limit: 1,
+		types: TYPES,
 		page,
 		field: field,
 		filter: toFilterStatus ?? search,
@@ -119,7 +124,7 @@ const InfrastructureMonitors = () => {
 			</Stack>
 
 			<MonitorsTable
-				shouldRender={!isLoading}
+				isLoading={isLoading}
 				monitors={monitors}
 				isAdmin={isAdmin}
 				handleActionMenuDelete={handleActionMenuDelete}