diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx index 9c9337920..359f847bb 100644 --- a/src/frontend/src/components/codeTabsComponent/index.tsx +++ b/src/frontend/src/components/codeTabsComponent/index.tsx @@ -1,3 +1,4 @@ +import { cloneDeep } from "lodash"; import { useContext, useState } from "react"; import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; @@ -54,6 +55,7 @@ export default function CodeTabsComponent({ }; }) { const [isCopied, setIsCopied] = useState(false); + const [data, setData] = useState(flow["data"]["nodes"]); const [openAccordion, setOpenAccordion] = useState([]); const { dark } = useContext(darkContext); @@ -185,7 +187,7 @@ export default function CodeTabsComponent({ : "overflow-hidden" )} > - {flow["data"]["nodes"].map((t: any, index) => ( + {data.map((t: any, index) => (
{tweaks.tweaksList.current.includes(t["data"]["id"]) && ( { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, @@ -274,16 +286,29 @@ export default function CodeTabsComponent({ { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, @@ -302,13 +327,27 @@ export default function CodeTabsComponent({ t.data.node.template[n] .password ?? false } - value={tweaks.getValue( + value={ + !t.data.node.template[n] + .value || t.data.node.template[n] - .value, - t.data, - t.data.node.template[n] - )} + .value === "" + ? "" + : t.data.node.template[ + n + ].value + } onChange={(k) => { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, @@ -328,9 +367,16 @@ export default function CodeTabsComponent({ .value } setEnabled={(e) => { - t.data.node.template[ - n - ].value = e; + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = e; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], e, @@ -345,12 +391,13 @@ export default function CodeTabsComponent({ "file" ? (
@@ -382,13 +429,26 @@ export default function CodeTabsComponent({ { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, @@ -410,18 +470,31 @@ export default function CodeTabsComponent({ .options } onSelect={(k) => { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, t.data.node.template[n] ); }} - value={tweaks.getValue( + value={ + !t.data.node.template[n] + .value || t.data.node.template[n] - .value, - t.data, - t.data.node.template[n] - )} + .value === "" + ? "" + : t.data.node.template[n] + .value + } >
) : t.data.node.template[n].type === @@ -430,13 +503,26 @@ export default function CodeTabsComponent({ { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, @@ -449,25 +535,40 @@ export default function CodeTabsComponent({ "prompt" ? (
{ + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, @@ -493,13 +594,27 @@ export default function CodeTabsComponent({ { + setData((old) => { + let newInputList = + cloneDeep(old); + newInputList[ + index + ].data.node.template[ + n + ].value = k; + return newInputList; + }); tweaks.buildTweakObject( t["data"]["id"], k, diff --git a/src/frontend/src/components/floatComponent/index.tsx b/src/frontend/src/components/floatComponent/index.tsx index e30e57f8e..278b3d203 100644 --- a/src/frontend/src/components/floatComponent/index.tsx +++ b/src/frontend/src/components/floatComponent/index.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useEffect } from "react"; import { FloatComponentType } from "../../types/components"; export default function FloatComponent({ @@ -11,12 +11,6 @@ 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) { @@ -39,7 +33,7 @@ export default function FloatComponent({ } }} max={max} - value={myValue ?? ""} + value={value ?? ""} className={ "nopan nodrag noundo nocopy " + (editNode @@ -51,7 +45,6 @@ export default function FloatComponent({ } onChange={(e) => { onChange(e.target.value); - setMyValue(e.target.value); }} />
diff --git a/src/frontend/src/components/inputComponent/index.tsx b/src/frontend/src/components/inputComponent/index.tsx index 53a19a1af..682d5716c 100644 --- a/src/frontend/src/components/inputComponent/index.tsx +++ b/src/frontend/src/components/inputComponent/index.tsx @@ -10,11 +10,6 @@ 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(() => { @@ -26,7 +21,7 @@ export default function InputComponent({ return (
{ onChange(e.target.value); - setMyValue(e.target.value); }} /> {password && ( diff --git a/src/frontend/src/components/inputListComponent/index.tsx b/src/frontend/src/components/inputListComponent/index.tsx index 7df286b15..ed563b735 100644 --- a/src/frontend/src/components/inputListComponent/index.tsx +++ b/src/frontend/src/components/inputListComponent/index.tsx @@ -1,8 +1,7 @@ -import { useContext, useEffect, useState } from "react"; +import { useEffect } from "react"; import { InputListComponentType } from "../../types/components"; import _ from "lodash"; -import { PopUpContext } from "../../contexts/popUpContext"; import IconComponent from "../genericIconComponent"; export default function InputListComponent({ @@ -11,21 +10,11 @@ export default function InputListComponent({ disabled, editNode = false, }: InputListComponentType) { - const [inputList, setInputList] = useState(value ?? [""]); - const { closeEdit } = useContext(PopUpContext); - - useEffect(() => { - if (value) { - setInputList(value); - } - }, [closeEdit]); - useEffect(() => { if (disabled) { - setInputList([""]); onChange([""]); } - }, [disabled, onChange]); + }, [disabled]); return (
- {inputList.map((i, idx) => { + {value.map((i, idx) => { return (
{ - setInputList((old) => { - let newInputList = _.cloneDeep(inputList); - newInputList[idx] = e.target.value; - return newInputList; - }); - onChange(inputList); + let newInputList = _.cloneDeep(value); + newInputList[idx] = e.target.value; + onChange(newInputList); }} /> - {idx === inputList.length - 1 ? ( + {idx === value.length - 1 ? (
diff --git a/src/frontend/src/components/toggleShadComponent/index.tsx b/src/frontend/src/components/toggleShadComponent/index.tsx index aa11a22bb..95ef6d062 100644 --- a/src/frontend/src/components/toggleShadComponent/index.tsx +++ b/src/frontend/src/components/toggleShadComponent/index.tsx @@ -1,4 +1,3 @@ -import { useEffect, useState } from "react"; import { ToggleComponentType } from "../../types/components"; import { Switch } from "../ui/switch"; @@ -27,12 +26,6 @@ export default function ToggleShadComponent({ scaleY = 1; } - const [myValue, setMyValue] = useState(enabled); - - useEffect(() => { - setMyValue(enabled); - }, [enabled]); - return (
{ setEnabled(x); - setMyValue(x); }} >
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx index 141cb8dfb..3e1cd32a3 100644 --- a/src/frontend/src/modals/EditNodeModal/index.tsx +++ b/src/frontend/src/modals/EditNodeModal/index.tsx @@ -22,11 +22,10 @@ import { TableRow, } from "../../components/ui/table"; import { limitScrollFieldsModal } from "../../constants/constants"; -import { PopUpContext } from "../../contexts/popUpContext"; import { TabsContext } from "../../contexts/tabsContext"; import { typesContext } from "../../contexts/typesContext"; import { NodeDataType } from "../../types/flow"; -import { classNames, getRandomKeyByssmm } from "../../utils/utils"; +import { classNames } from "../../utils/utils"; import BaseModal from "../baseModal"; const EditNodeModal = forwardRef( @@ -48,7 +47,6 @@ const EditNodeModal = forwardRef( const [myData, setMyData] = useState(data); const { setTabsState, tabId } = useContext(TabsContext); const { reactFlowInstance } = useContext(typesContext); - const { setCloseEdit } = useContext(PopUpContext); let disabled = reactFlowInstance?.getEdges().some((e) => e.targetHandle === data.id) ?? @@ -72,7 +70,6 @@ const EditNodeModal = forwardRef( useEffect(() => { setMyData(data); // reset data to what it is on node when opening modal - setCloseEdit(getRandomKeyByssmm().toString()); }, [modalOpen]); return (