diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts index 9b714e18b..5faea9edf 100644 --- a/src/frontend/src/controllers/API/index.ts +++ b/src/frontend/src/controllers/API/index.ts @@ -18,7 +18,6 @@ import { APIClassType, BuildStatusTypeAPI, InitTypeAPI, - PromptTypeAPI, UploadFileTypeAPI, } from "./../../types/api/index"; @@ -56,25 +55,6 @@ export async function sendAll(data: sendAllProps) { return await api.post(`${BASE_URL_API}predict`, data); } -/** - * Checks the prompt for the code block by sending it to an API endpoint. - * @param {string} name - The name of the field to check. - * @param {string} template - The template string of the prompt to check. - * @param {APIClassType} frontend_node - The frontend node to check. - * @returns {Promise>} A promise that resolves to an AxiosResponse containing the validation results. - */ -export async function postValidatePrompt( - name: string, - template: string, - frontend_node: APIClassType, -): Promise> { - return api.post(`${BASE_URL_API}validate/prompt`, { - name, - template, - frontend_node, - }); -} - /** * Fetches a list of JSON files from a GitHub repository and returns their contents as an array of FlowType objects. * diff --git a/src/frontend/src/controllers/API/queries/nodes/use-post-validate-prompt.ts b/src/frontend/src/controllers/API/queries/nodes/use-post-validate-prompt.ts new file mode 100644 index 000000000..ce16ea6cc --- /dev/null +++ b/src/frontend/src/controllers/API/queries/nodes/use-post-validate-prompt.ts @@ -0,0 +1,48 @@ +import { + APIClassType, + PromptTypeAPI, + 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 IPostValidatePrompt { + name: string; + template: string; + frontend_node: APIClassType; +} + +export const usePostValidatePrompt: useMutationFunctionType< + undefined, + IPostValidatePrompt, + PromptTypeAPI, + ResponseErrorDetailAPI +> = (options?) => { + const { mutate } = UseRequestProcessor(); + + const postValidatePromptFn = async ( + payload: IPostValidatePrompt, + ): Promise => { + const response = await api.post( + getURL("VALIDATE", { 1: "prompt" }), + { + name: payload.name, + template: payload.template, + frontend_node: payload.frontend_node, + }, + ); + + return response.data; + }; + + const mutation: UseMutationResult< + PromptTypeAPI, + ResponseErrorDetailAPI, + IPostValidatePrompt + > = mutate(["usePostValidatePrompt"], postValidatePromptFn, options); + + return mutation; +}; diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx index 88a070096..1736a2ef5 100644 --- a/src/frontend/src/modals/promptModal/index.tsx +++ b/src/frontend/src/modals/promptModal/index.tsx @@ -1,3 +1,4 @@ +import { usePostValidatePrompt } from "@/controllers/API/queries/nodes/use-post-validate-prompt"; import { useEffect, useRef, useState } from "react"; import IconComponent from "../../components/genericIconComponent"; import SanitizedHTMLWrapper from "../../components/sanitizedHTMLWrapper"; @@ -18,7 +19,6 @@ import { PROMPT_DIALOG_SUBTITLE, regexHighlight, } from "../../constants/constants"; -import { postValidatePrompt } from "../../controllers/API"; import useAlertStore from "../../stores/alertStore"; import { PromptModalType } from "../../types/components"; import { handleKeyDown } from "../../utils/reactflowUtils"; @@ -46,6 +46,7 @@ export default function PromptModal({ const setNoticeData = useAlertStore((state) => state.setNoticeData); const divRef = useRef(null); const divRefPrompt = useRef(null); + const { mutate: postValidatePrompt } = usePostValidatePrompt(); function checkVariables(valueToCheck: string): void { const regex = /\{([^{}]+)\}/g; @@ -122,51 +123,53 @@ export default function PromptModal({ // Function need some review, working for now function validatePrompt(closeModal: boolean): void { //nodeClass is always null on tweaks - postValidatePrompt(field_name, inputValue, nodeClass!) - .then((apiReturn) => { - // if field_name is an empty string, then we need to set it - // to the first key of the custom_fields object - if (field_name === "") { - field_name = Array.isArray( - apiReturn.data?.frontend_node?.custom_fields?.[""], - ) - ? apiReturn.data?.frontend_node?.custom_fields?.[""][0] ?? "" - : apiReturn.data?.frontend_node?.custom_fields?.[""] ?? ""; - } - if (apiReturn.data) { - let inputVariables = apiReturn.data.input_variables ?? []; - if ( - JSON.stringify(apiReturn.data?.frontend_node) !== JSON.stringify({}) - ) { - setValue(inputValue); - apiReturn.data.frontend_node.template.template.value = inputValue; - if (setNodeClass) setNodeClass(apiReturn.data?.frontend_node); - setModalOpen(closeModal); - setIsEdit(false); + postValidatePrompt( + { name: field_name, template: inputValue, frontend_node: nodeClass! }, + { + onSuccess: (apiReturn) => { + if (field_name === "") { + field_name = Array.isArray( + apiReturn?.frontend_node?.custom_fields?.[""], + ) + ? apiReturn?.frontend_node?.custom_fields?.[""][0] ?? "" + : apiReturn?.frontend_node?.custom_fields?.[""] ?? ""; } - if (!inputVariables || inputVariables.length === 0) { - setNoticeData({ - title: TEMP_NOTICE_ALERT, - }); + if (apiReturn) { + let inputVariables = apiReturn.input_variables ?? []; + if ( + JSON.stringify(apiReturn?.frontend_node) !== JSON.stringify({}) + ) { + setValue(inputValue); + apiReturn.frontend_node.template.template.value = inputValue; + if (setNodeClass) setNodeClass(apiReturn?.frontend_node); + setModalOpen(closeModal); + setIsEdit(false); + } + if (!inputVariables || inputVariables.length === 0) { + setNoticeData({ + title: TEMP_NOTICE_ALERT, + }); + } else { + setSuccessData({ + title: PROMPT_SUCCESS_ALERT, + }); + } } else { - setSuccessData({ - title: PROMPT_SUCCESS_ALERT, + setIsEdit(true); + setErrorData({ + title: BUG_ALERT, }); } - } else { + }, + onError: (error) => { setIsEdit(true); - setErrorData({ - title: BUG_ALERT, + return setErrorData({ + title: PROMPT_ERROR_ALERT, + list: [error.response.data.detail ?? ""], }); - } - }) - .catch((error) => { - setIsEdit(true); - return setErrorData({ - title: PROMPT_ERROR_ALERT, - list: [error.response.data.detail ?? ""], - }); - }); + }, + }, + ); } return (