diff --git a/client/src/Hooks/checkHooks.js b/client/src/Hooks/checkHooks.js index dac2be671..683b89b20 100644 --- a/client/src/Hooks/checkHooks.js +++ b/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 }; diff --git a/client/src/Pages/Incidents/Components/IncidentTable/index.jsx b/client/src/Pages/Incidents/Components/IncidentTable/index.jsx index cf6fbb49d..3b2e07238 100644 --- a/client/src/Pages/Incidents/Components/IncidentTable/index.jsx +++ b/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", diff --git a/client/src/Pages/Uptime/Details/index.jsx b/client/src/Pages/Uptime/Details/index.jsx index 79762e0c3..5f36ee7e5 100644 --- a/client/src/Pages/Uptime/Details/index.jsx +++ b/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 = () => {