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,112 +7,151 @@ 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,
+    value,
-  setValue,
+    setValue,
-  nodeClass,
+    nodeClass,
-  setNodeClass,
+    setNodeClass,
-  dynamic
+    dynamic
 }: {
-  setValue: (value: string) => void;
+    setValue: (value: string) => void;
-  value: string;
+    value: string;
-  nodeClass: APIClassType;
+    nodeClass: APIClassType;
-  setNodeClass: (Class: APIClassType) => void;
+    setNodeClass: (Class: APIClassType) => void;
-  dynamic?: boolean;
+    dynamic?: boolean;
 }) {
-  const [open, setOpen] = useState(true);
+    const [open, setOpen] = useState(true);
-  const [code, setCode] = useState(value);
+    const [code, setCode] = useState(value);
-  const [loading, setLoading] = useState(false);
+    const [loading, setLoading] = useState(false);
-  const { dark } = useContext(darkContext);
+    const { dark } = useContext(darkContext);
-  const { setErrorData, setSuccessData } = useContext(alertContext);
+    const { setErrorData, setSuccessData } = useContext(alertContext);
-  const [activeTab, setActiveTab] = useState("0");
+    const [activeTab, setActiveTab] = useState("0");
-  const [error, setError] = useState<{ detail: { error: string, traceback: string } }>(null)
+    const [error, setError] = useState<{ detail: { error: string, traceback: string } }>(null)
-  const { closePopUp, setCloseEdit } = useContext(PopUpContext);
+    const { closePopUp, setCloseEdit } = useContext(PopUpContext);
-  const ref = useRef();
+    const ref = useRef();
-  function setModalOpen(x: boolean) {
+    function setModalOpen(x: boolean) {
-    setOpen(x);
+        setOpen(x);
-    if (x === false) {
+        if (x === false) {
-      setTimeout(() => {
+            setTimeout(() => {
-        setCloseEdit("editcode");
+                setCloseEdit("editcode");
-        closePopUp();
+                closePopUp();
-      }, 300);
+            }, 300);
-    }
-  }
-  console.log(dynamic);
-
-  function handleClick() {
-    setLoading(true);
-    if (!dynamic) {
-      postValidateCode(code)
-        .then((apiReturn) => {
-          setLoading(false);
-          if (apiReturn.data) {
-            let importsErrors = apiReturn.data.imports.errors;
-            let funcErrors = apiReturn.data.function.errors;
-            if (funcErrors.length === 0 && importsErrors.length === 0) {
-              setSuccessData({
-                title: "Code is ready to run",
-              });
-              // setValue(code);
-            } else {
-              if (funcErrors.length !== 0) {
-                setErrorData({
-                  title: "There is an error in your function",
-                  list: funcErrors,
-                });
-              }
-              if (importsErrors.length !== 0) {
-                setErrorData({
-                  title: "There is an error in your imports",
-                  list: importsErrors,
-                });
-              }
-            }
-          } else {
-            setErrorData({
-              title: "Something went wrong, please try again",
-            });
-          }
-        })
-        .catch((_) => {
-          setLoading(false);
-          setErrorData({
-            title: "There is something wrong with this code, please review it",
-          });
-        });
-    }
-    else {
-      postCustomComponent(code, nodeClass).then((apiReturn) => {
-        const { data } = apiReturn;
-        if (data) {
-          setNodeClass(data);
-          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);
-      });
     }
+    useEffect(() => {
+        setValue(code);
+    }, [code, setValue])
 
-  }
+    function handleClick() {
-  const tabs = [{ name: "code" }, { name: "errors" }]
+        setLoading(true);
+        if (!dynamic) {
+            postValidateCode(code)
+                .then((apiReturn) => {
+                    setLoading(false);
+                    if (apiReturn.data) {
+                        let importsErrors = apiReturn.data.imports.errors;
+                        let funcErrors = apiReturn.data.function.errors;
+                        if (funcErrors.length === 0 && importsErrors.length === 0) {
+                            setSuccessData({
+                                title: "Code is ready to run",
+                            });
+                            // setValue(code);
+                        } else {
+                            if (funcErrors.length !== 0) {
+                                setErrorData({
+                                    title: "There is an error in your function",
+                                    list: funcErrors,
+                                });
+                            }
+                            if (importsErrors.length !== 0) {
+                                setErrorData({
+                                    title: "There is an error in your imports",
+                                    list: importsErrors,
+                                });
+                            }
+                        }
+                    } else {
+                        setErrorData({
+                            title: "Something went wrong, please try again",
+                        });
+                    }
+                })
+                .catch((_) => {
+                    setLoading(false);
+                    setErrorData({
+                        title: "There is something wrong with this code, please review it",
+                    });
+                });
+        }
+        else {
+            postCustomComponent(code, nodeClass).then((apiReturn) => {
+                const { data } = apiReturn;
+                if (data) {
+                    setNodeClass(data);
+                    setModalOpen(false);
+                }
+            }).catch((err) => {
+                setError(err.response.data);
+            });
+        }
 
-  return (
+    }
-    <TwoColumnsModal open={true} setOpen={setOpen}>
+    const tabs = [{ name: "code" }, { name: "errors" }]
-        <TwoColumnsModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>{"A"}</TwoColumnsModal.Header>
+
-        <TwoColumnsModal.First>{"A"}</TwoColumnsModal.First>
+    return (
-        <TwoColumnsModal.Second>{"B"}</TwoColumnsModal.Second>
+        <BaseModal open={true} setOpen={setOpen}>
-    </TwoColumnsModal>
+            <BaseModal.Header description={CODE_PROMPT_DIALOG_SUBTITLE}>
-  );
+                <DialogTitle className="flex items-center">
+                    <span className="pr-2">Edit Code</span>
+                    <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>
+    );
 }