Merge branch 'master' of https://github.com/oslabs-beta/ReacType

Author: aw2934

app/src/tree/TreeChart.tsx

@@ -1,7 +1,7 @@
-import React, { useRef, useEffect, useContext } from "react";
-import { select, hierarchy, tree, linkHorizontal } from "d3";
+import React, { useRef, useEffect, useContext } from 'react';
+import { select, hierarchy, tree, linkHorizontal } from 'd3';
 import cloneDeep from 'lodash/cloneDeep';
-import useResizeObserver from "./useResizeObserver";
+import useResizeObserver from './useResizeObserver';
 import StateContext from '../context/context';
 
 function usePrevious(value) {
@@ -12,7 +12,7 @@ function usePrevious(value) {
   return ref.current;
 }
 
-function TreeChart({ data }) {
+function TreeChart({ data }) { // data is components from state - passed in from BottomTabs
   const [state, dispatch] = useContext(StateContext);
   const canvasId = state.canvasFocus.componentId;
 
@@ -32,17 +32,25 @@ function TreeChart({ data }) {
     // loop over array
     for (let i = 0; i < arr.length; i++) {
       // if element is separator, remove it
-      if (arr[i].name === 'separator') arr.splice(i, 1);
+      if (arr[i].name === 'separator') {
+        arr.splice(i, 1);
+        i -= 1;
+      }
       // if element has a children array and that array has length, recursive call
-      if (arr[i].name === 'div' && arr[i].children.length) removeSeparators(arr[i].children);
+      else if ((arr[i].name === 'div' || arr[i].type === 'Component') && arr[i].children.length) {
+        // if element is a component, replace it with deep clone of latest version (to update with new HTML elements)
+        if (arr[i].type === 'Component') arr[i] = cloneDeep(data.find(component => component.name === arr[i].name));
+        removeSeparators(arr[i].children);
+      }
     }
     // return mutated array
     return arr;
   };
 
   // create a deep clone of data to avoid mutating the actual children array in removing separators
   const dataDeepClone = cloneDeep(data);
-  dataDeepClone.forEach((component) => {
+  // remove separators and update components to current versions
+  dataDeepClone.forEach(component => {
     removeSeparators(component.children);
   });
 
@@ -53,7 +61,7 @@ function TreeChart({ data }) {
     // but use getBoundingClientRect on initial render
     // (dimensions are null for the first render)
     const { width, height } =
-    dimensions || wrapperRef.current.getBoundingClientRect();
+      dimensions || wrapperRef.current.getBoundingClientRect();
     // transform hierarchical data
     const root = hierarchy(dataDeepClone[canvasId - 1]); // pass in clone here instead of data
     const treeLayout = tree().size([height, width - 125]);