diff --git a/Client/src/Pages/DistributedUptime/CreateStatus/Components/VisuallyHiddenInput/index.jsx b/Client/src/Pages/DistributedUptimeStatus/Create/Components/VisuallyHiddenInput/index.jsx similarity index 100% rename from Client/src/Pages/DistributedUptime/CreateStatus/Components/VisuallyHiddenInput/index.jsx rename to Client/src/Pages/DistributedUptimeStatus/Create/Components/VisuallyHiddenInput/index.jsx diff --git a/Client/src/Pages/DistributedUptime/CreateStatus/index.jsx b/Client/src/Pages/DistributedUptimeStatus/Create/index.jsx similarity index 79% rename from Client/src/Pages/DistributedUptime/CreateStatus/index.jsx rename to Client/src/Pages/DistributedUptimeStatus/Create/index.jsx index d244bfe38..91570c151 100644 --- a/Client/src/Pages/DistributedUptime/CreateStatus/index.jsx +++ b/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 ( @@ -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"]} diff --git a/Client/src/Pages/DistributedUptime/Status/Components/Skeleton/index.jsx b/Client/src/Pages/DistributedUptimeStatus/Status/Components/Skeleton/index.jsx similarity index 100% rename from Client/src/Pages/DistributedUptime/Status/Components/Skeleton/index.jsx rename to Client/src/Pages/DistributedUptimeStatus/Status/Components/Skeleton/index.jsx diff --git a/Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx b/Client/src/Pages/DistributedUptimeStatus/Status/Hooks/useStatusPageFetchByUrl.jsx similarity index 90% rename from Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx rename to Client/src/Pages/DistributedUptimeStatus/Status/Hooks/useStatusPageFetchByUrl.jsx index 583fed69d..0ca6346a0 100644 --- a/Client/src/Pages/DistributedUptime/Status/Hooks/useStatusPageFetchByUrl.jsx +++ b/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); diff --git a/Client/src/Pages/DistributedUptime/Status/index.jsx b/Client/src/Pages/DistributedUptimeStatus/Status/index.jsx similarity index 85% rename from Client/src/Pages/DistributedUptime/Status/index.jsx rename to Client/src/Pages/DistributedUptimeStatus/Status/index.jsx index d91761e06..89f97a4d0 100644 --- a/Client/src/Pages/DistributedUptime/Status/index.jsx +++ b/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 ( @@ -141,6 +141,8 @@ const DistributedUptimeStatus = () => { isDeleting={isDeleting} isDeleteOpen={isDeleteOpen} setIsDeleteOpen={setIsDeleteOpen} + url={url} + type="distributed" />