From 5023a4acf16dc193c2f5f9ba4ac7b779c90f9f5c Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:02:18 -0700 Subject: [PATCH 1/9] remove unused var --- src/Hooks/useFetchMonitorsWithChecks.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Hooks/useFetchMonitorsWithChecks.js b/src/Hooks/useFetchMonitorsWithChecks.js index 0a0efa103..f318c4b69 100644 --- a/src/Hooks/useFetchMonitorsWithChecks.js +++ b/src/Hooks/useFetchMonitorsWithChecks.js @@ -13,7 +13,6 @@ export const useFetchMonitorsWithChecks = ({ filter, field, order, - triggerUpdate, }) => { const [isLoading, setIsLoading] = useState(false); const [count, setCount] = useState(undefined); From 3dc65a2ecd7979f3441d58a3438e5776224266d9 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:02:36 -0700 Subject: [PATCH 2/9] moved shared hooks to top level --- src/Hooks/useFetchDepinStatusPage.js | 58 +++++++++++++++ src/Hooks/useSubscribeToDepinDetails.js | 95 ++++++++++++++++++++++++ src/Hooks/useSubscribeToDepinMonitors.js | 94 +++++++++++++++++++++++ 3 files changed, 247 insertions(+) create mode 100644 src/Hooks/useFetchDepinStatusPage.js create mode 100644 src/Hooks/useSubscribeToDepinDetails.js create mode 100644 src/Hooks/useSubscribeToDepinMonitors.js diff --git a/src/Hooks/useFetchDepinStatusPage.js b/src/Hooks/useFetchDepinStatusPage.js new file mode 100644 index 000000000..cb436d6d6 --- /dev/null +++ b/src/Hooks/useFetchDepinStatusPage.js @@ -0,0 +1,58 @@ +import { useState, useEffect } from "react"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; +import { useSelector } from "react-redux"; +import { useTheme } from "@emotion/react"; +import { useMonitorUtils } from "./useMonitorUtils"; + +const useFetchDepinStatusPage = ({ url, timeFrame, isCreate = false }) => { + const [isLoading, setIsLoading] = useState(true); + const [networkError, setNetworkError] = useState(false); + const [statusPage, setStatusPage] = useState(undefined); + const [monitorId, setMonitorId] = useState(undefined); + const [isPublished, setIsPublished] = useState(false); + const { authToken } = useSelector((state) => state.auth); + const theme = useTheme(); + const { getMonitorWithPercentage } = useMonitorUtils(); + + useEffect(() => { + if (isCreate) return; + const fetchStatusPageByUrl = async () => { + try { + const response = await networkService.getDistributedStatusPageByUrl({ + authToken, + url, + type: "distributed", + timeFrame, + }); + if (!response?.data?.data) return; + const statusPage = response.data.data; + + const monitorsWithPercentage = statusPage?.subMonitors.map((monitor) => + getMonitorWithPercentage(monitor, theme) + ); + + const statusPageWithSubmonitorPercentages = { + ...statusPage, + subMonitors: monitorsWithPercentage, + }; + setStatusPage(statusPageWithSubmonitorPercentages); + + setMonitorId(statusPage?.monitors[0]); + setIsPublished(statusPage?.isPublished); + } catch (error) { + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + fetchStatusPageByUrl(); + }, [authToken, url, getMonitorWithPercentage, theme, timeFrame, isCreate]); + + return [isLoading, networkError, statusPage, monitorId, isPublished]; +}; + +export { useFetchDepinStatusPage }; diff --git a/src/Hooks/useSubscribeToDepinDetails.js b/src/Hooks/useSubscribeToDepinDetails.js new file mode 100644 index 000000000..67b7c898f --- /dev/null +++ b/src/Hooks/useSubscribeToDepinDetails.js @@ -0,0 +1,95 @@ +import { useState, useEffect } from "react"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; + +const useSubscribeToDepinDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { + const [isLoading, setIsLoading] = useState(true); + const [connectionStatus, setConnectionStatus] = useState(undefined); + const [retryCount, setRetryCount] = useState(0); + const [networkError, setNetworkError] = useState(false); + const [monitor, setMonitor] = useState(undefined); + const [lastUpdateTrigger, setLastUpdateTrigger] = useState(0); + + useEffect(() => { + if (typeof monitorId === "undefined") { + return; + } + // If this page is public and not published, don't subscribe to details + if (isPublic && isPublished === false) { + return; + } + + // Get initial data + + const fetchInitialData = async () => { + try { + const res = await networkService.getDistributedUptimeDetails({ + monitorId, + dateRange: dateRange, + normalize: true, + }); + const responseData = res?.data?.data; + + if (typeof responseData === "undefined") { + throw new Error("No data"); + } + setConnectionStatus("up"); + setLastUpdateTrigger(Date.now()); + setMonitor(responseData); + } catch (error) { + setNetworkError(true); + setConnectionStatus("down"); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + + fetchInitialData(); + + try { + const cleanup = networkService.subscribeToDistributedUptimeDetails({ + monitorId, + dateRange: dateRange, + normalize: true, + onUpdate: (data) => { + if (isLoading === true) { + setIsLoading(false); + } + if (networkError === true) { + setNetworkError(false); + } + setLastUpdateTrigger(Date.now()); + setMonitor(data.monitor); + }, + onOpen: () => { + setConnectionStatus("up"); + setRetryCount(0); // Reset retry count on successful connection + }, + onError: () => { + setIsLoading(false); + setNetworkError(true); + setConnectionStatus("down"); + }, + }); + return cleanup; + } catch (error) { + setNetworkError(true); + } + }, [ + dateRange, + monitorId, + retryCount, + setConnectionStatus, + networkError, + isLoading, + isPublic, + isPublished, + ]); + + return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger]; +}; + +export { useSubscribeToDepinDetails }; diff --git a/src/Hooks/useSubscribeToDepinMonitors.js b/src/Hooks/useSubscribeToDepinMonitors.js new file mode 100644 index 000000000..3bc098afa --- /dev/null +++ b/src/Hooks/useSubscribeToDepinMonitors.js @@ -0,0 +1,94 @@ +import { useEffect, useState } from "react"; +import { networkService } from "../main"; +import { useSelector } from "react-redux"; +import { useTheme } from "@emotion/react"; +import { useMonitorUtils } from "./useMonitorUtils"; +import { createToast } from "../Utils/toastUtils"; + +const useSubscribeToDepinMonitors = (page, rowsPerPage) => { + // Redux + const { user } = useSelector((state) => state.auth); + + // Local state + const [isLoading, setIsLoading] = useState(true); + const [networkError, setNetworkError] = useState(false); + const [count, setCount] = useState(undefined); + const [monitors, setMonitors] = useState(undefined); + + const theme = useTheme(); + const { getMonitorWithPercentage } = useMonitorUtils(); + + useEffect(() => { + const fetchInitialData = async () => { + try { + const initialDataRes = await networkService.getDistributedUptimeMonitors({ + teamId: user.teamId, + limit: 25, + types: ["distributed_http"], + page, + rowsPerPage, + }); + + const { count, monitors } = initialDataRes?.data?.data ?? {}; + const responseData = initialDataRes?.data?.data; + if (typeof responseData === "undefined") throw new Error("No data"); + + const mappedMonitors = monitors?.map((monitor) => + getMonitorWithPercentage(monitor, theme) + ); + + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); + } catch (error) { + setNetworkError(true); + createToast({ + body: error.message, + }); + } finally { + setIsLoading(false); + } + }; + + fetchInitialData(); + + try { + const cleanup = networkService.subscribeToDistributedUptimeMonitors({ + teamId: user.teamId, + limit: 25, + types: [ + typeof import.meta.env.VITE_DEPIN_TESTING === "undefined" + ? "distributed_http" + : "distributed_test", + ], + page, + rowsPerPage, + filter: null, + field: null, + order: null, + onUpdate: (data) => { + if (isLoading === true) { + setIsLoading(false); + } + const { count, monitors } = data; + const mappedMonitors = monitors.map((monitor) => + getMonitorWithPercentage(monitor, theme) + ); + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); + }, + onError: () => { + setIsLoading(false); + }, + }); + + return cleanup; + } catch (error) { + createToast({ + body: error.message, + }); + setNetworkError(true); + } + }, [user, getMonitorWithPercentage, theme, isLoading, page, rowsPerPage]); + return [monitors, count, isLoading, networkError]; +}; +export { useSubscribeToDepinMonitors }; From 1c6ed5030c88739fd9efe8d531075abb606c1586 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:03:25 -0700 Subject: [PATCH 3/9] removed old hook --- .../Details/Hooks/useSubscribeToDetails.jsx | 95 ------------------- 1 file changed, 95 deletions(-) delete mode 100644 src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx deleted file mode 100644 index e8a49e886..000000000 --- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ /dev/null @@ -1,95 +0,0 @@ -import { useState, useEffect } from "react"; -import { networkService } from "../../../../main"; -import { createToast } from "../../../../Utils/toastUtils"; - -const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { - const [isLoading, setIsLoading] = useState(true); - const [connectionStatus, setConnectionStatus] = useState(undefined); - const [retryCount, setRetryCount] = useState(0); - const [networkError, setNetworkError] = useState(false); - const [monitor, setMonitor] = useState(undefined); - const [lastUpdateTrigger, setLastUpdateTrigger] = useState(0); - - useEffect(() => { - if (typeof monitorId === "undefined") { - return; - } - // If this page is public and not published, don't subscribe to details - if (isPublic && isPublished === false) { - return; - } - - // Get initial data - - const fetchInitialData = async () => { - try { - const res = await networkService.getDistributedUptimeDetails({ - monitorId, - dateRange: dateRange, - normalize: true, - }); - const responseData = res?.data?.data; - - if (typeof responseData === "undefined") { - throw new Error("No data"); - } - setConnectionStatus("up"); - setLastUpdateTrigger(Date.now()); - setMonitor(responseData); - } catch (error) { - setNetworkError(true); - setConnectionStatus("down"); - createToast({ - body: error.message, - }); - } finally { - setIsLoading(false); - } - }; - - fetchInitialData(); - - try { - const cleanup = networkService.subscribeToDistributedUptimeDetails({ - monitorId, - dateRange: dateRange, - normalize: true, - onUpdate: (data) => { - if (isLoading === true) { - setIsLoading(false); - } - if (networkError === true) { - setNetworkError(false); - } - setLastUpdateTrigger(Date.now()); - setMonitor(data.monitor); - }, - onOpen: () => { - setConnectionStatus("up"); - setRetryCount(0); // Reset retry count on successful connection - }, - onError: () => { - setIsLoading(false); - setNetworkError(true); - setConnectionStatus("down"); - }, - }); - return cleanup; - } catch (error) { - setNetworkError(true); - } - }, [ - dateRange, - monitorId, - retryCount, - setConnectionStatus, - networkError, - isLoading, - isPublic, - isPublished, - ]); - - return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger]; -}; - -export { useSubscribeToDetails }; From 36acd60de14214d9b8781c4cb9d5694c57e39b52 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:03:49 -0700 Subject: [PATCH 4/9] removed old hook --- .../Monitors/Hooks/useSubscribeToMonitors.jsx | 99 ------------------- 1 file changed, 99 deletions(-) delete mode 100644 src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx deleted file mode 100644 index 3b6c262ba..000000000 --- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx +++ /dev/null @@ -1,99 +0,0 @@ -import { useEffect, useState } from "react"; -import { networkService } from "../../../../main"; -import { useSelector } from "react-redux"; -import { useTheme } from "@emotion/react"; -import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils"; -import { createToast } from "../../../../Utils/toastUtils"; - -const useSubscribeToMonitors = (page, rowsPerPage) => { - // Redux - const { user } = useSelector((state) => state.auth); - - // Local state - const [isLoading, setIsLoading] = useState(true); - const [networkError, setNetworkError] = useState(false); - const [monitors, setMonitors] = useState(undefined); - const [monitorsSummary, setMonitorsSummary] = useState(undefined); - const [filteredMonitors, setFilteredMonitors] = useState(undefined); - - const theme = useTheme(); - const { getMonitorWithPercentage } = useMonitorUtils(); - - useEffect(() => { - const fetchInitialData = async () => { - try { - const initialDataRes = await networkService.getDistributedUptimeMonitors({ - teamId: user.teamId, - limit: 25, - types: ["distributed_http"], - page, - rowsPerPage, - }); - const responseData = initialDataRes?.data?.data; - if (typeof responseData === "undefined") throw new Error("No data"); - - const { monitors, filteredMonitors, summary } = responseData; - - const mappedMonitors = filteredMonitors?.map((monitor) => - getMonitorWithPercentage(monitor, theme) - ); - - setMonitors(monitors); - setMonitorsSummary(summary); - setFilteredMonitors(mappedMonitors); - } catch (error) { - setNetworkError(true); - createToast({ - body: error.message, - }); - } finally { - setIsLoading(false); - } - }; - - fetchInitialData(); - - try { - const cleanup = networkService.subscribeToDistributedUptimeMonitors({ - teamId: user.teamId, - limit: 25, - types: [ - typeof import.meta.env.VITE_DEPIN_TESTING === "undefined" - ? "distributed_http" - : "distributed_test", - ], - page, - rowsPerPage, - filter: null, - field: null, - order: null, - onUpdate: (data) => { - if (isLoading === true) { - setIsLoading(false); - } - - const res = data.monitors; - const { monitors, filteredMonitors, summary } = res; - const mappedMonitors = filteredMonitors.map((monitor) => - getMonitorWithPercentage(monitor, theme) - ); - setMonitors(monitors); - setMonitorsSummary(summary); - setFilteredMonitors(mappedMonitors); - }, - onError: () => { - setIsLoading(false); - }, - }); - - return cleanup; - } catch (error) { - createToast({ - body: error.message, - }); - setNetworkError(true); - } - }, [user, getMonitorWithPercentage, theme, isLoading, page, rowsPerPage]); - return [isLoading, networkError, monitors, monitorsSummary, filteredMonitors]; -}; -export { useSubscribeToMonitors }; From 7853942efff81b6269fd267d2b789b2b15d0d33f Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:04:08 -0700 Subject: [PATCH 5/9] removed old hook --- .../Hooks/useDUStatusPageFetchByUrl.jsx | 58 ------------------- 1 file changed, 58 deletions(-) delete mode 100644 src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx diff --git a/src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx b/src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx deleted file mode 100644 index b1b0542a4..000000000 --- a/src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useState, useEffect } from "react"; -import { networkService } from "../../../../main"; -import { createToast } from "../../../../Utils/toastUtils"; -import { useSelector } from "react-redux"; -import { useTheme } from "@emotion/react"; -import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils"; - -const useDUStatusPageFetchByUrl = ({ url, timeFrame, isCreate = false }) => { - const [isLoading, setIsLoading] = useState(true); - const [networkError, setNetworkError] = useState(false); - const [statusPage, setStatusPage] = useState(undefined); - const [monitorId, setMonitorId] = useState(undefined); - const [isPublished, setIsPublished] = useState(false); - const { authToken } = useSelector((state) => state.auth); - const theme = useTheme(); - const { getMonitorWithPercentage } = useMonitorUtils(); - - useEffect(() => { - if (isCreate) return; - const fetchStatusPageByUrl = async () => { - try { - const response = await networkService.getDistributedStatusPageByUrl({ - authToken, - url, - type: "distributed", - timeFrame, - }); - if (!response?.data?.data) return; - const statusPage = response.data.data; - - const monitorsWithPercentage = statusPage?.subMonitors.map((monitor) => - getMonitorWithPercentage(monitor, theme) - ); - - const statusPageWithSubmonitorPercentages = { - ...statusPage, - subMonitors: monitorsWithPercentage, - }; - setStatusPage(statusPageWithSubmonitorPercentages); - - setMonitorId(statusPage?.monitors[0]); - setIsPublished(statusPage?.isPublished); - } catch (error) { - setNetworkError(true); - createToast({ - body: error.message, - }); - } finally { - setIsLoading(false); - } - }; - fetchStatusPageByUrl(); - }, [authToken, url, getMonitorWithPercentage, theme, timeFrame]); - - return [isLoading, networkError, statusPage, monitorId, isPublished]; -}; - -export { useDUStatusPageFetchByUrl }; From 4e4af8d7206bed2eafa3db8a95ae7c1902b00714 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:04:31 -0700 Subject: [PATCH 6/9] remove unused import --- src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx b/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx index 8d73e55a9..a26de2a5e 100644 --- a/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx +++ b/src/Pages/DistributedUptime/Details/Hooks/useDeleteMonitor.jsx @@ -1,4 +1,3 @@ -import { useSelector } from "react-redux"; import { useState } from "react"; import { networkService } from "../../../../main"; import { createToast } from "../../../../Utils/toastUtils"; From 261975bff244b7f574a93e05919ef51c7beecf8e Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:04:47 -0700 Subject: [PATCH 7/9] use new hook --- src/Pages/DistributedUptime/Details/index.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Pages/DistributedUptime/Details/index.jsx b/src/Pages/DistributedUptime/Details/index.jsx index d2011709e..27b39b600 100644 --- a/src/Pages/DistributedUptime/Details/index.jsx +++ b/src/Pages/DistributedUptime/Details/index.jsx @@ -19,7 +19,7 @@ import { useTheme } from "@mui/material/styles"; import { useState } from "react"; import { useParams } from "react-router-dom"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; -import { useSubscribeToDetails } from "./Hooks/useSubscribeToDetails"; +import { useSubscribeToDepinDetails } from "../../../Hooks/useSubscribeToDepinDetails"; import { useDeleteMonitor } from "./Hooks/useDeleteMonitor"; import { useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; @@ -36,7 +36,7 @@ const DistributedUptimeDetails = () => { const { t } = useTranslation(); const navigate = useNavigate(); const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] = - useSubscribeToDetails({ monitorId, dateRange }); + useSubscribeToDepinDetails({ monitorId, dateRange }); const [deleteMonitor, isDeleting] = useDeleteMonitor({ monitorId }); // Constants From 7ba123219865bd410c751354c7924b16e39cf3eb Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Fri, 14 Mar 2025 12:05:03 -0700 Subject: [PATCH 8/9] use new hook --- src/Pages/DistributedUptime/Monitors/index.jsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/Pages/DistributedUptime/Monitors/index.jsx b/src/Pages/DistributedUptime/Monitors/index.jsx index 097f0128c..d2cea7432 100644 --- a/src/Pages/DistributedUptime/Monitors/index.jsx +++ b/src/Pages/DistributedUptime/Monitors/index.jsx @@ -11,7 +11,7 @@ import GenericFallback from "../../../Components/GenericFallback"; import { useState } from "react"; import { useTheme } from "@mui/material/styles"; import { useIsAdmin } from "../../../Hooks/useIsAdmin"; -import { useSubscribeToMonitors } from "./Hooks/useSubscribeToMonitors"; +import { useSubscribeToDepinMonitors } from "../../../Hooks/useSubscribeToDepinMonitors"; import SkeletonLayout from "./Components/Skeleton"; import { useTranslation } from "react-i18next"; // Constants @@ -26,8 +26,10 @@ const DistributedUptimeMonitors = () => { const theme = useTheme(); const isAdmin = useIsAdmin(); const { t } = useTranslation(); - const [isLoading, networkError, monitors, monitorsSummary, filteredMonitors] = - useSubscribeToMonitors(page, rowsPerPage); + const [monitors, count, isLoading, networkError] = useSubscribeToDepinMonitors( + page, + rowsPerPage + ); // Handlers const handleChangePage = (event, newPage) => { setPage(newPage); @@ -57,7 +59,7 @@ const DistributedUptimeMonitors = () => { ); } - if (typeof monitorsSummary === "undefined" || monitorsSummary.totalMonitors === 0) { + if (count === 0) { return ( { /> Date: Fri, 14 Mar 2025 12:05:26 -0700 Subject: [PATCH 9/9] use new hooks --- .../DistributedUptimeStatus/Create/index.jsx | 25 +++++++++++++------ .../DistributedUptimeStatus/Status/index.jsx | 14 +++++++---- 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/src/Pages/DistributedUptimeStatus/Create/index.jsx b/src/Pages/DistributedUptimeStatus/Create/index.jsx index b1e54df6e..308f9489b 100644 --- a/src/Pages/DistributedUptimeStatus/Create/index.jsx +++ b/src/Pages/DistributedUptimeStatus/Create/index.jsx @@ -19,9 +19,8 @@ import { buildErrors } from "../../../Validation/error"; import { createToast } from "../../../Utils/toastUtils"; import { useNavigate } from "react-router-dom"; import { useMonitorsFetch } from "../../StatusPage/Create/Hooks/useMonitorsFetch"; -import { useDUStatusPageFetchByUrl } from "../Status/Hooks/useDUStatusPageFetchByUrl"; import { useTranslation } from "react-i18next"; - +import { useFetchDepinStatusPage } from "../../../Hooks/useFetchDepinStatusPage"; const CreateStatus = () => { const theme = useTheme(); const { monitorId, url } = useParams(); @@ -32,7 +31,7 @@ const CreateStatus = () => { const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate); const [statusPageIsLoading, statusPageNetworkError, statusPage, _, isPublished] = - useDUStatusPageFetchByUrl({ + useFetchDepinStatusPage({ url, timeFrame: 30, isCreate, @@ -178,7 +177,9 @@ const CreateStatus = () => { component="span" fontSize="inherit" > - {isCreate ? t("distributedUptimeStatusCreateYour") : t("distributedUptimeStatusEditYour")}{" "} + {isCreate + ? t("distributedUptimeStatusCreateYour") + : t("distributedUptimeStatusEditYour")}{" "} { - {t("distributedUptimeStatusCreateStatusPageAccess")} + + {t("distributedUptimeStatusCreateStatusPageAccess")} + {t("distributedUptimeStatusCreateStatusPageReady")} @@ -208,7 +211,9 @@ const CreateStatus = () => { - {t("distributedUptimeStatusBasicInfoHeader")} + + {t("distributedUptimeStatusBasicInfoHeader")} + {t("distributedUptimeStatusBasicInfoDescription")} @@ -241,7 +246,9 @@ const CreateStatus = () => { {t("distributedUptimeStatusLogoHeader")} - {t("distributedUptimeStatusLogoDescription")} + + {t("distributedUptimeStatusLogoDescription")}{" "} + { - {t("distributedUptimeStatusStandardMonitorsHeader")} + + {t("distributedUptimeStatusStandardMonitorsHeader")} + {t("distributedUptimeStatusStandardMonitorsDescription")} diff --git a/src/Pages/DistributedUptimeStatus/Status/index.jsx b/src/Pages/DistributedUptimeStatus/Status/index.jsx index 44ca68ade..117a297e5 100644 --- a/src/Pages/DistributedUptimeStatus/Status/index.jsx +++ b/src/Pages/DistributedUptimeStatus/Status/index.jsx @@ -23,8 +23,8 @@ import { RowContainer } from "../../../Components/StandardContainer"; import { useTheme } from "@mui/material/styles"; import { useState, useEffect, useRef } from "react"; import { useParams } from "react-router-dom"; -import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails"; -import { useDUStatusPageFetchByUrl } from "./Hooks/useDUStatusPageFetchByUrl"; +import { useFetchDepinStatusPage } from "../../../Hooks/useFetchDepinStatusPage"; +import { useSubscribeToDepinDetails } from "../../../Hooks/useSubscribeToDepinDetails"; import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete"; import TimeFrameHeader from "./Components/TimeframeHeader"; import SubHeader from "../../../Components/Subheader"; @@ -64,13 +64,13 @@ const DistributedUptimeStatus = () => { statusPage, monitorId, isPublished, - ] = useDUStatusPageFetchByUrl({ + ] = useFetchDepinStatusPage({ url, timeFrame, }); const [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger] = - useSubscribeToDetails({ monitorId, dateRange, isPublic, isPublished }); + useSubscribeToDepinDetails({ monitorId, dateRange, isPublic, isPublished }); const [deleteStatusPage, isDeleting] = useStatusPageDelete(() => { navigate("/distributed-uptime"); @@ -253,7 +253,11 @@ const DistributedUptimeStatus = () => { sx={{ width: "50%" }} />