From f97586813c7358c4eecf79b363cede34ac879269 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Fri, 28 Apr 2023 23:03:13 -0300 Subject: [PATCH] fixed validation --- src/frontend/package.json | 2 +- .../src/CustomNodes/GenericNode/index.tsx | 351 ++++++++---------- 2 files changed, 166 insertions(+), 187 deletions(-) diff --git a/src/frontend/package.json b/src/frontend/package.json index 69eb7b47f..0a33f0fd8 100644 --- a/src/frontend/package.json +++ b/src/frontend/package.json @@ -62,5 +62,5 @@ "last 1 safari version" ] }, - "proxy": "http://backend:7860" + "proxy": "http://127.0.0.1:7860" } \ No newline at end of file diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index b6d9b78ee..39dae0ed8 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,10 +1,10 @@ import { TrashIcon } from "@heroicons/react/24/outline"; import { useDebouncedCallback } from "use-debounce"; import { - classNames, - nodeColors, - nodeIcons, - snakeToNormalCase, + classNames, + nodeColors, + nodeIcons, + snakeToNormalCase, } from "../../utils"; import ParameterComponent from "./components/parameterComponent"; import { typesContext } from "../../contexts/typesContext"; @@ -12,198 +12,177 @@ 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, + data, + selected, }: { - data: NodeDataType; - selected: boolean; + data: NodeDataType; + selected: boolean; }) { - const { setErrorData } = useContext(alertContext); - const showError = useRef(true); - const { types, deleteNode } = useContext(typesContext); - const Icon = nodeIcons[types[data.type]]; - const [validationStatus, setValidationStatus] = useState("idle"); - // State for outline color - const [isGreenOutline, setIsGreenOutline] = useState(false); - const [isRedOutline, setIsRedOutline] = useState(false); - const { reactFlowInstance } = useContext(typesContext); - const [params, setParams] = useState([]); + const { setErrorData } = useContext(alertContext); + const showError = useRef(true); + const { types, deleteNode } = useContext(typesContext); + const Icon = nodeIcons[types[data.type]]; + const [validationStatus, setValidationStatus] = useState("idle"); + // State for outline color + const [isValid, setIsValid] = useState(false); + const {save} = useContext(TabsContext) + const { reactFlowInstance } = useContext(typesContext); + const [params, setParams] = useState([]); - useEffect(() => { - if (reactFlowInstance) { - setParams(Object.values(reactFlowInstance.toObject())); - } - }, [reactFlowInstance]); + console.log(); - const debouncedValidateNode = useDebouncedCallback(async () => { - // Check if the validationStatus is "success" - // if (validationStatus === "success") return; + useEffect(() => { + if (reactFlowInstance) { + setParams(Object.values(reactFlowInstance.toObject())); + } + }, [save]); - try { - const response = await fetch(`/validate/node/${data.id}`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(reactFlowInstance.toObject()), - }); + useEffect(() => { + try { + 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); + if (response.status === 200) { + setValidationStatus("success"); + } else if (response.status === 500) { + setValidationStatus("error"); + } + }); + } catch (error) { + console.error("Error validating node:", error); + setValidationStatus("error"); + } + }, [params]); - const validateNode = useCallback(() => { - debouncedValidateNode(); - }, [debouncedValidateNode]); + useEffect(() => { + if (validationStatus === "success") { + setIsValid(true); + } else { + setIsValid(false); + } + }, [validationStatus]); - useEffect(() => { - validateNode(); - }, [validateNode, params]); + if (!Icon) { + if (showError.current) { + setErrorData({ + title: data.type + ? `The ${data.type} node could not be rendered, please review your json file` + : "There was a node that can't be rendered, please review your json file", + }); + showError.current = false; + } + deleteNode(data.id); + return; + } - useEffect(() => { - if (validationStatus === "success") { - setIsGreenOutline(true); - setIsRedOutline(false); - setTimeout(() => { - setIsGreenOutline(false); - }, 1000); - } else if (validationStatus === "error") { - setIsRedOutline(true); - setIsGreenOutline(false); - } else { - setIsGreenOutline(false); - setIsRedOutline(false); - } - }, [validationStatus]); + return ( +
+
+
+ +
{data.type}
+
+ +
- const outlineColor = isGreenOutline - ? "animate-pulse-green" - : isRedOutline - ? "border-red-outline" - : ""; +
+
+ {data.node.description} +
- if (!Icon) { - if (showError.current) { - setErrorData({ - title: data.type - ? `The ${data.type} node could not be rendered, please review your json file` - : "There was a node that can't be rendered, please review your json file", - }); - showError.current = false; - } - deleteNode(data.id); - return; - } - - return ( -
-
-
- -
{data.type}
-
- -
- -
-
- {data.node.description} -
- - <> - {Object.keys(data.node.template) - .filter((t) => t.charAt(0) !== "_") - .map((t: string, idx) => ( -
- {idx === 0 ? ( -
- !key.startsWith("_") && - data.node.template[key].show && - !data.node.template[key].advanced - ).length === 0 - ? "hidden" - : "" - )} - > - Inputs -
- ) : ( - <> - )} - {data.node.template[t].show ? ( - - ) : ( - <> - )} -
- ))} -
- Output -
- - -
-
- ); + <> + {Object.keys(data.node.template) + .filter((t) => t.charAt(0) !== "_") + .map((t: string, idx) => ( +
+ {idx === 0 ? ( +
+ !key.startsWith("_") && + data.node.template[key].show && + !data.node.template[key].advanced + ).length === 0 + ? "hidden" + : "" + )} + > + Inputs +
+ ) : ( + <> + )} + {data.node.template[t].show ? ( + + ) : ( + <> + )} +
+ ))} +
+ Output +
+ + +
+
+ ); }