diff --git a/src/Pages/DistributedUptimeStatus/Create/Hooks/useDUStatusPageFetch.jsx b/src/Pages/DistributedUptimeStatus/Create/Hooks/useDUStatusPageFetch.jsx new file mode 100644 index 000000000..eecb161a3 --- /dev/null +++ b/src/Pages/DistributedUptimeStatus/Create/Hooks/useDUStatusPageFetch.jsx @@ -0,0 +1,46 @@ +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 }; diff --git a/src/Pages/DistributedUptimeStatus/Create/index.jsx b/src/Pages/DistributedUptimeStatus/Create/index.jsx index 3aa16a074..09673b53e 100644 --- a/src/Pages/DistributedUptimeStatus/Create/index.jsx +++ b/src/Pages/DistributedUptimeStatus/Create/index.jsx @@ -7,26 +7,34 @@ import VisuallyHiddenInput from "./Components/VisuallyHiddenInput"; import Image from "../../../Components/Image"; import LogoPlaceholder from "../../../assets/Images/logo_placeholder.svg"; import Breadcrumbs from "../../../Components/Breadcrumbs"; +import Search from "../../../Components/Inputs/Search"; +import MonitorList from "../../StatusPage/Create/Components/MonitorList"; // Utils import { useTheme } from "@emotion/react"; import { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; -import { useStatusPageFetch } from "../../StatusPage/Status/Hooks/useStatusPageFetch"; +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"; const CreateStatus = () => { const theme = useTheme(); const { monitorId, url } = useParams(); const navigate = useNavigate(); const isCreate = typeof url === "undefined"; + const [createStatusPage, isLoading, networkError] = useCreateStatusPage(isCreate); - const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] = - useStatusPageFetch(isCreate, url); + const [statusPage, statusPageIsLoading, statusPageNetworkError] = useDUStatusPageFetch( + isCreate, + url + ); + + const [monitors, monitorsIsLoading, monitorsNetworkError] = useMonitorsFetch(); const BREADCRUMBS = [ { name: "distributed uptime", path: "/distributed-uptime" }, @@ -43,6 +51,8 @@ const CreateStatus = () => { monitors: [monitorId], }); const [errors, setErrors] = useState({}); + const [search, setSearch] = useState(""); + const [selectedMonitors, setSelectedMonitors] = useState([]); const handleFormChange = (e) => { const { name, value, checked, type } = e.target; @@ -62,6 +72,16 @@ const CreateStatus = () => { setForm({ ...form, [name]: value }); }; + const handleMonitorsChange = (selectedMonitors) => { + handleFormChange({ + target: { + name: "subMonitors", + value: selectedMonitors.map((monitor) => monitor._id), + }, + }); + setSelectedMonitors(selectedMonitors); + }; + const handleImageUpload = (e) => { const img = e.target?.files?.[0]; setForm((prev) => ({ @@ -73,19 +93,20 @@ const CreateStatus = () => { let logoToSubmit = undefined; // Handle image - if (typeof form.logo !== "undefined") { + if (typeof form.logo !== "undefined" && typeof form.logo.src === "undefined") { logoToSubmit = { src: URL.createObjectURL(form.logo), name: form.logo.name, type: form.logo.type, size: form.logo.size, }; + } else if (typeof form.logo !== "undefined") { + logoToSubmit = form.logo; } const formToSubmit = { ...form }; if (typeof logoToSubmit !== "undefined") { formToSubmit.logo = logoToSubmit; } - // Validate const { error } = statusPageValidation.validate(formToSubmit, { abortEarly: false }); if (typeof error === "undefined") { @@ -127,12 +148,20 @@ const CreateStatus = () => { companyName: statusPage?.companyName, isPublished: statusPage?.isPublished, timezone: statusPage?.timezone, - monitors: statusPageMonitors.map((monitor) => monitor._id), + monitors: statusPage?.monitors, + subMonitors: statusPage?.subMonitors.map((monitor) => monitor._id), color: statusPage?.color, logo: newLogo, }; }); - }, [isCreate, statusPage, statusPageMonitors]); + setSelectedMonitors(statusPage?.subMonitors); + }, [isCreate, statusPage]); + + const imgSrc = form?.logo?.src + ? form.logo.src + : form.logo + ? URL.createObjectURL(form.logo) + : undefined; return ( @@ -212,7 +241,7 @@ const CreateStatus = () => { alignItems="center" > Logo { + + + Standard Monitors + + Attach standard monitors to your status page. + + + + + + + { const { url } = useParams(); const location = useLocation(); @@ -38,6 +40,7 @@ const DistributedUptimeStatus = () => { // Utils const theme = useTheme(); const navigate = useNavigate(); + const [ statusPageIsLoading, statusPageNetworkError, @@ -54,6 +57,7 @@ const DistributedUptimeStatus = () => { const [deleteStatusPage, isDeleting] = useStatusPageDelete(() => { navigate("/distributed-uptime"); }, url); + // Constants const BREADCRUMBS = [ { name: "Distributed Uptime", path: "/distributed-uptime" }, @@ -213,6 +217,7 @@ const DistributedUptimeStatus = () => { monitor={monitor} lastUpdateTrigger={lastUpdateTrigger} /> +