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,46 +84,60 @@ 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]">
+        <DialogTitle className="flex items-center">
-        <DialogHeader>
+          <span className="pr-2">Edit Code</span>
-          <DialogTitle className="flex items-center">
+          <TerminalSquare
-            <span className="pr-2">Edit Code</span>
+            strokeWidth={1.5}
-            <TerminalSquare
+            className="h-6 w-6 pl-1 text-primary "
-              strokeWidth={1.5}
+            aria-hidden="true"
-              className="h-6 w-6 pl-1 text-primary "
-              aria-hidden="true"
-            />
-          </DialogTitle>
-          <DialogDescription>{CODE_PROMPT_DIALOG_SUBTITLE}</DialogDescription>
-        </DialogHeader>
-
-        <div className="code-area-modal-editor-div">
-          <AceEditor
-            value={code}
-            mode="python"
-            highlightActiveLine={true}
-            showPrintMargin={false}
-            fontSize={14}
-            showGutter
-            enableLiveAutocompletion
-            theme={dark ? "twilight" : "github"}
-            name="CodeEditor"
-            onChange={(value) => {
-              setCode(value);
-            }}
-            className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
           />
+        </DialogTitle>
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col transition-all">
+          <div className="h-full w-full">
+            <AceEditor
+              value={code}
+              mode="python"
+              highlightActiveLine={true}
+              showPrintMargin={false}
+              fontSize={14}
+              showGutter
+              enableLiveAutocompletion
+              theme={dark ? "twilight" : "github"}
+              name="CodeEditor"
+              onChange={(value) => {
+                setCode(value);
+              }}
+              className="h-full w-full rounded-lg border-[1px] border-gray-300 custom-scroll dark:border-gray-600"
+            />
+          </div>
+          <div
+            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">
+              Check & Save
+            </Button>
+          </div>
         </div>
-
+      </BaseModal.Content>
-        <DialogFooter>
+    </BaseModal>
-          <Button className="mt-3" onClick={handleClick} type="submit">
-            {/* {loading?(<Loading/>):'Check & Save'} */}
-            Check & Save
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
   );
 }