implement config

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

@@ -5,13 +5,16 @@ import GenericFallback from "../../../Components/GenericFallback";
 import SkeletonLayout from "./Components/Skeleton";
 //Utils
 import { useTheme } from "@emotion/react";
-import { useState, useRef, useCallback } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import { statusPageValidation } from "../../../Validation/validation";
 import { buildErrors } from "../../../Validation/error";
 import { useMonitorsFetch } from "./Hooks/useMonitorsFetch";
 import { useCreateStatusPage } from "./Hooks/useCreateStatusPage";
 import { createToast } from "../../../Utils/toastUtils";
 import { useNavigate } from "react-router-dom";
+import { useLocation } from "react-router-dom";
+import { useStatusPageFetch } from "../Status/Hooks/useStatusPageFetch";
+
 //Constants
 const TAB_LIST = ["General settings", "Contents"];
 
@@ -40,12 +43,18 @@ const CreateStatusPage = () => {
 	// Refs
 	const intervalRef = useRef(null);
 
+	// Setup
+	const location = useLocation();
+	const isCreate = location.pathname === "/status/create";
+
 	//Utils
 	const theme = useTheme();
 	const [monitors, isLoading, networkError] = useMonitorsFetch();
-	const [createStatusPage, createSatusIsLoading, createStatusPageNetworkError] =
-		useCreateStatusPage();
+	const [createStatusPage, createStatusIsLoading, createStatusPageNetworkError] =
+		useCreateStatusPage(isCreate);
 	const navigate = useNavigate();
+	const [statusPage, statusPageMonitors, statusPageIsLoading, statusPageNetworkError] =
+		useStatusPageFetch(isCreate);
 
 	// Handlers
 	const handleFormChange = (e) => {
@@ -145,6 +154,37 @@ const CreateStatusPage = () => {
 		setTab(errorTabs[0]);
 	};
 
+	// 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,
+			};
+		});
+		setSelectedMonitors(statusPageMonitors);
+	}, [isCreate, statusPage, statusPageMonitors]);
+
 	if (networkError === true) {
 		return (
 			<GenericFallback>
@@ -162,6 +202,7 @@ const CreateStatusPage = () => {
 
 	if (isLoading) return <SkeletonLayout />;
 
+	// Load fields
 	return (
 		<Stack gap={theme.spacing(10)}>
 			<Tabs

Client/src/Pages/StatusPage/Status/Components/ControlsHeader/index.jsx

@@ -37,7 +37,7 @@ const Controls = ({ deleteStatusPage, isDeleting }) => {
 				<Button
 					variant="contained"
 					color="secondary"
-					onClick={() => navigate(`/status/create`)}
+					onClick={() => navigate(`/status/configure`)}
 					sx={{
 						px: theme.spacing(5),
 						"& svg": {

Client/src/Pages/StatusPage/Status/Hooks/useStatusPageFetch.jsx

@@ -28,7 +28,7 @@ const getMonitorWithPercentage = (monitor, theme) => {
 	};
 };
 
-const useStatusPageFetch = () => {
+const useStatusPageFetch = (isCreate = false) => {
 	const [isLoading, setIsLoading] = useState(true);
 	const [networkError, setNetworkError] = useState(false);
 	const [statusPage, setStatusPage] = useState(undefined);
@@ -59,9 +59,13 @@ const useStatusPageFetch = () => {
 			setIsLoading(false);
 		}
 	}, [authToken, theme]);
+
 	useEffect(() => {
+		if (isCreate === true) {
+			return;
+		}
 		fetchStatusPage();
-	}, [fetchStatusPage]);
+	}, [isCreate, fetchStatusPage]);
 
 	return [statusPage, monitors, isLoading, networkError, fetchStatusPage];
 };

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

@@ -1,5 +1,5 @@
 // Components
-import { Typography, Stack, Box } from "@mui/material";
+import { Typography, Stack } from "@mui/material";
 import GenericFallback from "../../../Components/GenericFallback";
 import Fallback from "../../../Components/Fallback";
 import AdminLink from "./Components/AdminLink";
@@ -8,12 +8,10 @@ import SkeletonLayout from "./Components/Skeleton";
 import StatusBar from "./Components/StatusBar";
 import MonitorsList from "./Components/MonitorsList";
 // Utils
-import { useState, useEffect } from "react";
 import { useStatusPageFetch } from "./Hooks/useStatusPageFetch";
 import { useTheme } from "@emotion/react";
 import { useIsAdmin } from "../../../Hooks/useIsAdmin";
 import { useLocation } from "react-router-dom";
-import { useNavigate } from "react-router-dom";
 import { useStatusPageDelete } from "./Hooks/useStatusPageDelete";
 
 const PublicStatus = () => {