- Code clean up

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

@@ -4,50 +4,70 @@ import { Box, Tab, useTheme, Stack, Button } from "@mui/material";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
 import GeneralSettingsPanel from "../../../Components/TabPanels/Status/GeneralSettingsPanel";
-import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
 import ContentPanel from "../../../Components/TabPanels/Status/ContentPanel";
 import { publicPageGeneralSettingsValidation } from "../../../Validation/validation";
 import { hasValidationErrors } from "../../../Validation/error";
 import { StatusFormProvider } from "../CreateStatusContext";
+import { formatBytes } from "../../../Utils/fileUtils";
+import { useSelector } from "react-redux";
+import { createToast } from "../../../Utils/toastUtils";
+import { networkService } from "../../../main";
+
 /**
  * CreateStatus page renders a page with tabs for general settings and contents.
- * @param {string} [props.open] - Specifies the initially open tab: 'general settings' or 'content'.
+ * @param {object} [props.initForm] - Specifies the initial form value if the status page exists
  * @returns {JSX.Element}
  */
 
-const CreateStatus = ({ open = "general-settings", initForm }) => {
-	const theme = useTheme();
-	let tabList = ["General Settings", "Contents"];
+	const CreateStatus = ({ initForm }) => {
+	const theme = useTheme();	
+	const {authToken} = useSelector((state) => state.auth);
+	const {apiBaseUrl} = useSelector((state) => state.settings);	
+	const [tabIdx, setTabIdx] = useState(0);
 	const [errors, setErrors] = useState({});
 	const error_tab_maping = [["companyName","url","timezone","color","publish","logo"],["monitors",
 	"showUptimePercentage", "showBarcode"]]
-	const [form, setForm] = useState({
-		companyName: "",
-		url: "",
-		timezone: "America/Toronto",
-		color: "#4169E1",
-		//which fields matching below?
-		publish: false,
-		logo: null,
-		monitors: [],
-		showUptimePercentage: false,
-		showBarcode: false,
-	});
-	const tab = open
-		.split("-")
-		.map((a) => capitalizeFirstLetter(a))
-		.join(" ");
+	const tabList = ["General Settings", "Contents"];
+	const hasInitForm = initForm && Object.keys(initForm).length > 0;
+	const [form, setForm] = useState(
+		hasInitForm
+			? initForm
+			: {
+					companyName: "",
+					url: "",
+					timezone: "America/Toronto",
+					color: "#4169E1",
+					//which fields matching below?
+					//publish: false,
+					logo: null,
+					monitors: [],
+					// showUptimePercentage: false,
+					// showBarcode: false,
+				}
+	);
 
-	const [tabIdx, setTabIdx] = useState(tabList.indexOf(tab));
-
-	const handleTabChange = (event, newTab) => {
+	// switch to the respective tab when there is error on it
+	useEffect(() => {		
+		let newIdx = -1;
+		Object.keys(errors).map(id=>{
+			error_tab_maping.map((val, idx)  => {
+				let anyMatch = val.some(vl=> vl==id )
+				if(anyMatch){
+					newIdx = idx;					
+				}
+			})
+		})
+		if (newIdx !== -1) setTabIdx(newIdx);		
+	}, [errors]);
 
+	const handleTabChange = (_, newTab) => {
 		setTabIdx(tabList.indexOf(newTab));
 	};
 
-	const handleSubmit = () => {
+	const handleSubmit = async () => {
 		//validate rest of the form
 		delete form.logo;
+		
 		if (hasValidationErrors(form, publicPageGeneralSettingsValidation, setErrors)) {
 			return;
 		}
@@ -57,27 +77,21 @@ const CreateStatus = ({ open = "general-settings", initForm }) => {
 		// 	logoImageValidation
 		// );
 		//		if (error) return;
-		form.logo = { ...logo, size: formatBytes(logo?.size) };
-	};
 
-	useEffect(() => {		
-		let newIdx = -1;
-		Object.keys(errors).map(id=>{
-			console.log("errors id")
-			console.log(id)
-			error_tab_maping.map((val, idx)  => {
-				let anyMatch = val.some(vl=> vl==id )
-				if(anyMatch){
-					newIdx = idx;					
-				}
-			})
-		})
-		console.log("newIdx")
-		console.log(newIdx)
-		if(newIdx!==-1)
-			setTabIdx(newIdx)		
-		setTabIdx(tabList.indexOf(tab));
-	}, [tab,errors]);
+		//form.logo = { ...logo, size: formatBytes(logo?.size) };
+		let config = { authToken: authToken, url: apiBaseUrl, data: form };
+		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){
+			createToast({ body: e.message || "Error creating status page" });
+		}		
+
+	};
 
 	return (
 		<Box
@@ -125,7 +139,7 @@ const CreateStatus = ({ open = "general-settings", initForm }) => {
 					</TabList>
 				</Box>
 				<StatusFormProvider
-					form={initForm && Object.keys(initForm) > 0 ? initForm : form}
+					form={hasInitForm ? initForm : form}
 					setForm={setForm}
 					errors={errors}
 					setErrors={setErrors}
@@ -150,7 +164,7 @@ const CreateStatus = ({ open = "general-settings", initForm }) => {
 };
 
 CreateStatus.propTypes = {
-	open: PropTypes.oneOf(["general-settings", "contents"]),
+	initForm: PropTypes.object
 };
 
 export default CreateStatus;

Client/src/Pages/Status/index.jsx

@@ -3,7 +3,7 @@ import Fallback from "../../Components/Fallback";
 import { Box, Button, Stack } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import CreateStatus from "./CreateStatus";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { networkService } from "../../main";
 import { useSelector } from "react-redux";
 
@@ -12,12 +12,14 @@ const Status = () => {
 	const navigate = useNavigate();	
 	const {authToken} = useSelector((state) => state.auth);
 	const {apiBaseUrl} = useSelector((state) => state.settings);	
-	let initForm = {}
+	const [initForm, setInitForm] = useState({});
 
 	useEffect(() => {
 		const getStatusPage = async () => {
 			let config = { authToken: authToken, url: apiBaseUrl };
-			initForm = await networkService.getStatusPageByUrl(config);
+			let res = await networkService.getStatusPageByUrl(config);			
+			if(res && res.data)
+				setInitForm( res.data.data)
 		};
 		getStatusPage();
 	}, []);

Client/src/Routes/index.jsx

@@ -28,6 +28,7 @@ import CreateNewMaintenanceWindow from "../Pages/Maintenance/CreateMaintenance";
 import PageSpeedDetails from "../Pages/PageSpeed/Details";
 import PageSpeedConfigure from "../Pages/PageSpeed/Configure";
 import withAdminCheck from "../Components/HOC/withAdminCheck";
+import CreateStatus from "../Pages/Status/CreateStatus";
 
 const Routes = () => {
 	const AdminCheckedRegister = withAdminCheck(Register);
@@ -98,6 +99,11 @@ const Routes = () => {
 					path="status"
 					element={<Status />}
 				/>
+
+				<Route
+					path="status/create"
+					element={<CreateStatus/>}
+				/>
 				<Route
 					path="integrations"
 					element={<Integrations />}

Client/src/Validation/validation.js

@@ -154,7 +154,17 @@ 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." }),
-	publish: joi.bool()
+	publish: joi.bool(),
+	monitors: joi
+		.array()
+		.items(joi.string().pattern(/^[0-9a-fA-F]{24}$/))
+		.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",
+		}),	
 
 }