diff --git a/src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx b/src/Hooks/useFetchDepinStatusPage.js similarity index 80% rename from src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx rename to src/Hooks/useFetchDepinStatusPage.js index b1b0542a4..cb436d6d6 100644 --- a/src/Pages/DistributedUptimeStatus/Status/Hooks/useDUStatusPageFetchByUrl.jsx +++ b/src/Hooks/useFetchDepinStatusPage.js @@ -1,11 +1,11 @@ import { useState, useEffect } from "react"; -import { networkService } from "../../../../main"; -import { createToast } from "../../../../Utils/toastUtils"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; import { useSelector } from "react-redux"; import { useTheme } from "@emotion/react"; -import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils"; +import { useMonitorUtils } from "./useMonitorUtils"; -const useDUStatusPageFetchByUrl = ({ url, timeFrame, isCreate = false }) => { +const useFetchDepinStatusPage = ({ url, timeFrame, isCreate = false }) => { const [isLoading, setIsLoading] = useState(true); const [networkError, setNetworkError] = useState(false); const [statusPage, setStatusPage] = useState(undefined); @@ -50,9 +50,9 @@ const useDUStatusPageFetchByUrl = ({ url, timeFrame, isCreate = false }) => { } }; fetchStatusPageByUrl(); - }, [authToken, url, getMonitorWithPercentage, theme, timeFrame]); + }, [authToken, url, getMonitorWithPercentage, theme, timeFrame, isCreate]); return [isLoading, networkError, statusPage, monitorId, isPublished]; }; -export { useDUStatusPageFetchByUrl }; +export { useFetchDepinStatusPage }; 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); diff --git a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx b/src/Hooks/useSubscribeToDepinDetails.js similarity index 90% rename from src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx rename to src/Hooks/useSubscribeToDepinDetails.js index e8a49e886..67b7c898f 100644 --- a/src/Pages/DistributedUptime/Details/Hooks/useSubscribeToDetails.jsx +++ b/src/Hooks/useSubscribeToDepinDetails.js @@ -1,8 +1,8 @@ import { useState, useEffect } from "react"; -import { networkService } from "../../../../main"; -import { createToast } from "../../../../Utils/toastUtils"; +import { networkService } from "../main"; +import { createToast } from "../Utils/toastUtils"; -const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { +const useSubscribeToDepinDetails = ({ monitorId, isPublic, isPublished, dateRange }) => { const [isLoading, setIsLoading] = useState(true); const [connectionStatus, setConnectionStatus] = useState(undefined); const [retryCount, setRetryCount] = useState(0); @@ -92,4 +92,4 @@ const useSubscribeToDetails = ({ monitorId, isPublic, isPublished, dateRange }) return [isLoading, networkError, connectionStatus, monitor, lastUpdateTrigger]; }; -export { useSubscribeToDetails }; +export { useSubscribeToDepinDetails }; diff --git a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx b/src/Hooks/useSubscribeToDepinMonitors.js similarity index 65% rename from src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx rename to src/Hooks/useSubscribeToDepinMonitors.js index 3b6c262ba..3bc098afa 100644 --- a/src/Pages/DistributedUptime/Monitors/Hooks/useSubscribeToMonitors.jsx +++ b/src/Hooks/useSubscribeToDepinMonitors.js @@ -1,20 +1,19 @@ import { useEffect, useState } from "react"; -import { networkService } from "../../../../main"; +import { networkService } from "../main"; import { useSelector } from "react-redux"; import { useTheme } from "@emotion/react"; -import { useMonitorUtils } from "../../../../Hooks/useMonitorUtils"; -import { createToast } from "../../../../Utils/toastUtils"; +import { useMonitorUtils } from "./useMonitorUtils"; +import { createToast } from "../Utils/toastUtils"; -const useSubscribeToMonitors = (page, rowsPerPage) => { +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 [monitorsSummary, setMonitorsSummary] = useState(undefined); - const [filteredMonitors, setFilteredMonitors] = useState(undefined); const theme = useTheme(); const { getMonitorWithPercentage } = useMonitorUtils(); @@ -29,18 +28,17 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { page, rowsPerPage, }); + + const { count, monitors } = initialDataRes?.data?.data ?? {}; const responseData = initialDataRes?.data?.data; if (typeof responseData === "undefined") throw new Error("No data"); - const { monitors, filteredMonitors, summary } = responseData; - - const mappedMonitors = filteredMonitors?.map((monitor) => + const mappedMonitors = monitors?.map((monitor) => getMonitorWithPercentage(monitor, theme) ); - setMonitors(monitors); - setMonitorsSummary(summary); - setFilteredMonitors(mappedMonitors); + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); } catch (error) { setNetworkError(true); createToast({ @@ -71,15 +69,12 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { if (isLoading === true) { setIsLoading(false); } - - const res = data.monitors; - const { monitors, filteredMonitors, summary } = res; - const mappedMonitors = filteredMonitors.map((monitor) => + const { count, monitors } = data; + const mappedMonitors = monitors.map((monitor) => getMonitorWithPercentage(monitor, theme) ); - setMonitors(monitors); - setMonitorsSummary(summary); - setFilteredMonitors(mappedMonitors); + setMonitors(mappedMonitors); + setCount(count?.monitorsCount ?? 0); }, onError: () => { setIsLoading(false); @@ -94,6 +89,6 @@ const useSubscribeToMonitors = (page, rowsPerPage) => { setNetworkError(true); } }, [user, getMonitorWithPercentage, theme, isLoading, page, rowsPerPage]); - return [isLoading, networkError, monitors, monitorsSummary, filteredMonitors]; + return [monitors, count, isLoading, networkError]; }; -export { useSubscribeToMonitors }; +export { useSubscribeToDepinMonitors }; 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"; 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 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 ( { /> { 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%" }} />