✔Delete Method: Incomplete

Author: archiesbhoir

src/NodeViewer.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import {Treebeard} from 'react-treebeard';
+import {Treebeard, animations} from 'react-treebeard';
 import Modal from 'react-modal';
 import './Tree.css'
 
@@ -17,9 +17,9 @@ const customStyles = {
       overflow              : 'hidden'
     }
   };
+  // Modal.setAppElement('#root')
 
-
-const data = {
+let data = {
     name: 'root',
     toggled: true,
     children: [
@@ -56,50 +56,83 @@ export default class Tree extends Component {
         super(props);
         this.state = {
           data,
-          modalIsOpen: false,
+          modalAddIsOpen: false,
           value: "",
-          activeNode:{}
+          deleteNode: "",
+          activeNode:{},
+          elToDel: {}
         };
     }
 
-    openModal = (node)=> {
-      this.setState({ modalIsOpen: true, activeNode:node });
+    openAddModal = (node) => {
+      this.setState({ modalAddIsOpen: true, activeNode:node });
+      const found = this.state.data.children.filter((data)=> data.name === node.name)
+      console.log(found);
+      // this.findParent(node);
     }
-   
-   
-    closeModal = ()=> {
-      this.setState({modalIsOpen: false});
+    closeModal = () => {
+      this.setState({modalAddIsOpen: false, modalDeleteIsOpen: false});
     }
 
-    addIcon = (node) => { 
-      console.log(node);
-      
-        node.map((child)=> {
+    addIcon = (node) => {
+         
+        node.map((child, index)=> {
         const name1 = child.name;
         (name1.indexOf('.') === -1) ?
-          child.name = <div><i className="far fa-folder px-2"></i>
-            {name1} <span onClick={(e)=>this.openModal(child,e)}><i className="far fa-plus-square pl-2"/></span></div>
-          : child.name = <div><i className="far fa-file-code px-2"></i> {name1}</div>
+          child.name = <div ref={selected => this.selected = selected}>
+                <i className="far fa-folder px-2"></i>
+                {name1} <span onClick={(e)=>this.openAddModal(child, e)}><i className="far fa-plus-square pl-2"/></span>
+                <span><i onClick={(e)=>this.deleteElement(child, index, e)} className="far fa-trash-alt pl-2"></i></span> 
+              </div>
+          : child.name = <div>
+                <i className="far fa-file-code px-2"></i> {name1}
+                <span><i onClick={(e)=>this.deleteElement(child, index, e)} className="far fa-trash-alt pl-2"></i></span>
+              </div>
         if(child.children){
-          this.addIcon(child.children)       
+          this.addIcon(child.children);       
         } 
       })
     }
-
     componentWillMount = () => {
       this.addIcon(this.state.data.children)
     }
 
+    // findParent = (item) => {
+    //   const data = this.state.data;
+    //   let member, i, array;
+    //   for (member in data) {
+    //       if (data.hasOwnProperty(member) && typeof data[member] === 'object' && data[member] instanceof Array) {
+    //           array = data[member];
+    //           for(i = 0; i < array.length; i += 1) {
+    //               if (array[i] === item) {
+    //                 console.log(array)
+    //                 if(array.children){
+    //                   this.findParent(array[i].children[0])
+    //                   debugger;
+    //                 }//
+    //                   return array;
+    //               }
+    //           }
+    //       }
+    //   }
+    // }
 
     handleSubmit = (e) =>{
       e.preventDefault();
       if(this.state.activeNode.children){
         this.state.activeNode.children.push({name: this.state.value});
       }
       const newData = this.state.data;
-      // this.setState({data: newData});
+      this.setState({data: newData});
       this.closeModal();
     }
+    deleteElement = (_,index,e) => {
+      e.preventDefault();
+      console.log(index);
+      const newData = this.state.data.children.splice(index,1);
+      this.setState({data: newData})
+    }
+
     handleChange(event) {
       this.setState({value: event.target.value});
     }
@@ -120,22 +153,34 @@ export default class Tree extends Component {
         return (
           <React.Fragment>
             <Modal
-              isOpen={this.state.modalIsOpen}
+              isOpen={this.state.modalAddIsOpen}
               onAfterOpen={this.afterOpenModal}
               onRequestClose={this.closeModal}
               style={customStyles}
-              contentLabel="Example Modal"
+              ariaHideApp={false}
+              contentLabel="Add Modal"
             >
               <form onSubmit={(e)=>{this.handleSubmit(e)}}>
-                <input id= "child-name" type="text" value={this.state.value} onChange={(e)=>{this.handleChange(e)}} />
+                <input id= "child-name" type="text" value={this.state.value} onChange={(e)=>{this.handleChange(e)}} required/>
                 <input className='btn btn-md btn-dark submit' type="submit" value="ENTER"/>
               </form>
-
             </Modal>
+            {/* <Modal
+              isOpen={this.state.modalDeleteIsOpen}
+              onRequestClose={this.closeModal}
+              style={customStyles}
+              contentLabel="Delete Modal"
+            >
+              <form onSubmit={(e)=>{this.handleSubmit(e)}}>
+                {this.state.activeNode.}
+                <input className='btn btn-md btn-dark submit' type="submit" value="ENTER"/>
+              </form>
+            </Modal> */}
             <Treebeard
               data={this.state.data}
               onToggle={this.onToggle}
               style = {style}
+              animations = {animations}
             />
           </React.Fragment>
 

src/components/File.js

@@ -141,4 +141,4 @@ export default class XML extends Component {
           </div>
         )
     }
-}
+}