fix(codeAreaComponent): add key prop to CodeAreaModal component to fix React warning

feat(baseModal): create a reusable BaseModal component to be used in different modals
fix(codeAreaModal): add missing imports and fix indentation in CodeAreaModal component
refactor(codeAreaModal): refactor handleClick function to handle dynamic and non-dynamic code validation and execution
refactor(codeAreaModal): refactor useEffect to update value prop when code state changes

src/frontend/src/components/codeAreaComponent/index.tsx

@@ -63,6 +63,7 @@ export default function CodeAreaComponent({
           onClick={() => {
             openPopUp(
               <CodeAreaModal
+              key={myValue}
               dynamic={dynamic}
               setNodeClass={setNodeClass}
                 value={myValue}

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

@@ -12,19 +12,13 @@ import {
 import React from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 
-type FirstProps = {children:ReactNode};
+type ContentProps = {children:ReactNode};
-type SecondProps = {children:ReactNode};
 type HeaderProps = {children:ReactNode,description:string};
 
-const First: React.FC<{ children: ReactNode }> = ({ children }) => {
+
+const Content: React.FC<ContentProps> = ({ children }) => {
     return (
-        <div className="w-2/5 h-full">
+        <div className="w-full h-full">
-            {children}
-        </div>)
-}
-const Second: React.FC<{ children: ReactNode }> = ({ children }) => {
-    return (
-        <div className="w-full">
             {children}
         </div>)
 }
@@ -39,16 +33,16 @@ const Header: React.FC<{ children: ReactNode, description:string }> = ({ childre
         </DialogHeader>
     )
 }
-interface TwoColumnsModalProps {
+interface BaseModalProps {
-    children: [React.ReactElement<FirstProps>, React.ReactElement<SecondProps>, React.ReactElement<HeaderProps>];
+    children: [React.ReactElement<ContentProps>, React.ReactElement<HeaderProps>];
     open: boolean;
     setOpen: (open: boolean) => void;
   }
-function TwoColumnsModal({
+function BaseModal({
     open,
     setOpen,
     children,
-}: TwoColumnsModalProps) {
+}: BaseModalProps) {
    const {closePopUp, setCloseEdit} = useContext(PopUpContext)
 
     function setModalOpen(x: boolean) {
@@ -60,14 +54,10 @@ function TwoColumnsModal({
           }, 300);
         }
       }
-    const firstChild = React.Children.toArray(children).find(
-        (child) => (child as React.ReactElement).type === First
-    );
-
-    const secondChild = React.Children.toArray(children).find(
-        (child) => (child as React.ReactElement).type === Second
-    );
     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={open} onOpenChange={setModalOpen}>
@@ -75,15 +65,14 @@ function TwoColumnsModal({
             <DialogContent className="min-w-[80vw]">
                 {headerChild}
                 <div className="flex h-[80vh] w-full mt-2 ">
-                    {firstChild}
+                    {ContentChild}
-                    {secondChild}
                 </div>
             </DialogContent>
         </Dialog>
     );
 
 }
-TwoColumnsModal.First = First;
+
-TwoColumnsModal.Second = Second;
+BaseModal.Content = Content;
-TwoColumnsModal.Header = Header;
+BaseModal.Header = Header;
-export default TwoColumnsModal;
+export default BaseModal;

src/frontend/src/modals/codeAreaModal/v2.tsx

@@ -1,4 +1,4 @@
-import { useContext, useRef, useState } from "react";
+import { useContext, useEffect, useRef, useState } from "react";
 import { PopUpContext } from "../../contexts/popUpContext";
 import 'ace-builds/src-noconflict/ace';
 import { darkContext } from "../../contexts/darkContext";
@@ -7,13 +7,17 @@ import { alertContext } from "../../contexts/alertContext";
 import { Button } from "../../components/ui/button";
 import { CODE_PROMPT_DIALOG_SUBTITLE } from "../../constants";
 import { APIClassType } from "../../types/api";
-import {
+import TwoColumnsModal from "../baseModal";
-  Tabs,
+import { DialogTitle } from "@radix-ui/react-dialog";
-  TabsContent,
+import { TerminalSquare } from "lucide-react";
-  TabsList,
+import AceEditor from "react-ace";
-  TabsTrigger,
+import "ace-builds/src-noconflict/mode-python";
-} from "../../components/ui/tabs";
+import "ace-builds/src-noconflict/theme-github";
-import TwoColumnsModal from "../twoColumnsModal";
+import "ace-builds/src-noconflict/theme-twilight";
+import "ace-builds/src-noconflict/ext-language_tools";
+import 'ace-builds/src-noconflict/ace';
+import { XCircle } from 'lucide-react';
+import BaseModal from "../baseModal";
 
 export default function CodeAreaModal({
     value,
@@ -46,7 +50,9 @@ export default function CodeAreaModal({
             }, 300);
         }
     }
-  console.log(dynamic);
+    useEffect(() => {
+        setValue(code);
+    }, [code, setValue])
 
     function handleClick() {
         setLoading(true);
@@ -97,10 +103,6 @@ export default function CodeAreaModal({
                     setModalOpen(false);
                 }
             }).catch((err) => {
-        setErrorData({
-          title: "There is something wrong with this code, please see the error on the errors tab",
-        });
-        console.log(err.response.data);
                 setError(err.response.data);
             });
         }
@@ -109,10 +111,47 @@ export default function CodeAreaModal({
     const tabs = [{ name: "code" }, { name: "errors" }]
 
     return (
-    <TwoColumnsModal open={true} setOpen={setOpen}>
+        <BaseModal open={true} setOpen={setOpen}>
-        <TwoColumnsModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>{"A"}</TwoColumnsModal.Header>
+            <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
-        <TwoColumnsModal.First>{"A"}</TwoColumnsModal.First>
+                <DialogTitle className="flex items-center">
-        <TwoColumnsModal.Second>{"B"}</TwoColumnsModal.Second>
+                    <span className="pr-2">Edit Code</span>
-    </TwoColumnsModal>
+                    <TerminalSquare
+                        strokeWidth={1.5}
+                        className="h-6 w-6 text-primary pl-1 "
+                        aria-hidden="true"
+                    />
+                </DialogTitle></BaseModal.Header>
+            <BaseModal.Content>
+                <div className="w-full h-full flex 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="w-full rounded-lg h-full custom-scroll border-[1px] border-gray-300 dark:border-gray-600"
+                        />
+                    </div>
+                    <div className={"w-full transition-all delay-500 " + (error?.detail.error !== undefined ? "h-2/6" : "h-0")}>
+                        <div className="w-full h-full overflow-auto custom-scroll text-left mt-1">
+                            <h1 className="text-destructive text-lg">{error?.detail?.error}</h1>
+                            <div className="text-status-red text-sm ml-2"><pre>{error?.detail?.traceback}</pre></div>
+                        </div>
+                    </div>
+                    <div className="h-fit w-full flex justify-end">
+                        <Button className="mt-3" onClick={handleClick} type="submit">
+                            Check & Save
+                        </Button></div>
+                </div>
+            </BaseModal.Content>
+        </BaseModal>
     );
 }