From 6803cd1d8c7621006b12e0c2eb77397522587a8c Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Tue, 26 Sep 2023 11:21:30 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(dictComponent):=20fix=20useE?=
 =?UTF-8?q?ffect=20dependency=20to=20onChange=20instead=20of=20value=20to?=
 =?UTF-8?q?=20prevent=20unnecessary=20re-rendering?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 fix(keypairListComponent): add rows prop to Textarea components to fix rendering issue

🐛 fix(EditNodeModal): remove unused state variables and fix rendering issue with dict and NestedDict types

🐛 fix(dictAreaModal): fix useEffect dependency to dictObj instead of value to prevent unnecessary re-rendering
---
 .../src/components/dictComponent/index.tsx    |   2 +-
 .../components/keypairListComponent/index.tsx |   2 +
 .../src/modals/EditNodeModal/index.tsx        | 124 +++++++++---------
 .../src/modals/dictAreaModal/index.tsx        |   7 +-
 4 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/src/frontend/src/components/dictComponent/index.tsx b/src/frontend/src/components/dictComponent/index.tsx
index 981372506..5596f9b34 100644
--- a/src/frontend/src/components/dictComponent/index.tsx
+++ b/src/frontend/src/components/dictComponent/index.tsx
@@ -19,7 +19,7 @@ export default function DictComponent({
 
   useEffect(() => {
     if (value) onChange(value);
-  }, [value]);
+  }, [onChange]);
 
   return (
     <div
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index 9491b62ce..61a0d6851 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -50,6 +50,7 @@ export default function KeypairListComponent({
           return (
             <div key={idx} className="flex w-full gap-3">
               <Textarea
+                rows={1}
                 value={key.trim()}
                 className={classNames(
                   editNode ? "input-edit-node" : "",
@@ -66,6 +67,7 @@ export default function KeypairListComponent({
               />
 
               <Textarea
+                rows={1}
                 value={obj[key]}
                 className={editNode ? "input-edit-node" : ""}
                 placeholder="Type a value..."
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 8aeb81818..c70a0d60c 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -30,6 +30,7 @@ import { NodeDataType } from "../../types/flow";
 import { TabsState } from "../../types/tabs";
 import {
   convertObjToArray,
+  convertValuesToNumbers,
   hasDuplicateKeys,
 } from "../../utils/reactflowUtils";
 import { classNames } from "../../utils/utils";
@@ -80,24 +81,7 @@ const EditNodeModal = forwardRef(
       onClose!(modalOpen);
     }, [modalOpen]);
 
-    const [obj, setObj] = useState({
-      arr: ["test", 123456, false, null],
-      boolean: false,
-      longString:
-        "long string long string long string long string long string long string",
-      number: 123456,
-      try: {
-        k1: 123,
-        k2: "123",
-        k3: false,
-      },
-      string: "string",
-    });
-
     const [errorDuplicateKey, setErrorDuplicateKey] = useState(false);
-    const [dictArr, setDictArr] = useState([
-      { yourKey: "yourValue" },
-    ] as Object[]);
 
     return (
       <BaseModal
@@ -163,7 +147,11 @@ const EditNodeModal = forwardRef(
                               myData.node.template[templateParam].type ===
                                 "file" ||
                               myData.node.template[templateParam].type ===
-                                "int")
+                                "int" ||
+                              myData.node.template[templateParam].type ===
+                                "dict" ||
+                              myData.node.template[templateParam].type ===
+                                "NestedDict")
                         )
                         .map((templateParam, index) => (
                           <TableRow key={index} className="h-10">
@@ -195,52 +183,6 @@ const EditNodeModal = forwardRef(
                                         handleOnNewValue(value, templateParam);
                                       }}
                                     />
-                                  ) : myData.node?.template[templateParam]
-                                      .type === "NestedDict" ? (
-                                    <div className="mt-2 w-full">
-                                      <DictComponent
-                                        disabled={disabled}
-                                        editNode={true}
-                                        value={obj}
-                                        onChange={(newValue) => {
-                                          setObj(newValue);
-                                        }}
-                                      />
-                                    </div>
-                                  ) : myData.node?.template[templateParam]
-                                      .type === "dict" ? (
-                                    <div className="mt-2 w-full">
-                                      <KeypairListComponent
-                                        disabled={disabled}
-                                        editNode={false}
-                                        value={
-                                          myData.node.template[templateParam]
-                                            .value?.length === 0 ||
-                                          !myData.node.template[templateParam]
-                                            .value
-                                            ? dictArr
-                                            : convertObjToArray(
-                                                myData.node.template[
-                                                  templateParam
-                                                ].value
-                                              )
-                                        }
-                                        duplicateKey={errorDuplicateKey}
-                                        onChange={(newValue) => {
-                                          setErrorDuplicateKey(
-                                            hasDuplicateKeys(newValue)
-                                          );
-                                          if (hasDuplicateKeys(newValue)) {
-                                            setDictArr(newValue);
-                                          } else {
-                                            setDictArr(newValue);
-                                            myData.node!.template[
-                                              templateParam
-                                            ].value = newValue;
-                                          }
-                                        }}
-                                      />
-                                    </div>
                                   ) : myData.node.template[templateParam]
                                       .multiline ? (
                                     <TextAreaComponent
@@ -272,6 +214,60 @@ const EditNodeModal = forwardRef(
                                     />
                                   )}
                                 </div>
+                              ) : myData.node?.template[templateParam].type ===
+                                "NestedDict" ? (
+                                <div className="mt-2 w-full">
+                                  <DictComponent
+                                    disabled={disabled}
+                                    editNode={true}
+                                    value={
+                                      myData.node!.template[templateParam]
+                                        .value ?? {
+                                        yourkey: "value",
+                                      }
+                                    }
+                                    onChange={(newValue) => {
+                                      myData.node!.template[
+                                        templateParam
+                                      ].value = newValue;
+                                      handleOnNewValue(newValue, templateParam);
+                                    }}
+                                  />
+                                </div>
+                              ) : myData.node?.template[templateParam].type ===
+                                "dict" ? (
+                                <div className="mt-2 w-full">
+                                  <KeypairListComponent
+                                    disabled={disabled}
+                                    editNode={true}
+                                    value={
+                                      myData.node!.template[templateParam].value
+                                        ?.length === 0 ||
+                                      !myData.node!.template[templateParam]
+                                        .value
+                                        ? [{ "": "" }]
+                                        : convertObjToArray(
+                                            myData.node!.template[templateParam]
+                                              .value
+                                          )
+                                    }
+                                    duplicateKey={errorDuplicateKey}
+                                    onChange={(newValue) => {
+                                      const valueToNumbers =
+                                        convertValuesToNumbers(newValue);
+                                      myData.node!.template[
+                                        templateParam
+                                      ].value = valueToNumbers;
+                                      setErrorDuplicateKey(
+                                        hasDuplicateKeys(valueToNumbers)
+                                      );
+                                      handleOnNewValue(
+                                        valueToNumbers,
+                                        templateParam
+                                      );
+                                    }}
+                                  />
+                                </div>
                               ) : myData.node?.template[templateParam].type ===
                                 "bool" ? (
                                 <div className="ml-auto">
diff --git a/src/frontend/src/modals/dictAreaModal/index.tsx b/src/frontend/src/modals/dictAreaModal/index.tsx
index fdf0f5bb1..291c634f2 100644
--- a/src/frontend/src/modals/dictAreaModal/index.tsx
+++ b/src/frontend/src/modals/dictAreaModal/index.tsx
@@ -22,8 +22,10 @@ export default function DictAreaModal({
   const [dictObj, setDictObj] = useState(value);
 
   useEffect(() => {
+    console.log(value);
+
     if (value) setDictObj(value);
-  }, [value]);
+  }, [dictObj]);
 
   return (
     <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
@@ -46,6 +48,9 @@ export default function DictAreaModal({
             onEdit={(edit) => {
               setDictObj(edit["src"]);
             }}
+            onChange={(edit) => {
+              setDictObj(edit["src"]);
+            }}
             src={dictObj}
           />
           <div className="flex h-fit w-full justify-end">