🔧 fix(parameterComponent): remove console.log statement for newValue variable to clean up code

🔧 fix(keypairListComponent): refactor handleChangeKey and handleChangeValue functions to use useRef hook for value comparison and update
This commit is contained in:
Cristhian Zanforlin Lousa 2023-09-27 15:30:22 -03:00
commit e183d8f4e4
2 changed files with 17 additions and 10 deletions

View file

@ -88,8 +88,6 @@ export default function ParameterComponent({
const handleOnNewValue = ( const handleOnNewValue = (
newValue: string | string[] | boolean | Object[] newValue: string | string[] | boolean | Object[]
): void => { ): void => {
console.log(newValue);
let newData = cloneDeep(data); let newData = cloneDeep(data);
newData.node!.template[name].value = newValue; newData.node!.template[name].value = newValue;
setData(newData); setData(newData);

View file

@ -1,4 +1,4 @@
import { useEffect } from "react"; import { useEffect, useRef } from "react";
import { KeyPairListComponentType } from "../../types/components"; import { KeyPairListComponentType } from "../../types/components";
import _ from "lodash"; import _ from "lodash";
@ -19,8 +19,17 @@ export default function KeypairListComponent({
} }
}, [disabled]); }, [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 handleChangeKey = (event, idx) => {
const newInputList = _.cloneDeep(value); const newInputList = _.cloneDeep(ref.current);
const oldKey = Object.keys(newInputList[idx])[0]; const oldKey = Object.keys(newInputList[idx])[0];
const updatedObj = { [event.target.value]: newInputList[idx][oldKey] }; const updatedObj = { [event.target.value]: newInputList[idx][oldKey] };
newInputList[idx] = updatedObj; newInputList[idx] = updatedObj;
@ -28,7 +37,7 @@ export default function KeypairListComponent({
}; };
const handleChangeValue = (newValue, idx) => { const handleChangeValue = (newValue, idx) => {
const newInputList = _.cloneDeep(value); const newInputList = _.cloneDeep(ref.current);
const key = Object.keys(newInputList[idx])[0]; const key = Object.keys(newInputList[idx])[0];
newInputList[idx][key] = newValue; newInputList[idx][key] = newValue;
onChange(newInputList); onChange(newInputList);
@ -37,11 +46,11 @@ export default function KeypairListComponent({
return ( return (
<div <div
className={classNames( className={classNames(
value?.length > 1 && editNode ? "my-1" : "", ref.current?.length > 1 && editNode ? "my-1" : "",
"flex h-full flex-col gap-3" "flex h-full flex-col gap-3"
)} )}
> >
{value?.map((obj, index) => { {ref.current?.map((obj, index) => {
return Object.keys(obj).map((key, idx) => { return Object.keys(obj).map((key, idx) => {
return ( return (
<div key={idx} className="flex w-full gap-3"> <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 <button
onClick={() => { onClick={() => {
let newInputList = _.cloneDeep(value); let newInputList = _.cloneDeep(ref.current);
newInputList.push({ "": "" }); newInputList.push({ "": "" });
onChange(newInputList); onChange(newInputList);
}} }}
@ -88,7 +97,7 @@ export default function KeypairListComponent({
) : ( ) : (
<button <button
onClick={() => { onClick={() => {
let newInputList = _.cloneDeep(value); let newInputList = _.cloneDeep(ref.current);
newInputList.splice(index, 1); newInputList.splice(index, 1);
onChange(newInputList); onChange(newInputList);
}} }}