From 486e02b56d84820c176f3523377f7022c7f68849 Mon Sep 17 00:00:00 2001
From: Priyan Vaithilingam <priyanmuthu@gmail.com>
Date: Wed, 3 May 2023 13:42:35 -0400
Subject: [PATCH] supporting deleting Text fields in nodes

---
 chain-forge/src/ScriptNode.js     | 18 +++++++++++-------
 chain-forge/src/TextFieldsNode.js | 31 +++++++++++++++++++++++++------
 2 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/chain-forge/src/ScriptNode.js b/chain-forge/src/ScriptNode.js
index 9103ba9..3bcbe4b 100644
--- a/chain-forge/src/ScriptNode.js
+++ b/chain-forge/src/ScriptNode.js
@@ -6,12 +6,17 @@ import NodeLabel from './NodeLabelComponent'
 const ScriptNode = ({ data, id }) => {
     const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
     const delButtonId = 'del-';
+    var [idCounter, setIDCounter] = useState(0);
+    const get_id = () => {
+        setIDCounter(idCounter + 1);
+        return 'f' + idCounter.toString();
+    }
+    
     // Handle a change in a scripts' input.
     const handleInputChange = useCallback((event) => {
         // Update the data for this script node's id.
         let new_data = { 'scriptFiles': { ...data.scriptFiles } };
         new_data.scriptFiles[event.target.id] = event.target.value;
-        console.log(new_data);
         setDataPropsForNode(id, new_data);
     }, [data, id, setDataPropsForNode]);
 
@@ -23,7 +28,7 @@ const ScriptNode = ({ data, id }) => {
         delete new_data.scriptFiles[item_id];
         // if the new_data is empty, initialize it with one empty field
         if (Object.keys(new_data.scriptFiles).length === 0) {
-            new_data.scriptFiles['f0'] = '';
+            new_data.scriptFiles[get_id()] = '';
         }
         console.log(new_data);
         setDataPropsForNode(id, new_data);
@@ -33,12 +38,12 @@ const ScriptNode = ({ data, id }) => {
     const [scriptFiles, setScriptFiles] = useState([]);
     useEffect(() => {
         if (!data.scriptFiles)
-            setDataPropsForNode(id, { scriptFiles: { f0: '' } });
-    }, [data.scriptFiles, id, setDataPropsForNode]);
+            setDataPropsForNode(id, { scriptFiles: { [get_id()]: '' } });
+    }, []);
 
     // Whenever 'data' changes, update the input fields to reflect the current state.
     useEffect(() => {
-        const f = data.scriptFiles ? Object.keys(data.scriptFiles) : ['f0'];
+        const f = data.scriptFiles ? Object.keys(data.scriptFiles) : [];
         setScriptFiles(f.map((i) => {
             const val = data.scriptFiles ? data.scriptFiles[i] : '';
             return (
@@ -52,9 +57,8 @@ const ScriptNode = ({ data, id }) => {
     // Add a field
     const handleAddField = useCallback(() => {
         // Update the data for this script node's id.
-        const num_files = data.scriptFiles ? Object.keys(data.scriptFiles).length : 0;
         let new_data = { 'scriptFiles': { ...data.scriptFiles } };
-        new_data.scriptFiles['f' + num_files.toString()] = "";
+        new_data.scriptFiles[get_id()] = "";
         setDataPropsForNode(id, new_data);
     }, [data, id, setDataPropsForNode]);
 
diff --git a/chain-forge/src/TextFieldsNode.js b/chain-forge/src/TextFieldsNode.js
index 5226bf8..f10e1f1 100644
--- a/chain-forge/src/TextFieldsNode.js
+++ b/chain-forge/src/TextFieldsNode.js
@@ -28,6 +28,13 @@ const TextFieldsNode = ({ data, id }) => {
 
   const [templateVars, setTemplateVars] = useState(data.vars || []);
   const setDataPropsForNode = useStore((state) => state.setDataPropsForNode);
+  const delButtonId = 'del-';
+  var [idCounter, setIDCounter] = useState(0);
+
+  const get_id = () => {
+    setIDCounter(idCounter + 1);
+    return 'f' + idCounter.toString();
+  }
 
   // Handle a change in a text fields' input.
   const handleInputChange = useCallback((event) => {
@@ -58,31 +65,43 @@ const TextFieldsNode = ({ data, id }) => {
     setDataPropsForNode(id, new_data);
   }, [data, id, setDataPropsForNode, templateVars]);
 
+  // Handle delete script file.
+  const handleDelete = useCallback((event) => {
+    // Update the data for this script node's id.
+    let new_data = { 'fields': { ...data.fields } };
+    var item_id = event.target.id.substring(delButtonId.length);
+    delete new_data.fields[item_id];
+    // if the new_data is empty, initialize it with one empty field
+    if (Object.keys(new_data.fields).length === 0) {
+      new_data.fields[get_id()] = '';
+    }
+    setDataPropsForNode(id, new_data);
+  }, [data, id, setDataPropsForNode]);
+
   // Initialize fields (run once at init)
   const [fields, setFields] = useState([]);
   useEffect(() => {
     if (!data.fields)
-      setDataPropsForNode(id, { fields: {f0: ''}} );
+      setDataPropsForNode(id, { fields: {[get_id()]: ''}} );
   }, []);
 
   // Whenever 'data' changes, update the input fields to reflect the current state.
   useEffect(() => {
-    const f = data.fields ? Object.keys(data.fields) : ['f0'];
+    const f = data.fields ? Object.keys(data.fields) : [];
     setFields(f.map((i) => {
       const val = data.fields ? data.fields[i] : '';
       return (
         <div className="input-field" key={i}>
-          <textarea id={i} name={i} className="text-field-fixed nodrag" rows="2" cols="40" defaultValue={val} onChange={handleInputChange} />
+          <textarea id={i} name={i} className="text-field-fixed nodrag" rows="2" cols="40" value={val} onChange={handleInputChange} /><button id={delButtonId + i} onClick={handleDelete}>x</button>
         </div>
     )}));
-  }, [data.fields, handleInputChange]);
+  }, [data.fields, handleInputChange, handleDelete]);
 
   // Add a field
   const handleAddField = useCallback(() => {
     // Update the data for this text fields' id.
-    const num_fields = data.fields ? Object.keys(data.fields).length : 0;
     let new_data = { 'fields': {...data.fields} };
-    new_data.fields['f'+num_fields.toString()] = "";
+    new_data.fields[get_id()] = "";
     setDataPropsForNode(id, new_data);
   }, [data, id, setDataPropsForNode]);