use correct hook

src/Pages/DistributedUptimeStatus/Create/Hooks/useDUStatusPageFetch.jsx

@@ -1,46 +0,0 @@
-import { useEffect, useState, useCallback } from "react";
-import { networkService } from "../../../../main";
-import { useSelector } from "react-redux";
-import { createToast } from "../../../../Utils/toastUtils";
-
-const useDUStatusPageFetch = (isCreate = false, url) => {
-	const [isLoading, setIsLoading] = useState(true);
-	const [networkError, setNetworkError] = useState(false);
-	const [statusPage, setStatusPage] = useState(undefined);
-	const { authToken } = useSelector((state) => state.auth);
-	const fetchStatusPage = useCallback(async () => {
-		try {
-			const response = await networkService.getStatusPageByUrl({
-				authToken,
-				url,
-				type: "distributed",
-			});
-
-			if (!response?.data?.data) return;
-
-			const statusPage = response.data.data;
-			setStatusPage(statusPage);
-		} catch (error) {
-			// If there is a 404, status page is not found
-			if (error?.response?.status === 404) {
-				setStatusPage(undefined);
-				return;
-			}
-			createToast({ body: error.message });
-			setNetworkError(true);
-		} finally {
-			setIsLoading(false);
-		}
-	}, [authToken, url]);
-
-	useEffect(() => {
-		if (isCreate === true) {
-			return;
-		}
-		fetchStatusPage();
-	}, [isCreate, fetchStatusPage]);
-
-	return [statusPage, isLoading, networkError, fetchStatusPage];
-};
-
-export { useDUStatusPageFetch };

src/Pages/DistributedUptimeStatus/Create/index.jsx

@@ -13,13 +13,13 @@ import MonitorList from "../../StatusPage/Create/Components/MonitorList";
 import { useTheme } from "@emotion/react";
 import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import { useDUStatusPageFetch } from "./Hooks/useDUStatusPageFetch";
 import { useCreateStatusPage } from "../../StatusPage/Create/Hooks/useCreateStatusPage";
 import { statusPageValidation } from "../../../Validation/validation";
 import { buildErrors } from "../../../Validation/error";
 import { createToast } from "../../../Utils/toastUtils";
 import { useNavigate } from "react-router-dom";
 import { useMonitorsFetch } from "../../StatusPage/Create/Hooks/useMonitorsFetch";
+import { useStatusPageFetchByUrl } from "../Status/Hooks/useStatusPageFetchByUrl";
 
 const CreateStatus = () => {
 	const theme = useTheme();
@@ -29,10 +29,11 @@ const CreateStatus = () => {
 
 	const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate);
 
-	const [statusPage, statusPageIsLoading, statusPageNetworkError] = useDUStatusPageFetch(
-		isCreate,
-		url
-	);
+	const [statusPageIsLoading, statusPageNetworkError, statusPage, _, isPublished] =
+		useStatusPageFetchByUrl({
+			url,
+			timeFrame: 30,
+		});
 
 	const [monitors, monitorsIsLoading, monitorsNetworkError] = useMonitorsFetch();