From bf0ab14f6746af05bad879383e2177c6ded9d49b Mon Sep 17 00:00:00 2001
From: Gabriel Almeida <gabriel@logspace.ai>
Date: Sat, 27 May 2023 17:04:12 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20style(promptComponent,=20textAre?=
 =?UTF-8?q?aComponent):=20fix=20indentation=20and=20whitespace=20The=20cha?=
 =?UTF-8?q?nges=20in=20these=20files=20are=20purely=20cosmetic,=20fixing?=
 =?UTF-8?q?=20indentation=20and=20whitespace=20to=20improve=20code=20reada?=
 =?UTF-8?q?bility.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔨 refactor(genericModal/index.tsx): improve code readability and add destructuring to props
The code has been refactored to improve readability and make it easier to understand. Destructuring has been added to the props to make it easier to access the values.
---
 .../src/components/promptComponent/index.tsx  |   4 +-
 .../components/textAreaComponent/index.tsx    |   4 +-
 .../src/modals/genericModal/index.tsx         | 297 +++++++++---------
 3 files changed, 152 insertions(+), 153 deletions(-)

diff --git a/src/frontend/src/components/promptComponent/index.tsx b/src/frontend/src/components/promptComponent/index.tsx
index 96c91baac..10ac41281 100644
--- a/src/frontend/src/components/promptComponent/index.tsx
+++ b/src/frontend/src/components/promptComponent/index.tsx
@@ -32,7 +32,7 @@ export default function PromptAreaComponent({
               <GenericModal
                 value={myValue}
                 buttonText="Check & Save"
-								modalTitle="Edit Prompt"
+                modalTitle="Edit Prompt"
                 setValue={(t: string) => {
                   setMyValue(t);
                   onChange(t);
@@ -53,7 +53,7 @@ export default function PromptAreaComponent({
               <GenericModal
                 value={myValue}
                 buttonText="Check & Save"
-								modalTitle="Edit Prompt"
+                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 edc21f044..b4ec85fe3 100644
--- a/src/frontend/src/components/textAreaComponent/index.tsx
+++ b/src/frontend/src/components/textAreaComponent/index.tsx
@@ -24,7 +24,7 @@ export default function TextAreaComponent({
           onClick={() => {
             openPopUp(
               <GenericModal
-                buttonText="Finishing Editing" 
+                buttonText="Finishing Editing"
                 modalTitle="Edit Text"
                 value={myValue}
                 setValue={(t: string) => {
@@ -45,7 +45,7 @@ export default function TextAreaComponent({
           onClick={() => {
             openPopUp(
               <GenericModal
-                buttonText="Finishing Editing" 
+                buttonText="Finishing Editing"
                 modalTitle="Edit Text"
                 value={myValue}
                 setValue={(t: string) => {
diff --git a/src/frontend/src/modals/genericModal/index.tsx b/src/frontend/src/modals/genericModal/index.tsx
index 7f2033164..b804803ea 100644
--- a/src/frontend/src/modals/genericModal/index.tsx
+++ b/src/frontend/src/modals/genericModal/index.tsx
@@ -6,156 +6,155 @@ import { darkContext } from "../../contexts/darkContext";
 import { checkPrompt } from "../../controllers/API";
 import { alertContext } from "../../contexts/alertContext";
 export default function PromptAreaModal({
-	value,
-	setValue,
-	buttonText,
-	modalTitle
+  value,
+  setValue,
+  buttonText,
+  modalTitle,
 }: {
-	setValue: (value: string) => void;
-	value: string;
-	buttonText: string;
-	modalTitle: string;
+  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);
+    }
+  }
 
-	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>
 
-	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
+        <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>
+  );
+}