set name field onBlur when URL is changed

Client/src/Pages/Infrastructure/CreateMonitor/index.jsx

@@ -3,6 +3,7 @@ import { Box, Stack, Typography } from "@mui/material";
 import LoadingButton from "@mui/lab/LoadingButton";
 import { useSelector, useDispatch } from "react-redux";
 import { infrastructureMonitorValidation } from "../../../Validation/validation";
+import { parseDomainName } from "../../../Utils/monitorUtils";
 import {
 	createInfrastructureMonitor,
 	checkInfrastructureEndpointResolution,
@@ -80,6 +81,15 @@ const CreateInfrastructureMonitor = () => {
 	const handleBlur = (event, appendID) => {
 		event.preventDefault();
 		const { value, id } = event.target;
+
+		let name = idMap[id] ?? id;
+		if (name === "url" && infrastructureMonitor.name === "") {
+			setInfrastructureMonitor((prev) => ({
+				...prev,
+				name: parseDomainName(value),
+			}));
+		}
+
 		if (id?.startsWith("notify-email-")) return;
 		const { error } = infrastructureMonitorValidation.validate(
 			{ [id ?? appendID]: value },

Client/src/Pages/Monitors/CreateMonitor/index.jsx

@@ -17,6 +17,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { getUptimeMonitorById } from "../../../Features/UptimeMonitors/uptimeMonitorsSlice";
 import "./index.css";
+import { parseDomainName } from "../../../Utils/monitorUtils";
 
 const CreateMonitor = () => {
 	const MS_PER_MINUTE = 60000;
@@ -90,7 +91,7 @@ const CreateMonitor = () => {
 			}
 		};
 		fetchMonitor();
-	}, [monitorId, authToken, monitors]);
+	}, [monitorId, authToken, monitors, dispatch, navigate]);
 
 	const handleChange = (event, name) => {
 		const { value, id } = event.target;
@@ -140,6 +141,16 @@ const CreateMonitor = () => {
 		}
 	};
 
+	const onUrlBlur = (event) => {
+		const { value } = event.target;
+		if (monitor.name === "") {
+			setMonitor((prev) => ({
+				...prev,
+				name: parseDomainName(value),
+			}));
+		}
+	};
+
 	const handleCreateMonitor = async (event) => {
 		event.preventDefault();
 		//obj to submit
@@ -257,6 +268,7 @@ const CreateMonitor = () => {
 							placeholder={monitorTypeMaps[monitor.type].placeholder || ""}
 							value={monitor.url}
 							onChange={handleChange}
+							onBlur={onUrlBlur}
 							error={errors["url"]}
 						/>
 						<Field

Client/src/Pages/PageSpeed/CreatePageSpeed/index.jsx

@@ -17,6 +17,7 @@ import Field from "../../../Components/Inputs/Field";
 import Select from "../../../Components/Inputs/Select";
 import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
+import { parseDomainName } from "../../../Utils/monitorUtils";
 import "./index.css";
 
 const CreatePageSpeed = () => {
@@ -94,6 +95,16 @@ const CreatePageSpeed = () => {
 		}
 	};
 
+	const onUrlBlur = (event) => {
+		const { value } = event.target;
+		if (monitor.name === "") {
+			setMonitor((prev) => ({
+				...prev,
+				name: parseDomainName(value),
+			}));
+		}
+	};
+
 	const handleCreateMonitor = async (event) => {
 		event.preventDefault();
 		//obj to submit
@@ -213,6 +224,7 @@ const CreatePageSpeed = () => {
 							placeholder="google.com"
 							value={monitor.url}
 							onChange={handleChange}
+							onBlur={onUrlBlur}
 							error={errors["url"]}
 						/>
 						<Field