Merge pull request #2469 from bluewave-labs/refactor/useFetchChecks

Refactor: useFetchChecks

client/src/Hooks/checkHooks.js

@@ -2,8 +2,57 @@ import { useState, useEffect } from "react";
 import { networkService } from "../main";
 import { createToast } from "../Utils/toastUtils";
 
-const useFetchChecks = ({
-	teamId,
+const useFetchChecksTeam = ({
+	status,
+	sortOrder,
+	limit,
+	dateRange,
+	filter,
+	page,
+	rowsPerPage,
+	enabled = true,
+}) => {
+	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 (!enabled) {
+				return;
+			}
+
+			const config = {
+				status,
+				sortOrder,
+				limit,
+				dateRange,
+				filter,
+				page,
+				rowsPerPage,
+			};
+
+			try {
+				setIsLoading(true);
+				const res = await networkService.getChecksByTeam(config);
+				setChecks(res.data.data.checks);
+				setChecksCount(res.data.data.checksCount);
+			} catch (error) {
+				setNetworkError(true);
+				createToast({ body: error.message });
+			} finally {
+				setIsLoading(false);
+			}
+		};
+
+		fetchChecks();
+	}, [status, sortOrder, limit, dateRange, filter, page, rowsPerPage, enabled]);
+
+	return [checks, checksCount, isLoading, networkError];
+};
+
+const useFetchChecksByMonitor = ({
 	monitorId,
 	type,
 	status,
@@ -13,6 +62,7 @@ const useFetchChecks = ({
 	filter,
 	page,
 	rowsPerPage,
+	enabled = true,
 }) => {
 	const [checks, setChecks] = useState(undefined);
 	const [checksCount, setChecksCount] = useState(undefined);
@@ -21,40 +71,25 @@ const useFetchChecks = ({
 
 	useEffect(() => {
 		const fetchChecks = async () => {
-			if (!type && !teamId) {
+			if (!enabled || !type) {
 				return;
 			}
 
-			const method = monitorId
-				? networkService.getChecksByMonitor
-				: networkService.getChecksByTeam;
-
-			const config = monitorId
-				? {
-						monitorId,
-						type,
-						status,
-						sortOrder,
-						limit,
-						dateRange,
-						filter,
-						page,
-						rowsPerPage,
-					}
-				: {
-						status,
-						teamId,
-						sortOrder,
-						limit,
-						dateRange,
-						filter,
-						page,
-						rowsPerPage,
-					};
+			const config = {
+				monitorId,
+				type,
+				status,
+				sortOrder,
+				limit,
+				dateRange,
+				filter,
+				page,
+				rowsPerPage,
+			};
 
 			try {
 				setIsLoading(true);
-				const res = await method(config);
+				const res = await networkService.getChecksByMonitor(config);
 				setChecks(res.data.data.checks);
 				setChecksCount(res.data.data.checksCount);
 			} catch (error) {
@@ -68,7 +103,6 @@ const useFetchChecks = ({
 		fetchChecks();
 	}, [
 		monitorId,
-		teamId,
 		type,
 		status,
 		sortOrder,
@@ -77,9 +111,10 @@ const useFetchChecks = ({
 		filter,
 		page,
 		rowsPerPage,
+		enabled,
 	]);
 
 	return [checks, checksCount, isLoading, networkError];
 };
 
-export { useFetchChecks };
+export { useFetchChecksByMonitor, useFetchChecksTeam };

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

@@ -10,10 +10,11 @@ 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 { useFetchChecks } from "../../../../Hooks/checkHooks";
+import { useFetchChecksTeam } from "../../../../Hooks/checkHooks";
+import { useFetchChecksByMonitor } from "../../../../Hooks/checkHooks";
 
 const IncidentTable = ({
 	shouldRender,
@@ -26,26 +27,41 @@ const IncidentTable = ({
 	const uiTimezone = useSelector((state) => state.ui.timezone);
 
 	//Local state
-	const [teamId, setTeamId] = useState(undefined);
-	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] = useFetchChecks({
-		status: false,
-		monitorId,
-		teamId,
-		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,
+			enabled: selectedMonitor !== "0",
+		});
+
+	const [checksTeam, checksCountTeam, isLoadingTeam, networkErrorTeam] =
+		useFetchChecksTeam({
+			status: false,
+			sortOrder: "desc",
+			limit: null,
+			dateRange,
+			filter: filter,
+			page: page,
+			rowsPerPage: rowsPerPage,
+			enabled: selectedMonitor === "0",
+		});
+
+	const checks = selectedMonitor === "0" ? checksTeam : checksMonitor;
+	const checksCount = selectedMonitor === "0" ? checksCountTeam : checksCountMonitor;
+	const isLoading = isLoadingTeam || isLoadingMonitor;
+	const networkError = selectedMonitor === "0" ? networkErrorTeam : networkErrorMonitor;
 
 	const { t } = useTranslation();
 
@@ -58,16 +74,6 @@ const IncidentTable = ({
 		setRowsPerPage(event.target.value);
 	};
 
-	useEffect(() => {
-		if (selectedMonitor === "0") {
-			setTeamId("placeholder"); // TODO this isn't needed any longer, fix hook
-			setMonitorId(undefined);
-		} else {
-			setMonitorId(selectedMonitor);
-			setTeamId(undefined);
-		}
-	}, [selectedMonitor]);
-
 	const headers = [
 		{
 			id: "monitorName",

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

@@ -18,7 +18,7 @@ import { useTheme } from "@emotion/react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useFetchUptimeMonitorById } from "../../../Hooks/monitorHooks";
 import useCertificateFetch from "./Hooks/useCertificateFetch";
-import { useFetchChecks } from "../../../Hooks/checkHooks";
+import { useFetchChecksByMonitor } from "../../../Hooks/checkHooks";
 import { useTranslation } from "react-i18next";
 
 // Constants
@@ -66,16 +66,17 @@ const UptimeDetails = () => {
 
 	const monitorType = monitor?.type;
 
-	const [checks, checksCount, checksAreLoading, checksNetworkError] = useFetchChecks({
-		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 = () => {