Fixed all bugs with tweaks on API modal

src/frontend/src/components/codeTabsComponent/index.tsx

@@ -254,8 +254,7 @@ export default function CodeTabsComponent({
                                                             n
                                                           ].value
                                                     }
-                                                    onChange={(k) => {}}
+                                                    onChange={(k) => {
-                                                    onAddInput={(k) => {
                                                       tweaks.buildTweakObject(
                                                         t["data"]["id"],
                                                         k,

src/frontend/src/components/floatComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 
 export default function FloatComponent({
@@ -11,6 +11,12 @@ export default function FloatComponent({
   const min = 0;
   const max = 1;
 
+  const [myValue, setMyValue] = useState(value);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   // Clear component state
   useEffect(() => {
     if (disabled) {
@@ -33,7 +39,7 @@ export default function FloatComponent({
           }
         }}
         max={max}
-        value={value ?? ""}
+        value={myValue ?? ""}
         className={
           "nopan nodrag noundo nocopy " +
           (editNode
@@ -45,6 +51,7 @@ export default function FloatComponent({
         }
         onChange={(e) => {
           onChange(e.target.value);
+          setMyValue(e.target.value);
         }}
       />
     </div>

src/frontend/src/components/inputComponent/index.tsx

@@ -10,6 +10,11 @@ export default function InputComponent({
   editNode = false,
 }: InputComponentType) {
   const [pwdVisible, setPwdVisible] = useState(false);
+  const [myValue, setMyValue] = useState(value);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
 
   // Clear component state
   useEffect(() => {
@@ -21,7 +26,7 @@ export default function InputComponent({
   return (
     <div className={disabled ? "input-component-div" : "relative"}>
       <input
-        value={value}
+        value={myValue}
         className={classNames(
           disabled ? " input-disable " : "",
           password && !pwdVisible && value !== "" ? " text-clip password " : "",
@@ -33,6 +38,7 @@ export default function InputComponent({
         placeholder={password && editNode ? "Key" : "Type something..."}
         onChange={(e) => {
           onChange(e.target.value);
+          setMyValue(e.target.value);
         }}
       />
       {password && (

src/frontend/src/components/inputListComponent/index.tsx

@@ -10,7 +10,6 @@ export default function InputListComponent({
   onChange,
   disabled,
   editNode = false,
-  onAddInput,
 }: InputListComponentType) {
   const [inputList, setInputList] = useState(value ?? [""]);
   const { closeEdit } = useContext(PopUpContext);

src/frontend/src/components/intComponent/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { FloatComponentType } from "../../types/components";
 
 export default function IntComponent({
@@ -9,6 +9,12 @@ export default function IntComponent({
 }: FloatComponentType) {
   const min = 0;
 
+  const [myValue, setMyValue] = useState(value);
+
+  useEffect(() => {
+    setMyValue(value);
+  }, [value]);
+
   // Clear component state
   useEffect(() => {
     if (disabled) {
@@ -50,7 +56,7 @@ export default function IntComponent({
             e.target.value = min.toString();
           }
         }}
-        value={value ?? ""}
+        value={myValue ?? ""}
         className={
           "nopan nodrag noundo nocopy " +
           (editNode
@@ -60,6 +66,7 @@ export default function IntComponent({
         placeholder={editNode ? "Integer number" : "Type an integer number"}
         onChange={(e) => {
           onChange(e.target.value);
+          setMyValue(e.target.value);
         }}
       />
     </div>

src/frontend/src/components/toggleShadComponent/index.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import { ToggleComponentType } from "../../types/components";
 import { Switch } from "../ui/switch";
 
@@ -25,6 +26,13 @@ export default function ToggleShadComponent({
       scaleX = 1;
       scaleY = 1;
   }
+
+  const [myValue, setMyValue] = useState(enabled);
+
+  useEffect(() => {
+    setMyValue(enabled);
+  }, [enabled]);
+
   return (
     <div className={disabled ? "pointer-events-none cursor-not-allowed " : ""}>
       <Switch
@@ -33,9 +41,10 @@ export default function ToggleShadComponent({
         }}
         disabled={disabled}
         className=""
-        checked={enabled}
+        checked={myValue}
         onCheckedChange={(x: boolean) => {
           setEnabled(x);
+          setMyValue(x);
         }}
       ></Switch>
     </div>

src/frontend/src/types/components/index.ts

@@ -45,7 +45,6 @@ export type InputListComponentType = {
   onChange: (value: string[]) => void;
   disabled: boolean;
   editNode?: boolean;
-  onAddInput?: (value?: string[]) => void;
 };
 
 export type TextAreaComponentType = {

src/frontend/src/utils/utils.ts

@@ -275,7 +275,7 @@ export function buildTweakObject(tweak) {
     });
   });
 
-  const tweakString = JSON.stringify(tweak, null, 2);
+  const tweakString = JSON.stringify(tweak.at(-1), null, 2);
   return tweakString;
 }