Merge pull request #32 from oslabs-beta/rydang/componentname

tree snapshot is better formatted and now contains name

Author: joshua0308

package/timeJump.js

@@ -13,7 +13,7 @@ module.exports = (origin, mode) => {
     const originNode = traverseTree(origin.tree, coords);
 
     // set the state of the origin tree
-    originNode.component.setState(target.component.state, () => {
+    originNode.component.setState(target.state, () => {
       // iterate through new children once state has been set
       target.children.forEach((child, i) => {
         jump(child, coords.concat(i));

package/tree.js

@@ -1,9 +1,14 @@
 class Tree {
-  constructor(component) {
+  constructor(component, useStateInstead = false, name) {
     // special case when component is root
     // give it a special state = 'root'
     // a setState function that just calls the callback instantly
-    this.component = (component === 'root') ? { state: 'root', setState: (partial, callback) => callback() } : component;
+    if (!useStateInstead) {
+      this.component = (component === 'root') ? { state: 'root', setState: (partial, callback) => callback() } : component;
+    } else {
+      this.state = component;
+      this.name = name;
+    }
     this.children = [];
   }
 
@@ -14,12 +19,9 @@ class Tree {
   }
 
   // deep copies only the state of each component and creates a new tree
-  getCopy(copy = new Tree(null)) {
-    const { state } = this.component;
-    if (!copy.component) copy.component = { state };
-
+  getCopy(copy = new Tree('root', true, 'root')) {
     // copy state of children
-    copy.children = this.children.map(child => new Tree({ state: child.component.state }));
+    copy.children = this.children.map(child => new Tree(child.component.state, true, child.component.constructor.name));
 
     // copy children's children recursively
     this.children.forEach((child, i) => child.getCopy(copy.children[i]));
@@ -30,10 +32,13 @@ class Tree {
   print() {
     const children = ['children: '];
     this.children.forEach((child) => {
-      children.push(child.component.state);
+      children.push(child.state || child.component.state);
     });
-    if (children.length === 1) console.log(this.component.state);
-    else console.log(this.component.state, ...children);
+    if (this.name) console.log(this.name);
+    if (children.length === 1) {
+      console.log(this.state || this.component.state);
+    }
+    else console.log(this.state || this.component.state, ...children);
     this.children.forEach((child) => {
       child.print();
     });