Fixed bug on dictAreaModal where the state is kept even not saving

src/frontend/src/components/dictComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect } from "react";
 import { DictComponentType } from "../../types/components";
 
 import DictAreaModal from "../../modals/dictAreaModal";
@@ -13,7 +13,6 @@ export default function DictComponent({
   id = "",
 }: DictComponentType): JSX.Element {
   // Create a reference to the value
-  const ref = useRef(value);
 
   useEffect(() => {
     if (disabled) {
@@ -21,10 +20,6 @@ export default function DictComponent({
     }
   }, [disabled]);
 
-  useEffect(() => {
-    // Update the reference value
-    ref.current = value;
-  }, [value]);
   return (
     <div
       className={classNames(
@@ -35,7 +30,7 @@ export default function DictComponent({
       {
         <div className="flex w-full gap-3" data-testid={id}>
           <DictAreaModal
-            value={ref.current}
+            value={value}
             onChange={(obj) => {
               onChange(obj);
             }}

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -4,15 +4,15 @@ 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 { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import JsonView from "react18-json-view";
 import "react18-json-view/src/dark.css";
 import "react18-json-view/src/style.css";
 import IconComponent from "../../components/genericIconComponent";
-import { Button } from "../../components/ui/button";
 import { CODE_DICT_DIALOG_SUBTITLE } from "../../constants/constants";
 import { useDarkStore } from "../../stores/darkStore";
 import BaseModal from "../baseModal";
+import { cloneDeep } from "lodash";
 
 export default function DictAreaModal({
   children,
@@ -25,14 +25,26 @@ export default function DictAreaModal({
 }): JSX.Element {
   const [open, setOpen] = useState(false);
   const isDark = useDarkStore((state) => state.dark);
-  const ref = useRef(value);
+  const [myValue, setMyValue] = useState(value);
 
   useEffect(() => {
-    if (value) ref.current = value;
+    setMyValue(value);
-  }, [value]);
+  }, [value, open]);
 
   return (
-    <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
+    <BaseModal
+      size="medium-h-full"
+      open={open}
+      setOpen={setOpen}
+      onSubmit={
+        onChange
+          ? () => {
+              onChange(myValue);
+              setOpen(false);
+            }
+          : undefined
+      }
+    >
       <BaseModal.Trigger className="h-full">{children}</BaseModal.Trigger>
       <BaseModal.Header
         description={onChange ? CODE_DICT_DIALOG_SUBTITLE : null}
@@ -54,31 +66,14 @@ export default function DictAreaModal({
             className={!isDark ? "json-view-white" : "json-view-dark"}
             editable={!!onChange}
             enableClipboard
-            onEdit={(edit) => {
-              ref.current = edit["src"];
-            }}
             onChange={(edit) => {
-              ref.current = edit["src"];
+              setMyValue(edit.src);
             }}
-            src={ref.current}
+            src={cloneDeep(myValue)}
           />
-          {onChange && (
-            <div className="flex h-fit w-full justify-end">
-              <Button
-                data-testid="save-dict-button"
-                className="mt-3"
-                type="submit"
-                onClick={() => {
-                  onChange(ref.current);
-                  setOpen(false);
-                }}
-              >
-                Save
-              </Button>
-            </div>
-          )}
         </div>
       </BaseModal.Content>
+      <BaseModal.Footer submit={onChange ? { label: "Save" } : undefined} />
     </BaseModal>
   );
 }