Hooks integration in Incidents Table

client/src/Hooks/checkHooksMonitor.js

@@ -13,46 +13,46 @@ const useFetchChecksByMonitor = ({
 	page,
 	rowsPerPage,
 }) => {
-    const [checks, setChecks] = useState(undefined);
+	const [checks, setChecks] = useState(undefined);
 	const [checksCount, setChecksCount] = useState(undefined);
 	const [isLoading, setIsLoading] = useState(false);
 	const [networkError, setNetworkError] = useState(false);
 
-    useEffect(() => {
-        const fetchChecks = async () => {
-            if (!type) {
-                return;
-            }
+	useEffect(() => {
+		const fetchChecks = async () => {
+			if (!type) {
+				return;
+			}
 
-            const config = {
-                monitorId,
-                type,
-                status,
-                sortOrder,
-                limit,
-                dateRange,
-                filter,
-                page,
-                rowsPerPage,
-            }
+			const config = {
+				monitorId,
+				type,
+				status,
+				sortOrder,
+				limit,
+				dateRange,
+				filter,
+				page,
+				rowsPerPage,
+			};
 
-            try {
-                setIsLoading(true);
-                const res = await networkService.getChecksByMonitor(config);
-                setChecks(res.data.data.checks);
-                setChecksCount(res.data.data.checksCount);
-            } catch (error) {
-                setNetworkError(true);
-                createToast({ body: error.message });
-            } finally {
-                setIsLoading(false);
-            }
-        };
+			try {
+				setIsLoading(true);
+				const res = await networkService.getChecksByMonitor(config);
+				setChecks(res.data.data.checks);
+				setChecksCount(res.data.data.checksCount);
+			} catch (error) {
+				setNetworkError(true);
+				createToast({ body: error.message });
+			} finally {
+				setIsLoading(false);
+			}
+		};
 
-        fetchChecks();
-    }, [monitorId, type, status, sortOrder, limit, dateRange, filter, page, rowsPerPage]);
+		fetchChecks();
+	}, [monitorId, type, status, sortOrder, limit, dateRange, filter, page, rowsPerPage]);
 
-    return [checks, checksCount, isLoading, networkError];
+	return [checks, checksCount, isLoading, networkError];
 };
 
-export { useFetchChecksByMonitor };
+export { useFetchChecksByMonitor };

client/src/Hooks/checkHooksTeam.js

@@ -48,16 +48,7 @@ const useFetchChecksTeam = ({
 		};
 
 		fetchChecks();
-	}, [
-		teamId,
-		status,
-		sortOrder,
-		limit,
-		dateRange,
-		filter,
-		page,
-		rowsPerPage,
-	]);
+	}, [teamId, status, sortOrder, limit, dateRange, filter, page, rowsPerPage]);
 
 	return [checks, checksCount, isLoading, networkError];
 };

client/src/Pages/Incidents/Components/IncidentTable/index.jsx

@@ -10,9 +10,10 @@ import NetworkError from "../../../../Components/GenericFallback/NetworkError";
 //Utils
 import { formatDateWithTz } from "../../../../Utils/timeUtils";
 import { useSelector } from "react-redux";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
+import { useFetchChecksTeam } from "../../../../Hooks/checkHooksTeam";
 import { useFetchChecksByMonitor } from "../../../../Hooks/checkHooksMonitor";
 
 const IncidentTable = ({
@@ -26,24 +27,40 @@ const IncidentTable = ({
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
 	//Local state
-	const [monitorId, setMonitorId] = useState(undefined);
-
 	const [page, setPage] = useState(0);
 	const [rowsPerPage, setRowsPerPage] = useState(10);
 	const selectedMonitorDetails = monitors?.[selectedMonitor];
 	const selectedMonitorType = selectedMonitorDetails?.type;
 
-	const [checks, checksCount, isLoading, networkError] = useFetchChecksByMonitor({
-		status: false,
-		monitorId,
-		type: selectedMonitorType,
-		sortOrder: "desc",
-		limit: null,
-		dateRange,
-		filter: filter,
-		page: page,
-		rowsPerPage: rowsPerPage,
-	});
+	const [checksMonitor, checksCountMonitor, isLoadingMonitor, networkErrorMonitor] =
+		useFetchChecksByMonitor({
+			monitorId: selectedMonitor === "0" ? undefined : selectedMonitor,
+			type: selectedMonitorType,
+			status: false,
+			sortOrder: "desc",
+			limit: null,
+			dateRange,
+			filter: filter,
+			page: page,
+			rowsPerPage: rowsPerPage,
+		});
+
+	const [checksTeam, checksCountTeam, isLoadingTeam, networkErrorTeam] =
+		useFetchChecksTeam({
+			teamId: "placeholder",
+			status: false,
+			sortOrder: "desc",
+			limit: null,
+			dateRange,
+			filter: filter,
+			page: page,
+			rowsPerPage: rowsPerPage,
+		});
+
+	const checks = selectedMonitor === "0" ? checksTeam : checksMonitor;
+	const checksCount = selectedMonitor === "0" ? checksCountTeam : checksCountMonitor;
+	const isLoading = selectedMonitor === "0" ? isLoadingTeam : isLoadingMonitor;
+	const networkError = selectedMonitor === "0" ? networkErrorTeam : networkErrorMonitor;
 
 	const { t } = useTranslation();
 
@@ -56,14 +73,6 @@ const IncidentTable = ({
 		setRowsPerPage(event.target.value);
 	};
 
-	useEffect(() => {
-		if (selectedMonitor === "0") {
-			setMonitorId(undefined);
-		} else {
-			setMonitorId(selectedMonitor);
-		}
-	}, [selectedMonitor]);
-
 	const headers = [
 		{
 			id: "monitorName",

client/src/Pages/Uptime/Details/index.jsx

@@ -66,16 +66,17 @@ const UptimeDetails = () => {
 
 	const monitorType = monitor?.type;
 
-	const [checks, checksCount, checksAreLoading, checksNetworkError] = useFetchChecksByMonitor({
-		monitorId,
-		type: monitorType,
-		sortOrder: "desc",
-		limit: null,
-		dateRange,
-		filter: null,
-		page,
-		rowsPerPage,
-	});
+	const [checks, checksCount, checksAreLoading, checksNetworkError] =
+		useFetchChecksByMonitor({
+			monitorId,
+			type: monitorType,
+			sortOrder: "desc",
+			limit: null,
+			dateRange,
+			filter: null,
+			page,
+			rowsPerPage,
+		});
 
 	// Handlers
 	const triggerUpdate = () => {