feat(modals): add BaseModal component for reusable modal functionality

fix(codeAreaModal): refactor codeAreaModal to use BaseModal component for consistency and reusability

src/frontend/src/modals/baseModal/index.tsx

@@ -0,0 +1,69 @@
+import { ReactNode, useContext } from "react";
+
+import React from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components/ui/dialog";
+import { PopUpContext } from "../../contexts/popUpContext";
+
+type ContentProps = { children: ReactNode };
+type HeaderProps = { children: ReactNode; description: string };
+
+const Content: React.FC<ContentProps> = ({ children }) => {
+  return <div className="h-full w-full">{children}</div>;
+};
+
+const Header: React.FC<{ children: ReactNode; description: string }> = ({
+  children,
+  description,
+}) => {
+  return (
+    <DialogHeader>
+      <DialogTitle className="flex items-center">{children}</DialogTitle>
+      <DialogDescription>{description}</DialogDescription>
+    </DialogHeader>
+  );
+};
+interface BaseModalProps {
+  children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+function BaseModal({ open, setOpen, children }: BaseModalProps) {
+  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
+
+  function setModalOpen(x: boolean) {
+    setOpen(x);
+    if (x === false) {
+      setTimeout(() => {
+        setCloseEdit("editcode");
+        closePopUp();
+      }, 300);
+    }
+  }
+  const headerChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Header
+  );
+  const ContentChild = React.Children.toArray(children).find(
+    (child) => (child as React.ReactElement).type === Content
+  );
+  //UPDATE COLORS AND STYLE CLASSSES
+  return (
+    <Dialog open={true} onOpenChange={setModalOpen}>
+      <DialogTrigger className="hidden"></DialogTrigger>
+      <DialogContent className="min-w-[80vw]">
+        {headerChild}
+        <div className="mt-2 flex h-[80vh] w-full ">{ContentChild}</div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+BaseModal.Content = Content;
+BaseModal.Header = Header;
+export default BaseModal;

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

@@ -1,28 +1,20 @@
-// organize-imports-ignore
+import { DialogTitle } from "@radix-ui/react-dialog";
-import { useContext, useRef, useState } from "react";
+import "ace-builds/src-noconflict/ace";
-import { PopUpContext } from "../../contexts/popUpContext";
-import AceEditor from "react-ace";
 import "ace-builds/src-noconflict/ext-language_tools";
 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 { TerminalSquare } from "lucide-react";
+import { useContext, useEffect, useRef, useState } from "react";
+import AceEditor from "react-ace";
 import { Button } from "../../components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
 import { alertContext } from "../../contexts/alertContext";
 import { darkContext } from "../../contexts/darkContext";
+import { PopUpContext } from "../../contexts/popUpContext";
 import { postValidateCode } from "../../controllers/API";
 import { APIClassType } from "../../types/api";
+import BaseModal from "../baseModal";
 
 export default function CodeAreaModal({
   value,
@@ -39,18 +31,15 @@ export default function CodeAreaModal({
   const [code, setCode] = useState(value);
   const [loading, setLoading] = useState(false);
   const { dark } = useContext(darkContext);
+  const { closePopUp } = useContext(PopUpContext);
   const { setErrorData, setSuccessData } = useContext(alertContext);
-  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
+  const [error, setError] = useState<{
+    detail: { error: string; traceback: string };
+  }>(null);
   const ref = useRef();
-  function setModalOpen(x: boolean) {
+  useEffect(() => {
-    setOpen(x);
+    setValue(code);
-    if (x === false) {
+  }, [code, setValue]);
-      setTimeout(() => {
-        setCloseEdit("editcode");
-        closePopUp();
-      }, 300);
-    }
-  }
 
   function handleClick() {
     setLoading(true);
@@ -65,7 +54,7 @@ export default function CodeAreaModal({
               title: "Code is ready to run",
             });
             setValue(code);
-            setModalOpen(false);
+            setOpen((old) => !old);
           } else {
             if (funcErrors.length !== 0) {
               setErrorData({
@@ -95,10 +84,8 @@ export default function CodeAreaModal({
   }
 
   return (
-    <Dialog open={true} onOpenChange={setModalOpen}>
+    <BaseModal open={true} setOpen={setOpen}>
-      <DialogTrigger></DialogTrigger>
+      <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
-      <DialogContent className="min-w-[80vw]">
-        <DialogHeader>
         <DialogTitle className="flex items-center">
           <span className="pr-2">Edit Code</span>
           <TerminalSquare
@@ -107,10 +94,10 @@ export default function CodeAreaModal({
             aria-hidden="true"
           />
         </DialogTitle>
-          <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
+      </BaseModal.Header>
-        </DialogHeader>
+      <BaseModal.Content>
-
+        <div className="flex h-full w-full flex-col transition-all">
-        <div className="code-area-modal-editor-div">
+          <div className="h-full w-full">
             <AceEditor
               value={code}
               mode="python"
@@ -127,14 +114,30 @@ export default function CodeAreaModal({
               className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
             />
           </div>
-
+          <div
-        <DialogFooter>
+            className={
+              "w-full transition-all delay-500 " +
+              (error?.detail.error !== undefined ? "h-2/6" : "h-0")
+            }
+          >
+            <div className="mt-1 h-full w-full overflow-x-clip overflow-y-scroll text-left custom-scroll">
+              <h1 className="text-lg text-destructive">
+                {error?.detail?.error}
+              </h1>
+              <div className="ml-2 w-full break-all text-sm text-status-red">
+                <pre className="w-full whitespace-pre-wrap break-all">
+                  {error?.detail?.traceback}
+                </pre>
+              </div>
+            </div>
+          </div>
+          <div className="flex h-fit w-full justify-end">
             <Button className="mt-3" onClick={handleClick} type="submit">
-            {/* {loading?(<Loading/>):'Check & Save'} */}
               Check & Save
             </Button>
-        </DialogFooter>
+          </div>
-      </DialogContent>
+        </div>
-    </Dialog>
+      </BaseModal.Content>
+    </BaseModal>
   );
 }