fixed validation

src/frontend/package.json

@@ -62,5 +62,5 @@
             "last 1 safari version"
         ]
     },
-    "proxy": "http://backend:7860"
+    "proxy": "http://127.0.0.1:7860"
 }

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -12,7 +12,7 @@ import { useContext, useState, useEffect, useRef } from "react";
 import { NodeDataType } from "../../types/flow";
 import { alertContext } from "../../contexts/alertContext";
 import { useCallback } from "react";
-
+import { TabsContext } from "../../contexts/tabsContext";
 export default function GenericNode({
 	data,
 	selected,
@@ -26,71 +26,50 @@ export default function GenericNode({
 	const Icon = nodeIcons[types[data.type]];
 	const [validationStatus, setValidationStatus] = useState("idle");
 	// State for outline color
-  const [isGreenOutline, setIsGreenOutline] = useState(false);
+	const [isValid, setIsValid] = useState(false);
-  const [isRedOutline, setIsRedOutline] = useState(false);
+  const {save} = useContext(TabsContext)
 	const { reactFlowInstance } = useContext(typesContext);
 	const [params, setParams] = useState([]);
 
+	console.log();
+
 	useEffect(() => {
 		if (reactFlowInstance) {
 			setParams(Object.values(reactFlowInstance.toObject()));
 		}
-  }, [reactFlowInstance]);
+	}, [save]);
-
-  const debouncedValidateNode = useDebouncedCallback(async () => {
-    // Check if the validationStatus is "success"
-    // if (validationStatus === "success") return;
 
+	useEffect(() => {
 		try {
-      const response = await fetch(`/validate/node/${data.id}`, {
+			fetch(`/validate/node/${data.id}`, {
 				method: "POST",
 				headers: {
 					"Content-Type": "application/json",
 				},
 				body: JSON.stringify(reactFlowInstance.toObject()),
-      });
+			}).then((response) => {
+				console.log(response.status, response.body);
 
 				if (response.status === 200) {
 					setValidationStatus("success");
 				} else if (response.status === 500) {
 					setValidationStatus("error");
 				}
+			});
 		} catch (error) {
 			console.error("Error validating node:", error);
 			setValidationStatus("error");
 		}
-  }, 1000);
+	}, [params]);
-
-  const validateNode = useCallback(() => {
-    debouncedValidateNode();
-  }, [debouncedValidateNode]);
-
-  useEffect(() => {
-    validateNode();
-  }, [validateNode, params]);
 
 	useEffect(() => {
 		if (validationStatus === "success") {
-      setIsGreenOutline(true);
+			setIsValid(true);
-      setIsRedOutline(false);
-      setTimeout(() => {
-        setIsGreenOutline(false);
-      }, 1000);
-    } else if (validationStatus === "error") {
-      setIsRedOutline(true);
-      setIsGreenOutline(false);
 		} else {
-      setIsGreenOutline(false);
+			setIsValid(false);
-      setIsRedOutline(false);
 		}
 	}, [validationStatus]);
 
-  const outlineColor = isGreenOutline
-    ? "animate-pulse-green"
-    : isRedOutline
-    ? "border-red-outline"
-    : "";
-
 	if (!Icon) {
 		if (showError.current) {
 			setErrorData({
@@ -107,7 +86,7 @@ export default function GenericNode({
 	return (
 		<div
 			className={classNames(
-        outlineColor,
+				isValid ? "animate-pulse-green" : "border-red-outline",
 				selected ? "border border-blue-500" : "border dark:border-gray-700",
 				"prompt-node relative bg-white dark:bg-gray-900 w-96 rounded-lg flex flex-col justify-center"
 			)}