move DU status

Client/src/Pages/DistributedUptimeStatus/Create/index.jsx

@@ -9,8 +9,9 @@ import LogoPlaceholder from "../../../assets/Images/logo_placeholder.svg";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 // Utils
 import { useTheme } from "@emotion/react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { useStatusPageFetch } from "../../StatusPage/Status/Hooks/useStatusPageFetch";
 import { useCreateStatusPage } from "../../StatusPage/Create/Hooks/useCreateStatusPage";
 import { useLocation } from "react-router-dom";
 import { statusPageValidation } from "../../../Validation/validation";
@@ -20,20 +21,25 @@ import { useNavigate } from "react-router-dom";
 
 const CreateStatus = () => {
 	const theme = useTheme();
-	const { monitorId } = useParams();
+	const { monitorId, url } = useParams();
 	const navigate = useNavigate();
 	const location = useLocation();
-	const isCreate = location.pathname.startsWith("/distributed-uptime/status/create");
+	const isCreate = location.pathname.startsWith("/status/distributed/create");
 	const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate);
+
+	const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
+		useStatusPageFetch(isCreate, url);
+
 	const BREADCRUMBS = [
 		{ name: "distributed uptime", path: "/distributed-uptime" },
 		{ name: "details", path: `/distributed-uptime/${monitorId}` },
-		{ name: "create status page", path: `` },
+		{ name: isCreate ? "create status page" : "edit status page", path: `` },
 	];
 	// Local state
 	const [form, setForm] = useState({
+		type: "distributed",
 		isPublished: false,
-		url: Math.floor(Math.random() * 1000000).toFixed(0),
+		url: url ?? Math.floor(Math.random() * 1000000).toFixed(0),
 		logo: undefined,
 		companyName: "",
 		monitors: [monitorId],
@@ -87,8 +93,9 @@ const CreateStatus = () => {
 		if (typeof error === "undefined") {
 			const success = await createStatusPage({ form: formToSubmit });
 			if (success) {
-				createToast({ body: "Status page created successfully" });
-				navigate(`/distributed-uptime/status/${form.url}`);
+				const verb = isCreate ? "created" : "updated";
+				createToast({ body: `Status page ${verb} successfully` });
+				navigate(`/status/distributed/${form.url}`);
 			}
 			return;
 		}
@@ -99,6 +106,36 @@ const CreateStatus = () => {
 		setErrors((prev) => ({ ...prev, ...newErrors }));
 	};
 
+	// If we are configuring, populate fields
+	useEffect(() => {
+		if (isCreate) return;
+		if (typeof statusPage === "undefined") {
+			return;
+		}
+
+		let newLogo = undefined;
+		if (statusPage.logo) {
+			newLogo = {
+				src: `data:${statusPage.logo.contentType};base64,${statusPage.logo.data}`,
+				name: "logo",
+				type: statusPage.logo.contentType,
+				size: null,
+			};
+		}
+
+		setForm((prev) => {
+			return {
+				...prev,
+				companyName: statusPage?.companyName,
+				isPublished: statusPage?.isPublished,
+				timezone: statusPage?.timezone,
+				monitors: statusPageMonitors.map((monitor) => monitor._id),
+				color: statusPage?.color,
+				logo: newLogo,
+			};
+		});
+	}, [isCreate, statusPage, statusPageMonitors]);
+
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Breadcrumbs list={BREADCRUMBS} />
@@ -159,6 +196,7 @@ const CreateStatus = () => {
 						name="url"
 						type="url"
 						label="Your status page address"
+						disabled={!isCreate}
 						value={form.url}
 						onChange={handleFormChange}
 						helperText={errors["url"]}

Client/src/Pages/DistributedUptimeStatus/Status/Hooks/useStatusPageFetchByUrl.jsx

@@ -13,7 +13,11 @@ const useStatusPageFetchByUrl = ({ url }) => {
 	useEffect(() => {
 		const fetchStatusPageByUrl = async () => {
 			try {
-				const response = await networkService.getStatusPageByUrl({ authToken, url });
+				const response = await networkService.getStatusPageByUrl({
+					authToken,
+					url,
+					type: "distributed",
+				});
 				if (!response?.data?.data) return;
 				const statusPage = response.data.data;
 				setStatusPage(statusPage);

Client/src/Pages/DistributedUptimeStatus/Status/index.jsx

@@ -1,12 +1,12 @@
 //Components
-import DistributedUptimeMap from "../Details/Components/DistributedUptimeMap";
+import DistributedUptimeMap from "../../DistributedUptime/Details/Components/DistributedUptimeMap";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { Stack, Typography } from "@mui/material";
-import DeviceTicker from "../Details/Components/DeviceTicker";
-import DistributedUptimeResponseChart from "../Details/Components/DistributedUptimeResponseChart";
-import NextExpectedCheck from "../Details/Components/NextExpectedCheck";
-import Footer from "../Details/Components/Footer";
-import StatBoxes from "../Details/Components/StatBoxes";
+import DeviceTicker from "../../DistributedUptime/Details/Components/DeviceTicker";
+import DistributedUptimeResponseChart from "../../DistributedUptime/Details/Components/DistributedUptimeResponseChart";
+import NextExpectedCheck from "../../DistributedUptime/Details/Components/NextExpectedCheck";
+import Footer from "../../DistributedUptime/Details/Components/Footer";
+import StatBoxes from "../../DistributedUptime/Details/Components/StatBoxes";
 import ControlsHeader from "../../StatusPage/Status/Components/ControlsHeader";
 import MonitorTimeFrameHeader from "../../../Components/MonitorTimeFrameHeader";
 import GenericFallback from "../../../Components/GenericFallback";
@@ -16,7 +16,7 @@ import SkeletonLayout from "./Components/Skeleton";
 import { useTheme } from "@mui/material/styles";
 import { useState } from "react";
 import { useParams } from "react-router-dom";
-import { useSubscribeToDetails } from "../Details/Hooks/useSubscribeToDetails";
+import { useSubscribeToDetails } from "../../DistributedUptime/Details/Hooks/useSubscribeToDetails";
 import { useStatusPageFetchByUrl } from "./Hooks/useStatusPageFetchByUrl";
 import { useStatusPageDelete } from "../../StatusPage/Status/Hooks/useStatusPageDelete";
 import { useNavigate } from "react-router-dom";
@@ -24,7 +24,7 @@ import { useLocation } from "react-router-dom";
 const DistributedUptimeStatus = () => {
 	const { url } = useParams();
 	const location = useLocation();
-	const isPublic = location.pathname.startsWith("/distributed-uptime/status/public");
+	const isPublic = location.pathname.startsWith("/status/distributed/public");
 
 	// Local State
 	const [dateRange, setDateRange] = useState("day");
@@ -84,7 +84,7 @@ const DistributedUptimeStatus = () => {
 	}
 
 	// Done loading, a status page exists but is not public
-	if (!statusPageIsLoading && statusPage.isPublished === false) {
+	if (!statusPageIsLoading && isPublic && statusPage.isPublished === false) {
 		return (
 			<Stack sx={sx}>
 				<GenericFallback>
@@ -141,6 +141,8 @@ const DistributedUptimeStatus = () => {
 				isDeleting={isDeleting}
 				isDeleteOpen={isDeleteOpen}
 				setIsDeleteOpen={setIsDeleteOpen}
+				url={url}
+				type="distributed"
 			/>
 			<StatBoxes
 				monitor={monitor}