From 3bd103dbc5413e924f2c85a5dadfee710170be51 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Wed, 28 Jun 2023 17:42:58 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20refactor(promptComponent):=20mov?=
 =?UTF-8?q?e=20postValidatePrompt=20import=20statement=20to=20the=20top=20?=
 =?UTF-8?q?of=20the=20file=20for=20better=20organization?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔥 chore(promptModal): remove unused promptModal component

🔨 refactor(promptComponent): use useEffect to make a POST request to validate the prompt value and update the nodeClass state if the API returns data
---
 .../src/components/promptComponent/index.tsx  |  13 ++
 src/frontend/src/modals/promptModal/index.tsx | 153 ------------------
 2 files changed, 13 insertions(+), 153 deletions(-)
 delete mode 100644 src/frontend/src/modals/promptModal/index.tsx

diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 59c4227ef..3f0742407 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -5,6 +5,7 @@ import GenericModal from "../../modals/genericModal";
 import { TypeModal } from "../../utils";
 import { INPUT_STYLE } from "../../constants";
 import { ExternalLink } from "lucide-react";
+import { postValidatePrompt } from "../../controllers/API";
 
 export default function PromptAreaComponent({
   setNodeClass,
@@ -23,6 +24,18 @@ export default function PromptAreaComponent({
     }
   }, [disabled, onChange]);
 
+  useEffect(() => {
+    if (value) {
+      postValidatePrompt(myValue, nodeClass)
+        .then((apiReturn) => {
+          if (apiReturn.data) {
+            setNodeClass(apiReturn.data.frontend_node);
+          }
+        })
+        .catch((error) => {});
+    }
+  }, [value]);
+
   useEffect(() => {
     setMyValue(value);
   }, [value]);
diff --git a/src/frontend/src/modals/promptModal/index.tsx b/src/frontend/src/modals/promptModal/index.tsx
deleted file mode 100644
index 2ab1c140a..000000000
--- a/src/frontend/src/modals/promptModal/index.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { Dialog, Transition } from "@headlessui/react";
-import { XMarkIcon, DocumentTextIcon } from "@heroicons/react/24/outline";
-import { Fragment, useContext, useRef, useState } from "react";
-import { PopUpContext } from "../../contexts/popUpContext";
-import { darkContext } from "../../contexts/darkContext";
-import { postValidatePrompt } from "../../controllers/API";
-import { alertContext } from "../../contexts/alertContext";
-export default function PromptAreaModal({
-  value,
-  setValue,
-}: {
-  setValue: (value: string) => void;
-  value: string;
-}) {
-  const [open, setOpen] = useState(true);
-  const [myValue, setMyValue] = useState(value);
-  const { dark } = useContext(darkContext);
-  const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { closePopUp } = useContext(PopUpContext);
-  const ref = useRef();
-  function setModalOpen(x: boolean) {
-    setOpen(x);
-    if (x === false) {
-      setTimeout(() => {
-        closePopUp();
-      }, 300);
-    }
-  }
-  return (
-    <Transition.Root show={open} appear={true} as={Fragment}>
-      <Dialog
-        as="div"
-        className="relative z-10"
-        onClose={setModalOpen}
-        initialFocus={ref}
-      >
-        <Transition.Child
-          as={Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div className="fixed inset-0 bg-ring dark:bg-gray-600 dark:bg-opacity-75 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
-
-        <div className="fixed inset-0 z-10 overflow-y-auto">
-          <div className="flex h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
-              as={Fragment}
-              enter="ease-out duration-300"
-              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enterTo="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <Dialog.Panel className="relative flex flex-col justify-between transform h-[600px] overflow-hidden rounded-lg bg-white dark:bg-gray-800 text-left shadow-xl transition-all sm:my-8 w-[700px]">
-                <div className=" z-50 absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
-                  <button
-                    type="button"
-                    className="rounded-md text-gray-400 hover:text-gray-500"
-                    onClick={() => {
-                      setModalOpen(false);
-                    }}
-                  >
-                    <span className="sr-only">Close</span>
-                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
-                  </button>
-                </div>
-                <div className="h-full w-full flex flex-col justify-center items-center">
-                  <div className="flex w-full pb-4 z-10 justify-center shadow-sm">
-                    <div className="mx-auto mt-4 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-gray-900 sm:mx-0 sm:h-10 sm:w-10">
-                      <DocumentTextIcon
-                        className="h-6 w-6 text-blue-600"
-                        aria-hidden="true"
-                      />
-                    </div>
-                    <div className="mt-4 text-center sm:ml-4 sm:text-left">
-                      <Dialog.Title
-                        as="h3"
-                        className="text-lg font-medium dark:text-white leading-10 text-gray-900"
-                      >
-                        Edit Prompt
-                      </Dialog.Title>
-                    </div>
-                  </div>
-                  <div className="h-full w-full bg-accent overflow-auto dark:bg-gray-900 p-4 gap-4 flex flex-row justify-center items-center">
-                    <div className="flex h-full w-full">
-                      <div className="overflow-hidden px-4 py-5 sm:p-6 w-full h-full rounded-lg bg-white dark:bg-gray-800 shadow">
-                        <textarea
-                          ref={ref}
-                          className="form-input h-full w-full rounded-lg border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white"
-                          value={myValue}
-                          onChange={(e) => {
-                            setMyValue(e.target.value);
-                            setValue(e.target.value);
-                          }}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                  <div className="bg-gray-200 dark:bg-gray-900 w-full pb-3 flex flex-row-reverse px-4">
-                    <button
-                      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-ring focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:ring-offset-1 sm:ml-3 sm:w-auto sm:text-sm"
-                      onClick={() => {
-                        postValidatePrompt(myValue)
-                          .then((apiReturn) => {
-                            if (apiReturn.data) {
-                              let inputVariables =
-                                apiReturn.data.input_variables;
-                              if (inputVariables.length === 0) {
-                                setErrorData({
-                                  title:
-                                    "The template you are attempting to use does not contain any variables for data entry.",
-                                });
-                              } else {
-                                setSuccessData({
-                                  title: "Prompt is ready",
-                                });
-                                setModalOpen(false);
-                                setValue(myValue);
-                              }
-                            } else {
-                              setErrorData({
-                                title: "Something went wrong, please try again",
-                              });
-                            }
-                          })
-                          .catch((error) => {
-                            return setErrorData({
-                              title:
-                                "There is something wrong with this prompt, please review it",
-                              list: [error.response.data.detail],
-                            });
-                          });
-                      }}
-                    >
-                      Check & Save
-                    </button>
-                  </div>
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
-          </div>
-        </div>
-      </Dialog>
-    </Transition.Root>
-  );
-}