From e183d8f4e462c5dc5f188270fd65d3c5e364dd38 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Wed, 27 Sep 2023 15:30:22 -0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20fix(parameterComponent):=20remov?=
 =?UTF-8?q?e=20console.log=20statement=20for=20newValue=20variable=20to=20?=
 =?UTF-8?q?clean=20up=20code=20=F0=9F=94=A7=20fix(keypairListComponent):?=
 =?UTF-8?q?=20refactor=20handleChangeKey=20and=20handleChangeValue=20funct?=
 =?UTF-8?q?ions=20to=20use=20useRef=20hook=20for=20value=20comparison=20an?=
 =?UTF-8?q?d=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/parameterComponent/index.tsx   |  2 --
 .../components/keypairListComponent/index.tsx | 25 +++++++++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
index 5c4e7ca30..6968d6472 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
@@ -88,8 +88,6 @@ export default function ParameterComponent({
   const handleOnNewValue = (
     newValue: string | string[] | boolean | Object[]
   ): void => {
-    console.log(newValue);
-
     let newData = cloneDeep(data);
     newData.node!.template[name].value = newValue;
     setData(newData);
diff --git a/src/frontend/src/components/keypairListComponent/index.tsx b/src/frontend/src/components/keypairListComponent/index.tsx
index a2ef4f26c..f1e93e7fc 100644
--- a/src/frontend/src/components/keypairListComponent/index.tsx
+++ b/src/frontend/src/components/keypairListComponent/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { KeyPairListComponentType } from "../../types/components";
 
 import _ from "lodash";
@@ -19,8 +19,17 @@ export default function KeypairListComponent({
     }
   }, [disabled]);
 
+  const ref = useRef(value.length === 0 ? [{ "": "" }] : value);
+
+  useEffect(() => {
+    if (JSON.stringify(value) !== JSON.stringify(ref.current)) {
+      ref.current = value;
+      onChange(value);
+    }
+  }, [value]);
+
   const handleChangeKey = (event, idx) => {
-    const newInputList = _.cloneDeep(value);
+    const newInputList = _.cloneDeep(ref.current);
     const oldKey = Object.keys(newInputList[idx])[0];
     const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
     newInputList[idx] = updatedObj;
@@ -28,7 +37,7 @@ export default function KeypairListComponent({
   };
 
   const handleChangeValue = (newValue, idx) => {
-    const newInputList = _.cloneDeep(value);
+    const newInputList = _.cloneDeep(ref.current);
     const key = Object.keys(newInputList[idx])[0];
     newInputList[idx][key] = newValue;
     onChange(newInputList);
@@ -37,11 +46,11 @@ export default function KeypairListComponent({
   return (
     <div
       className={classNames(
-        value?.length > 1 && editNode ? "my-1" : "",
+        ref.current?.length > 1 && editNode ? "my-1" : "",
         "flex h-full flex-col gap-3"
       )}
     >
-      {value?.map((obj, index) => {
+      {ref.current?.map((obj, index) => {
         return Object.keys(obj).map((key, idx) => {
           return (
             <div key={idx} className="flex w-full gap-3">
@@ -72,10 +81,10 @@ export default function KeypairListComponent({
                 }
               />
 
-              {index === value.length - 1 ? (
+              {index === ref.current.length - 1 ? (
                 <button
                   onClick={() => {
-                    let newInputList = _.cloneDeep(value);
+                    let newInputList = _.cloneDeep(ref.current);
                     newInputList.push({ "": "" });
                     onChange(newInputList);
                   }}
@@ -88,7 +97,7 @@ export default function KeypairListComponent({
               ) : (
                 <button
                   onClick={() => {
-                    let newInputList = _.cloneDeep(value);
+                    let newInputList = _.cloneDeep(ref.current);
                     newInputList.splice(index, 1);
                     onChange(newInputList);
                   }}