new-file upload fix (#420)

Co-authored-by: Faisal Nadeem <[email protected]>

Author: fn-faisal

src/components/B4ACodeTree/B4ACodeTree.react.js

@@ -65,6 +65,20 @@ export default class B4ACodeTree extends React.Component {
     this.loadFile()
   }
 
+  syncNewFileContent( tree, file ) {
+    return tree.map( (node) => {
+      if ( node.type === 'folder' || node.type === 'new-folder' ) {
+        node.children = this.syncNewFileContent(node.children, file);
+      }
+      else if ( file && node.data?.code !== file?.base64[0]
+          && node.text == file.fileList[0].name) {
+        node.data.code = file.base64[0];
+      }
+
+      return node;
+    });
+  }
+
   // load file and add on tree
   loadFile() {
     let file = this.state.newFile;
@@ -73,9 +87,13 @@ export default class B4ACodeTree extends React.Component {
       B4ATreeActions.addFilesOnTree(file, currentTree, this.state.selectedFolder)
       this.setState({ newFile: '', filesOnTree: file });
       this.handleTreeChanges()
+      const updatedFiles = this.syncNewFileContent(this.state.files, file);
+      this.props.setCurrentCode(updatedFiles);
     }
   }
 
+
+
   deleteFile() {
     if (this.state.nodeId) {
       B4ATreeActions.remove(`#${this.state.nodeId}`, true);
@@ -211,6 +229,7 @@ export default class B4ACodeTree extends React.Component {
 
     // current code.
     this.props.setCurrentCode(this.state.files);
+
   }
 
   render(){
@@ -297,7 +316,6 @@ export default class B4ACodeTree extends React.Component {
                       if (value) {
                         const parent = $('#tree').jstree('get_selected');
                         $('#tree').jstree("create_node", parent, { data: {code: 'data:plain/text;base64,IA=='}, type: 'new-file', text: value }, 'inside', false, false);
-                        // console.log($('#tree').jstree('get_selected', true), this.state.files);
                         this.setState({ files: $('#tree').jstree(true).get_json() });
                       }
                     })

src/components/B4ACodeTree/B4ATreeActions.js

@@ -141,16 +141,22 @@ const addFilesOnTree = async (files, currentCode, selectedFolder) => {
       // Select the folder to insert based on file extension. If is a js file,
       // insert on "cloud" folder, else insert on "public" folder. This logic is
       // a legacy from the old Cloud Code page
-      folder = obj.children.find(f => f === selectedFolder);
+      folder = obj.children[selectedFolder]
     }
     await verifyFileNames(folder, newTreeNodes[j]);
-    const position = 'inside';
-    const parent = $('#tree').jstree('get_selected');
-    $('#tree').jstree("create_node", parent, { data: newTreeNodes[j].data, type: 'new-file', text: newTreeNodes[j].text.name }, position, false, false);
+    addFileOnSelectedNode(newTreeNodes[j].text.name);
   }
   return currentCode;
 }
 
+const addFileOnSelectedNode = ( name, data = {code: 'data:plain/text;base64,IA=='} ) => {
+  let parent = $('#tree').jstree('get_selected');
+  if ( ['default', 'file', 'new-file'].includes($('#tree').jstree().get_node(parent).type) ) {
+    parent = $('#tree').jstree().get_node(parent).parent;
+  }
+  $('#tree').jstree("create_node", parent, { data, type: 'new-file', text: name }, 'inside', false, false);
+}
+
 // Configure the menu that is shown on right-click based on files type
 const customMenu = node => {
   let items = $.jstree.defaults.contextmenu.items();
@@ -250,5 +256,6 @@ export default {
   encodeFile,
   updateTreeContent,
   getExtension,
-  refreshEmptyFolderIcons
+  refreshEmptyFolderIcons,
+  addFileOnSelectedNode
 }