set name field onBlur when URL is changed

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