improvement of error check on code modal

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

@@ -23,7 +23,6 @@ export default function GenericNode({
 	const { types, deleteNode } = useContext(typesContext);
 	const Icon = nodeIcons[types[data.type]];
 	if (!Icon) {
-		console.log(data);
 		if (showError.current) {
 			setErrorData({
 				title: data.type
@@ -34,7 +33,6 @@ export default function GenericNode({
 		}
 		return;
 	}
-	console.log(data)
 	return (
 		<div
 			className={classNames(

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -5,30 +5,46 @@ import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
 
-export default function CodeAreaComponent({ value, onChange, disabled }:TextAreaComponentType) {
+export default function CodeAreaComponent({
-  const [myValue, setMyValue] = useState(value);
+	value,
-  const { openPopUp } = useContext(PopUpContext);
+	onChange,
-  useEffect(() => {
+	disabled,
-    if (disabled) {
+}: TextAreaComponentType) {
-      setMyValue("");
+	const [myValue, setMyValue] = useState(value);
-      onChange("");
+	const { openPopUp } = useContext(PopUpContext);
-    }
+	useEffect(() => {
-  }, [disabled, onChange]);
+		if (disabled) {
-  return (
+			setMyValue("");
-    <div className={disabled ? "pointer-events-none cursor-not-allowed" : ""}>
+			onChange("");
-      <div className="w-full flex items-center gap-3">
+		}
-        <span
+	}, [disabled, onChange]);
-          className={
+	return (
-            "truncate block w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
+		<div className={disabled ? "pointer-events-none cursor-not-allowed w-full" : "w-full"}>
-            (disabled ? " bg-gray-200" : "")
+			<div className="w-full flex items-center gap-3">
-          }
+				<span
-        >
+					className={
-            {myValue !== "" ? myValue : 'Text empty'}
+						"truncate block max-w-full text-gray-500 px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm" +
-        </span>
+						(disabled ? " bg-gray-200" : "")
-        <button onClick={()=>{openPopUp(<CodeAreaModal value={myValue} setValue={(t:string) => {setMyValue(t); onChange(t);}}/>)}}>
+					}
-            <ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+				>
-        </button>
+					{myValue !== "" ? myValue : "Text empty"}
-      </div>
+				</span>
-    </div>
+				<button
-  );
+					onClick={() => {
+						openPopUp(
+							<CodeAreaModal
+								value={myValue}
+								setValue={(t: string) => {
+									setMyValue(t);
+									onChange(t);
+								}}
+							/>
+						);
+					}}
+				>
+					<ArrowTopRightOnSquareIcon className="w-6 h-6 hover:text-blue-600" />
+				</button>
+			</div>
+		</div>
+	);
 }

src/frontend/src/controllers/API/index.ts

@@ -1,3 +1,4 @@
+import { errorsTypeAPI } from './../../types/api/index';
 import { APIObjectType, sendAllProps } from '../../types/api/index';
 import axios, { AxiosResponse } from "axios";
 
@@ -9,7 +10,7 @@ export async function sendAll(data:sendAllProps) {
     return await axios.post(`/predict`, data);
 }
 
-export async function checkCode(code:string){
+export async function checkCode(code:string):Promise<AxiosResponse<errorsTypeAPI>>{
 
     return await axios.post('/validate',{code})
 }

src/frontend/src/modals/codeAreaModal/index.tsx

@@ -120,13 +120,42 @@ export default function CodeAreaModal({
 											type="button"
 											className="inline-flex w-full justify-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
 											onClick={() => {
-												setValue(code)
 												checkCode(code)
-													.then((_) =>{
+													.then((apiReturn) => {
-														setSuccessData({ title: "Code is ready to run" })
+														console.log(apiReturn);
-														setModalOpen(false)
+														if (apiReturn.data) {
-													}
+															console.log(apiReturn.data);
-													)
+															let importsErrors = apiReturn.data.imports.errors;
+															let funcErrors = apiReturn.data.function.errors;
+															if (
+																funcErrors.length === 0 &&
+																importsErrors.length === 0
+															) {
+																setSuccessData({
+																	title: "Code is ready to run",
+																});
+																setModalOpen(false);
+																setValue(code)
+															} else {
+																if (funcErrors.length !== 0) {
+																	setErrorData({
+																		title: "There is an error in your function",
+																		list: funcErrors,
+																	});
+																}
+																if(importsErrors.length!==0){
+																	setErrorData({
+																		title: "There is an error in your imports",
+																		list: importsErrors,
+																	});
+																}
+															}
+														} else {
+															setErrorData({
+																title: "Something went wrong, please try again",
+															});
+														}
+													})
 													.catch((_) =>
 														setErrorData({
 															title:

src/frontend/src/types/api/index.ts

@@ -15,4 +15,5 @@ export type sendAllProps={
     message:string;
 
     chatHistory:{message:string,isSend:boolean}[],
-};
+};
+export type errorsTypeAPI={function:{errors:Array<string>},imports:{errors:Array<string>}}