From 12ca5c9b88c1b6a35bbc74bdc7beb25ec7774142 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Sat, 27 May 2023 13:37:22 -0300
Subject: [PATCH] first version of generic modal

---
 .../src/components/promptComponent/index.tsx  |  10 +-
 .../components/textAreaComponent/index.tsx    |  10 +-
 .../src/modals/genericModal/index.tsx         | 161 ++++++++++++++++++
 3 files changed, 175 insertions(+), 6 deletions(-)
 create mode 100644 src/frontend/src/modals/genericModal/index.tsx

diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 6182bd075..96c91baac 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -4,7 +4,7 @@ import { PopUpContext } from "../../contexts/popUpContext";
 import CodeAreaModal from "../../modals/codeAreaModal";
 import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
-import PromptAreaModal from "../../modals/promptModal";
+import GenericModal from "../../modals/genericModal";
 
 export default function PromptAreaComponent({
   value,
@@ -29,8 +29,10 @@ export default function PromptAreaComponent({
         <span
           onClick={() => {
             openPopUp(
-              <PromptAreaModal
+              <GenericModal
                 value={myValue}
+                buttonText="Check & Save"
+								modalTitle="Edit Prompt"
                 setValue={(t: string) => {
                   setMyValue(t);
                   onChange(t);
@@ -48,8 +50,10 @@ export default function PromptAreaComponent({
         <button
           onClick={() => {
             openPopUp(
-              <PromptAreaModal
+              <GenericModal
                 value={myValue}
+                buttonText="Check & Save"
+								modalTitle="Edit Prompt"
                 setValue={(t: string) => {
                   setMyValue(t);
                   onChange(t);
diff --git a/src/frontend/src/components/textAreaComponent/index.tsx b/src/frontend/src/components/textAreaComponent/index.tsx
index a2fbad22a..edc21f044 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -1,8 +1,8 @@
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useContext, useEffect, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
-import TextAreaModal from "../../modals/textAreaModal";
 import { TextAreaComponentType } from "../../types/components";
+import GenericModal from "../../modals/genericModal";
 
 export default function TextAreaComponent({
   value,
@@ -23,7 +23,9 @@ export default function TextAreaComponent({
         <span
           onClick={() => {
             openPopUp(
-              <TextAreaModal
+              <GenericModal
+                buttonText="Finishing Editing" 
+                modalTitle="Edit Text"
                 value={myValue}
                 setValue={(t: string) => {
                   setMyValue(t);
@@ -42,7 +44,9 @@ export default function TextAreaComponent({
         <button
           onClick={() => {
             openPopUp(
-              <TextAreaModal
+              <GenericModal
+                buttonText="Finishing Editing" 
+                modalTitle="Edit Text"
                 value={myValue}
                 setValue={(t: string) => {
                   setMyValue(t);
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
new file mode 100644
index 000000000..7f2033164
--- /dev/null
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -0,0 +1,161 @@
+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 { checkPrompt } from "../../controllers/API";
+import { alertContext } from "../../contexts/alertContext";
+export default function PromptAreaModal({
+	value,
+	setValue,
+	buttonText,
+	modalTitle
+}: {
+	setValue: (value: string) => void;
+	value: string;
+	buttonText: string;
+	modalTitle: string;
+}) {
+
+	const [myButtonText, setmyButtonText] = useState(buttonText);
+	const [myModalTitle, setMyModalTitle] = useState(modalTitle);
+	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-gray-500 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"
+											>
+												{myModalTitle}
+											</Dialog.Title>
+										</div>
+									</div>
+									<div className="h-full w-full bg-gray-200 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-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={() => {
+												checkPrompt(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],
+														});
+													});
+											}}
+										>
+											{myButtonText}
+										</button>
+									</div>
+								</div>
+							</Dialog.Panel>
+						</Transition.Child>
+					</div>
+				</div>
+			</Dialog>
+		</Transition.Root>
+	);
+}
\ No newline at end of file