From 8737dbfd5b136de77817a8145c295979c6ed309f Mon Sep 17 00:00:00 2001
From: Shemy Gan <jennifergan26@gmail.com>
Date: Tue, 12 Nov 2024 10:19:03 -0500
Subject: [PATCH] - Extract CustomThreshold component - Refine Error setting in
 validation to remove any leftover errors - Add back the await as it is indeed
 needed even though syntax checker prompts to remove it

---
 .../src/Components/CustomThreshold/index.jsx  | 72 +++++++++++++++++++
 .../CreateMonitor/index.jsx                   | 64 +++--------------
 Client/src/Validation/error.js                | 14 ++--
 3 files changed, 89 insertions(+), 61 deletions(-)
 create mode 100644 Client/src/Components/CustomThreshold/index.jsx

diff --git a/Client/src/Components/CustomThreshold/index.jsx b/Client/src/Components/CustomThreshold/index.jsx
new file mode 100644
index 000000000..97dfe8bc3
--- /dev/null
+++ b/Client/src/Components/CustomThreshold/index.jsx
@@ -0,0 +1,72 @@
+import { Box, Stack, Typography } from "@mui/material";
+import Field from "../Inputs/Field";
+import Checkbox from "../Inputs/Checkbox";
+import { useTheme } from "@emotion/react";
+import PropTypes from "prop-types";
+
+export const CustomThreshold = ({
+    checkboxId,
+    checkboxLabel,
+    onCheckboxChange,
+    fieldId,		
+    onFieldChange,
+    onFieldBlur,
+    alertUnit,
+    infrastructureMonitor,
+    errors
+}) => 
+    {
+        const theme  = useTheme();
+        return (
+    <Stack
+        direction={"row"}
+        sx={{
+            width: "50%",
+            justifyContent: "space-between",
+        }}
+    >
+        <Box>
+            <Checkbox
+                id={checkboxId}
+                label={checkboxLabel}
+                isChecked={infrastructureMonitor[checkboxId]}
+                onChange={onCheckboxChange}
+            />
+        </Box>
+        <Stack
+            direction={"row"}
+            sx={{
+                justifyContent: "flex-end",
+            }}
+        >
+            <Field
+                type="number"
+                className="field-infrastructure-alert"
+                id={fieldId}
+                value={infrastructureMonitor[fieldId]}
+                onBlur={onFieldBlur}
+                onChange={onFieldChange}
+                error={errors[fieldId]}
+                disabled={!infrastructureMonitor[checkboxId]}
+            ></Field>
+            <Typography
+                component="p"
+                m={theme.spacing(3)}
+            >
+                {alertUnit}
+            </Typography>
+        </Stack>
+    </Stack>
+)}
+
+CustomThreshold.propTypes = {
+	checkboxId: PropTypes.string.isRequired,
+	checkboxLabel: PropTypes.string.isRequired,
+	onCheckboxChange: PropTypes.func.isRequired,
+	fieldId: PropTypes.string.isRequired,
+	onFieldChange: PropTypes.func.isRequired,
+	onFieldBlur: PropTypes.func.isRequired,
+	alertUnit: PropTypes.string.isRequired,
+	infrastructureMonitor: PropTypes.object.isRequired,
+	errors: PropTypes.object.isRequired,
+};
\ No newline at end of file
diff --git a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
index 7ca49da52..8210a7bee 100644
--- a/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
+++ b/Client/src/Pages/InfrastructureMonitors/CreateMonitor/index.jsx
@@ -18,6 +18,7 @@ import Checkbox from "../../../Components/Inputs/Checkbox";
 import Breadcrumbs from "../../../Components/Breadcrumbs";
 import { buildErrors, hasValidationErrors } from "../../../Validation/error";
 import { capitalizeFirstLetter } from "../../../Utils/stringUtils";
+import { CustomThreshold } from "../../../Components/CustomThreshold";
 
 const CreateInfrastructureMonitor = () => {
 	const [infrastructureMonitor, setInfrastructureMonitor] = useState({
@@ -52,55 +53,6 @@ const CreateInfrastructureMonitor = () => {
 	const alertErrKeyLen = Object.keys(errors)
 							.filter(k => k.startsWith(THRESHOLD_FIELD_PREFIX)).length
 
-	const CustomAlertStack = ({
-		checkboxId,
-		checkboxLabel,
-		fieldId,
-		alertUnit,
-		onChange,
-		onBlur,
-	}) => (
-		<Stack
-			direction={"row"}
-			sx={{
-				width: "50%",
-				justifyContent: "space-between",
-			}}
-		>
-			<Box>
-				<Checkbox
-					id={checkboxId}
-					label={checkboxLabel}
-					isChecked={infrastructureMonitor[checkboxId]}
-					onChange={handleCustomAlertCheckChange}
-				/>
-			</Box>
-			<Stack
-				direction={"row"}
-				sx={{
-					justifyContent: "flex-end",
-				}}
-			>
-				<Field
-					type="number"
-					className="field-infrastructure-alert"
-					id={fieldId}
-					value={infrastructureMonitor[fieldId]}
-					onBlur={onBlur}
-					onChange={onChange}
-					error={errors[fieldId]}
-					disabled={!infrastructureMonitor[checkboxId]}
-				></Field>
-				<Typography
-					component="p"
-					m={theme.spacing(3)}
-				>
-					{alertUnit}
-				</Typography>
-			</Stack>
-		</Stack>
-	);
-
 	const handleCustomAlertCheckChange = (event) => {
 		const { value, id } = event.target;
 		setInfrastructureMonitor((prev) => {
@@ -209,7 +161,7 @@ const CreateInfrastructureMonitor = () => {
 		if (hasValidationErrors(form, infrastractureMonitorValidation, setErrors)) {
 			return;
 		} else {
-			const checkEndpointAction = dispatch(
+			const checkEndpointAction = await dispatch(
 				checkInfrastructureEndpointResolution({ authToken, monitorURL: form.url })
 			);
 			if (checkEndpointAction.meta.requestStatus === "rejected") {
@@ -219,7 +171,7 @@ const CreateInfrastructureMonitor = () => {
 				setErrors({ url: "The entered URL is not reachable." });
 				return;
 			}
-			const action = dispatch(
+			const action = await dispatch(
 				createInfrastructureMonitor({ authToken, monitor: generatePayload(form) })
 			);
 			if (action.meta.requestStatus === "fulfilled") {
@@ -370,18 +322,20 @@ const CreateInfrastructureMonitor = () => {
 					</Box>
 					<Stack gap={theme.spacing(6)}>
 						{HARDWARE_MONITOR_TYPES.map((type, idx) => (
-							<CustomAlertStack
+							<CustomThreshold
 								key={idx}
 								checkboxId={type}
 								checkboxLabel={
 									type !== "cpu" ? capitalizeFirstLetter(type) : type.toUpperCase()
 								}
-								checkboxValue={""}
+								onCheckboxChange={handleCustomAlertCheckChange}
 								fieldId={THRESHOLD_FIELD_PREFIX + type}
 								fieldValue={infrastructureMonitor[THRESHOLD_FIELD_PREFIX + type] ?? ""}
-								onChange={handleChange}
-								onBlur={handleBlur}
+								onFieldChange={handleChange}
+								onFieldBlur={handleBlur}
 								alertUnit="%"
+								infrastructureMonitor={infrastructureMonitor}
+								errors={errors}
 							/>
 						))}
 						{alertErrKeyLen > 0 && (
diff --git a/Client/src/Validation/error.js b/Client/src/Validation/error.js
index 332037a67..e1278310b 100644
--- a/Client/src/Validation/error.js
+++ b/Client/src/Validation/error.js
@@ -1,7 +1,7 @@
 const buildErrors = (prev, id, error) => {
 	const updatedErrors = { ...prev };
 	if (error) {
-		updatedErrors[id] = error.details[0].message?? "Validation error";
+		updatedErrors[id] = error.details[0].message ?? "Validation error";
 	} else {
 		delete updatedErrors[id];
 	}
@@ -27,22 +27,24 @@ const hasValidationErrors = (form, validation, setErrors) => {
 			) {
 				newErrors[err.path[0]] = err.message ?? "Validation error";
 			}
-
 			// Handle conditionally usage number required cases
 			if (!form.cpu || (form.cpu && form.usage_cpu)) {
 				delete newErrors["usage_cpu"];
-			}			
+			}
 			if (!form.memory || (form.memory && form.usage_memory)) {
 				delete newErrors["usage_memory"];
-			}			
+			}
 			if (!form.disk || (form.disk && form.usage_disk)) {
 				delete newErrors["usage_disk"];
-			}						
+			}
 		});
 		if (Object.keys(newErrors).length > 0) {
 			setErrors(newErrors);
 			return true;
-		} else return false;
+		} else {
+			setErrors({});
+			return false;
+		}
 	}
 	return false;
 };