✔✔Add element to tree

Author: archiesbhoir

package-lock.json

@@ -3,13 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.19",
+    "@fortawesome/free-solid-svg-icons": "^5.9.0",
+    "@fortawesome/react-fontawesome": "^0.1.4",
     "bootstrap": "^4.3.1",
     "codemirror": "^5.48.0",
     "react": "^16.8.6",
     "react-bootstrap": "^1.0.0-beta.9",
     "react-codemirror": "^1.0.0",
     "react-codemirror2": "^6.0.0",
     "react-dom": "^16.8.6",
+    "react-modal": "^3.8.2",
     "react-router-dom": "^5.0.1",
     "react-scripts": "3.0.1",
     "react-treebeard": "^3.2.4"

package.json

@@ -10,6 +10,9 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!--Fontawesome CDN-->
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

public/index.html

@@ -24,5 +24,4 @@ export default class App extends Component {
       </React.Fragment>
     );
   }
-}
-
+}

src/App.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+
+const HELP_MSG = 'Select A Node To See Its Data Structure Here...';
+
+const NodeViewer = ({node}) => {
+  let json = JSON.stringify(node, null, 4);
+
+  if (!json) {
+    json = HELP_MSG;
+  }
+
+  return <div>{json}</div>;
+};
+
+NodeViewer.propTypes = {
+  node: PropTypes.object
+};
+
+export default NodeViewer;

src/NodeViewer.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const File = (props) => {
+    return <div>HI {props.name} <span onClick={props.openModal}><i className="far fa-plus-square"/></span></div>;
+}
+
+export default File;

src/components/File.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Folder = (props) => {
+    return <div>HI {props.name} <span onClick={props.openModal}><i className="far fa-plus-square"/></span></div>;
+}
+
+export default Folder;

src/components/Folder.js

@@ -1,33 +1,49 @@
 import React, { Component } from 'react'
 import {Treebeard} from 'react-treebeard';
+import Modal from 'react-modal';
+import Folder from './Folder'
+import File from './File'
+
+const customStyles = {
+    content : {
+      top                   : '50%',
+      left                  : '50%',
+      right                 : 'auto',
+      bottom                : 'auto',
+      marginRight           : '-50%',
+      transform             : 'translate(-50%, -50%)',
+      width                 : '300px',  
+      height                : '300px',  
+    }
+  };
+
 
 const data = {
     name: 'root',
     toggled: true,
     children: [
         {
-            name: 'parent1',
+            name: 'App',
             children: [
-                { name: 'child1' },
-                { name: 'child2' }
+                { name: 'server.js' },
+                { name: 'data.js' }
             ]
         },
         {
-            name: 'teacher1',
-            // loading: true,
+            name: 'styles',
             children: [
-                {name: 'student1'},
-                {name: 'student2'},
+                {name: 'header.css'},
+                {name: 'footer.css'},
             ]
         },
         {
-            name: 'parent',
+            name: 'client',
             children: [
                 {
-                    name: 'nested parent',
+                    name: 'App',
                     children: [
-                        { name: 'nested child 1' },
-                        { name: 'nested child 2' }
+                        { name: 'index.js' },
+                        { name: 'context.js' }
                     ]
                 }
             ]
@@ -37,9 +53,44 @@ const data = {
 export default class Tree extends Component {
     constructor(props){
         super(props);
-        this.state = {data};
+        this.state = {
+          data,
+          modalIsOpen: false,
+          value: "Enter",
+          activeNode:{}
+        };
     }
-    
+
+    openModal = (node)=> {
+      console.log(node);
+      this.setState({modalIsOpen: true,activeNode:node});
+    }
+   
+   
+    closeModal = ()=> {
+      this.setState({modalIsOpen: false});
+    }
+
+
+    componentWillMount = () => {
+      this.state.data.children.map((child, index)=> {
+        const name1 = child.name;
+        child.name = <div>HI {name1} <span onClick={(e)=>this.openModal(child,e)}><i className="far fa-plus-square"/></span></div>;
+      })
+    }
+
+    handleSubmit = (e) =>{
+      e.preventDefault();
+      const name = e.target.value;
+      this.state.activeNode.children.push({name:this.state.value});
+      const newData = this.state.data;
+      this.setState({data: newData});
+      this.closeModal()
+    }
+    handleChange(event) {
+      this.setState({value: event.target.value});
+    }
+  
     onToggle = (node, toggled) => {
         const {cursor, data} = this.state;
         if (cursor) {
@@ -52,13 +103,29 @@ export default class Tree extends Component {
         this.setState(() => ({cursor: node, data: Object.assign({}, data)}));
     }
     render() {
-        const {data} = this.state;
+        // const {data} = this.state;
         return (
-                <Treebeard
-                data={data}
-                onToggle={this.onToggle}
-                style = {style}
-                />
+          <React.Fragment>
+            <Modal
+            isOpen={this.state.modalIsOpen}
+            onAfterOpen={this.afterOpenModal}
+            onRequestClose={this.closeModal}
+            style={customStyles}
+            contentLabel="Example Modal"
+            >
+              <form onSubmit={(e)=>{this.handleSubmit(e)}}>
+              <input type="text" value={this.state.value} onChange={(e)=>{this.handleChange(e)}} />
+                <input type="submit" value="ENTER"/>
+              </form>
+
+            </Modal>
+            <Treebeard
+              data={this.state.data}
+              onToggle={this.onToggle}
+              style = {style}
+            />
+          </React.Fragment>
+                
         )
     }
 }