Merge pull request #1928 from bluewave-labs/fix/refactor-depin

fix: refactor depin

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 };

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);

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 };

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 };

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";

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

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 (
 			<Fallback
 				vowelStart={false}
@@ -83,10 +85,10 @@ const DistributedUptimeMonitors = () => {
 			/>
 			<MonitorTable
 				isLoading={isLoading}
-				monitors={filteredMonitors}
+				monitors={monitors}
 			/>
 			<Pagination
-				itemCount={monitorsSummary?.totalMonitors ?? 0}
+				itemCount={count}
 				paginationLabel="monitors"
 				page={page}
 				rowsPerPage={rowsPerPage}

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")}{" "}
 				</Typography>
 				<Typography
 					component="span"
@@ -191,7 +192,9 @@ const CreateStatus = () => {
 			</Typography>
 			<ConfigBox>
 				<Stack>
-					<Typography component="h2">{t("distributedUptimeStatusCreateStatusPageAccess")}</Typography>
+					<Typography component="h2">
+						{t("distributedUptimeStatusCreateStatusPageAccess")}
+					</Typography>
 					<Typography component="p">
 						{t("distributedUptimeStatusCreateStatusPageReady")}
 					</Typography>
@@ -208,7 +211,9 @@ const CreateStatus = () => {
 			</ConfigBox>
 			<ConfigBox>
 				<Stack gap={theme.spacing(6)}>
-					<Typography component="h2">{t("distributedUptimeStatusBasicInfoHeader")}</Typography>
+					<Typography component="h2">
+						{t("distributedUptimeStatusBasicInfoHeader")}
+					</Typography>
 					<Typography component="p">
 						{t("distributedUptimeStatusBasicInfoDescription")}
 					</Typography>
@@ -241,7 +246,9 @@ const CreateStatus = () => {
 			<ConfigBox>
 				<Stack gap={theme.spacing(6)}>
 					<Typography component="h2">{t("distributedUptimeStatusLogoHeader")}</Typography>
-					<Typography component="p">{t("distributedUptimeStatusLogoDescription")} </Typography>
+					<Typography component="p">
+						{t("distributedUptimeStatusLogoDescription")}{" "}
+					</Typography>
 				</Stack>
 				<Stack
 					gap={theme.spacing(18)}
@@ -272,7 +279,9 @@ const CreateStatus = () => {
 			</ConfigBox>
 			<ConfigBox>
 				<Stack>
-					<Typography component="h2">{t("distributedUptimeStatusStandardMonitorsHeader")}</Typography>
+					<Typography component="h2">
+						{t("distributedUptimeStatusStandardMonitorsHeader")}
+					</Typography>
 					<Typography component="p">
 						{t("distributedUptimeStatusStandardMonitorsDescription")}
 					</Typography>

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%" }}
 						/>
 						<InfoBox
-							heading={isSmallScreen ? t("distributedUptimeStatusUpt") : t("distributedUptimeStatusUptBurned")}
+							heading={
+								isSmallScreen
+									? t("distributedUptimeStatusUpt")
+									: t("distributedUptimeStatusUptBurned")
+							}
 							subHeading={safelyParseFloat(monitor?.uptBurnt).toFixed(4)}
 							img={UptLogo}
 							alt={t("distributedUptimeStatusUptLogo")}