- Create new status page and retrieval are now working end to end, except the fields that currently does not have BE counterparts, including all checkboxes and uploaded logo

Client/src/Components/TabPanels/Status/ContentPanel.jsx

@@ -14,7 +14,7 @@ import { networkService } from "../../../main";
 const ContentPanel = () => {
 	const theme = useTheme();
 	const { form, setForm, errors, setErrors } = useContext(StatusFormContext);
-	const [cards, setCards] = useState(form.monitors.length>0? form.monitors.map((m, idx)=>({id: idx, val: m})): []);
+	const [cards, setCards] = useState([]);
 	const {user, authToken } = useSelector((state) => state.auth);	
 	const [monitors, setMonitors] = useState([]);
 
@@ -30,7 +30,15 @@ const ContentPanel = () => {
 				if(response.data.data.monitors.length==0){
 					setErrors({monitors: "Please config monitors to setup status page"})
 				}
-				setMonitors(response.data.data.monitors);
+				const fullMonitors = response.data.data.monitors ;
+				setMonitors(fullMonitors);
+				if (form.monitors.length > 0)
+					setCards(
+						form.monitors.map((mid, idx) => ({
+							id: "" + idx,
+							val: fullMonitors.filter((fM) => fM._id == mid)[0],
+						}))
+					);
 			} catch (error) {
 				createToast({ body: "Failed to fetch monitors data" });
 				logger.error("Failed to fetch monitors", error);

Client/src/Components/TabPanels/Status/GeneralSettingsPanel.jsx

@@ -1,7 +1,6 @@
 import { useState, useRef, useContext } from "react";
 import { Box, Stack, Typography } from "@mui/material";
 import ConfigBox  from "../../../Components/ConfigBox";
-import Checkbox from "../../Inputs/Checkbox";
 import { useTheme } from "@emotion/react";
 import TabPanel from "@mui/lab/TabPanel";
 import TextInput from "../../Inputs/TextInput";
@@ -25,7 +24,7 @@ const GeneralSettingsPanel = () => {
 	const { form, setForm, errors, setErrors  } = useContext(StatusFormContext);
 	const [progress, setProgress] = useState({ value: 0, isLoading: false });
 	const intervalRef = useRef(null);
-	
+
 	// Clears specific error from errors state
 	const clearError = (err) => {
 		setErrors((prev) => {
@@ -131,13 +130,13 @@ const GeneralSettingsPanel = () => {
 						</Stack>
 					</Box>
 					<Stack gap={theme.spacing(6)}>
-						<Checkbox
+						{/* <Checkbox
 							id="published-to-public"
 							label={`Published and visible to the public`}
 							isChecked={form.publish}
 							onChange={handleChange}
 							onBlur={handleBlur}
-						/>
+						/> */}
 					</Stack>
 				</ConfigBox>
 

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

@@ -69,12 +69,18 @@ import { networkService } from "../../../main";
 		e.preventDefault();
 		//validate rest of the form
 		delete form.logo;
-		//let localData = {...form, monitors: form.monitors.map(m=>m.url)}
-		let localData = {...form, monitors: form.monitors, theme: mode}
+		let localData = {
+			...form,
+			monitors:
+				form.monitors[0] && Object.keys(form.monitors[0]).includes("_id")
+					? form.monitors.map((m) => m._id)
+					: form.monitors,
+			theme: mode,
+		};
 		if (hasValidationErrors(localData, publicPageGeneralSettingsValidation, setErrors)) {
 			setActiveTabOnErrors();
 			return;
-		 }
+		}
 		// //validate image field, double check if it is required
 		// let error = validateField(
 		// 	{ type: logo?.type ?? null, size: logo?.size ?? null },
@@ -82,20 +88,17 @@ import { networkService } from "../../../main";
 		// );
 		//		if (error) return;
 
-		//form.logo = { ...logo, size: formatBytes(logo?.size) };	
-		localData = {...form, monitors: form.monitors.map(m=>m.url),theme: mode}
+		//form.logo = { ...logo, size: formatBytes(logo?.size) };
 		let config = { authToken: authToken, url: "status-page", data: localData };
-		try{
-			const res = await networkService.createStatusPage(config)
+		try {
+			const res = await networkService.createStatusPage(config);
 			if (!res.status === 200) {
 				throw new Error("Failed to create status page");
 			}
 			createToast({ body: "Status page created successfully!" });
-		}
-		catch(e){
+		} catch (e) {
 			createToast({ body: e.message || "Error creating status page" });
-		}		
-
+		}
 	};
 
 	return (
@@ -144,7 +147,7 @@ import { networkService } from "../../../main";
 					</TabList>
 				</Box>
 				<StatusFormProvider
-					form={hasInitForm ? initForm : form}
+					form={form}
 					setForm={setForm}
 					errors={errors}
 					setErrors={setErrors}

Client/src/Validation/error.js

@@ -66,6 +66,10 @@ const hasValidationErrors = (form, validation, setErrors) => {
 					"refreshTokenTTL",
 					"jwtTTL",
 					"notify-email-list",
+					"_id",
+					"__v",
+					"createdAt",
+					"updatedAt"
 				].includes(err.path[0])
 			) {
 				newErrors[err.path[0]] = err.message ?? "Validation error";
@@ -84,7 +88,6 @@ const hasValidationErrors = (form, validation, setErrors) => {
 				newErrors["usage_temperature"] = null;
 			}
 		});
-		
 		if (Object.values(newErrors).some((v) => v)) {
 			setErrors(newErrors);
 			return true;

Client/src/Validation/validation.js

@@ -158,18 +158,14 @@ const publicPageGeneralSettingsValidation = joi.object({
 	url: joi.string().trim().messages({ "string.empty": "URL is required." }),
 	timezone: joi.string().trim().messages({ "string.empty": "Timezone is required." }),
 	color: joi.string().trim().messages({ "string.empty": "Color is required." }),
-	
+
 	theme: joi.string(),
-	monitors: joi
-		.array()
-		.min(1)
-		.items({ id: joi.string(), url: joi.string().required() })
-		.messages({
-			"string.pattern.base": "Must be a valid monitor ID",
-			"array.base": "Monitors must be an array",
-			"array.empty": "At least one monitor is required",
-			"any.required": "Monitors are required",
-		}),	
+	monitors: joi.array().min(1).items(joi.string().required()).messages({
+		"string.pattern.base": "Must be a valid monitor ID",
+		"array.base": "Monitors must be an array",
+		"array.empty": "At least one monitor is required",
+		"any.required": "Monitors are required",
+	}),
 });
 const settingsValidation = joi.object({
 	ttl: joi.number().required().messages({