refactor: add code validation functionality on tanstack mutation (#3469)

* Added Validate endpoint

* Added API Code Validate type

* Added post validate code hook

* Used mutation instead of API call to validate code

* Removed validate code api call

src/frontend/src/controllers/API/helpers/constants.ts

@@ -18,6 +18,7 @@ export const URLs = {
   FLOWS: `flows`,
   FOLDERS: `folders`,
   VARIABLES: `variables`,
+  VALIDATE: `validate`,
   CONFIG: `config`,
 } as const;
 

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

@@ -21,7 +21,6 @@ import {
   InitTypeAPI,
   PromptTypeAPI,
   UploadFileTypeAPI,
-  errorsTypeAPI,
 } from "./../../types/api/index";
 
 /**
@@ -58,12 +57,6 @@ export async function sendAll(data: sendAllProps) {
   return await api.post(`${BASE_URL_API}predict`, data);
 }
 
-export async function postValidateCode(
-  code: string,
-): Promise<AxiosResponse<errorsTypeAPI>> {
-  return await api.post(`${BASE_URL_API}validate/code`, { code });
-}
-
 /**
  * Checks the prompt for the code block by sending it to an API endpoint.
  * @param {string} name - The name of the field to check.

src/frontend/src/controllers/API/queries/nodes/use-post-validate-code.ts

@@ -0,0 +1,43 @@
+import {
+  APICodeValidateType,
+  ResponseErrorDetailAPI,
+  useMutationFunctionType,
+} from "@/types/api";
+import { UseMutationResult } from "@tanstack/react-query";
+import { api } from "../../api";
+import { getURL } from "../../helpers/constants";
+import { UseRequestProcessor } from "../../services/request-processor";
+
+interface IPostValidateCode {
+  code: string;
+}
+
+export const usePostValidateCode: useMutationFunctionType<
+  undefined,
+  IPostValidateCode,
+  APICodeValidateType,
+  ResponseErrorDetailAPI
+> = (options?) => {
+  const { mutate } = UseRequestProcessor();
+
+  const postValidateCodeFn = async (
+    payload: IPostValidateCode,
+  ): Promise<APICodeValidateType> => {
+    const response = await api.post<APICodeValidateType>(
+      getURL("VALIDATE", { 1: "code" }),
+      {
+        code: payload.code,
+      },
+    );
+
+    return response.data;
+  };
+
+  const mutation: UseMutationResult<
+    APICodeValidateType,
+    ResponseErrorDetailAPI,
+    IPostValidateCode
+  > = mutate(["usePostValidateCode"], postValidateCodeFn, options);
+
+  return mutation;
+};

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

@@ -4,6 +4,7 @@ import "ace-builds/src-noconflict/mode-python";
 import "ace-builds/src-noconflict/theme-github";
 import "ace-builds/src-noconflict/theme-twilight";
 // import "ace-builds/webpack-resolver";
+import { usePostValidateCode } from "@/controllers/API/queries/nodes/use-post-validate-code";
 import { useEffect, useRef, useState } from "react";
 import AceEditor from "react-ace";
 import ReactAce from "react-ace/lib/ace";
@@ -21,7 +22,7 @@ import {
   CODE_PROMPT_DIALOG_SUBTITLE,
   EDIT_CODE_TITLE,
 } from "../../constants/constants";
-import { postCustomComponent, postValidateCode } from "../../controllers/API";
+import { postCustomComponent } from "../../controllers/API";
 import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import { CodeErrorDataTypeAPI } from "../../types/api";
@@ -51,6 +52,7 @@ export default function CodeAreaModal({
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const [openConfirmation, setOpenConfirmation] = useState(false);
   const codeRef = useRef<ReactAce | null>(null);
+  const { mutate, isPending } = usePostValidateCode();
   const [error, setError] = useState<{
     detail: CodeErrorDataTypeAPI;
   } | null>(null);
@@ -64,43 +66,48 @@ export default function CodeAreaModal({
   }, []);
 
   function processNonDynamicField() {
-    postValidateCode(code)
-      .then((apiReturn) => {
-        if (apiReturn.data) {
-          let importsErrors = apiReturn.data.imports.errors;
-          let funcErrors = apiReturn.data.function.errors;
-          if (funcErrors.length === 0 && importsErrors.length === 0) {
-            setSuccessData({
-              title: CODE_SUCCESS_ALERT,
-            });
-            setOpen(false);
-            setValue(code);
-            // setValue(code);
+    mutate(
+      { code },
+      {
+        onSuccess: (apiReturn) => {
+          if (apiReturn) {
+            let importsErrors = apiReturn.imports.errors;
+            let funcErrors = apiReturn.function.errors;
+            if (funcErrors.length === 0 && importsErrors.length === 0) {
+              setSuccessData({
+                title: CODE_SUCCESS_ALERT,
+              });
+              setOpen(false);
+              setValue(code);
+              // setValue(code);
+            } else {
+              if (funcErrors.length !== 0) {
+                setErrorData({
+                  title: FUNC_ERROR_ALERT,
+                  list: funcErrors,
+                });
+              }
+              if (importsErrors.length !== 0) {
+                setErrorData({
+                  title: IMPORT_ERROR_ALERT,
+                  list: importsErrors,
+                });
+              }
+            }
           } else {
-            if (funcErrors.length !== 0) {
-              setErrorData({
-                title: FUNC_ERROR_ALERT,
-                list: funcErrors,
-              });
-            }
-            if (importsErrors.length !== 0) {
-              setErrorData({
-                title: IMPORT_ERROR_ALERT,
-                list: importsErrors,
-              });
-            }
+            setErrorData({
+              title: BUG_ALERT,
+            });
           }
-        } else {
+        },
+        onError: (error) => {
           setErrorData({
-            title: BUG_ALERT,
+            title: CODE_ERROR_ALERT,
+            list: [error.response.data.detail],
           });
-        }
-      })
-      .catch((_) => {
-        setErrorData({
-          title: CODE_ERROR_ALERT,
-        });
-      });
+        },
+      },
+    );
   }
 
   function processDynamicField() {

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

@@ -15,6 +15,11 @@ export type APITemplateType = {
   [key: string]: InputFieldType;
 };
 
+export type APICodeValidateType = {
+  imports: { errors: Array<string> };
+  function: { errors: Array<string> };
+};
+
 export type CustomFieldsType = {
   [key: string]: Array<string>;
 };