added types to bottom tab, removed dead imports, refactored D3 tree traversal

Author: ChristianEdwardPadilla

src/actions/components.js

@@ -1,4 +1,6 @@
-import { ComponentInt, ComponentsInt, PropInt } from '../utils/Interfaces.ts';
+import {
+  ComponentInt, ComponentsInt, PropInt, ChildInt,
+} from '../utils/Interfaces.ts';
 
 import {
   LOAD_INIT_DATA,
@@ -66,21 +68,23 @@ export const deleteComponent = ({
 componentId: number;
 stateComponents: ComponentsInt;
 }) => (dispatch: any) => {
-  // find all places where the "to be delted" is a child and do what u gotta do
-  stateComponents.forEach((parent) => {
-    parent.childrenArray.filter(child => child.childComponentId === componentId).forEach((child) => {
-      dispatch({
-        type: DELETE_CHILD,
-        payload: {
-          parentId: parent.id,
-          childId: child.childId,
-          calledFromDeleteComponent: true,
-        },
+  // find all places where the "to be deleted" is a child and do what u gotta do
+  stateComponents.forEach((parent: ComponentInt) => {
+    parent.childrenArray
+      .filter((child: ChildInt) => child.childComponentId === componentId)
+      .forEach((child: ChildInt) => {
+        dispatch({
+          type: DELETE_CHILD,
+          payload: {
+            parentId: parent.id,
+            childId: child.childId,
+            calledFromDeleteComponent: true,
+          },
+        });
       });
-    });
   });
 
-  // change focus to APp
+  // change focus to app
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
   // after taking care of the children delete the component
   dispatch({ type: DELETE_COMPONENT, payload: { componentId } });

src/actions/components.ts

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import '../public/styles/style.css';
 import AppContainer from '../containers/AppContainer.tsx';
 

src/components/App.tsx

@@ -96,31 +96,6 @@ class BottomTabs extends Component<PropsInt> {
     this.setState({ value });
   };
 
-  findChildren(component: ComponentInt, components: ComponentsInt, tree: any) {
-    if (!component.childrenArray.length) {
-      return tree;
-    }
-    const newChildrenArray = [];
-
-    for (let i = 0; i < component.childrenArray.length; i++) {
-      const name = component.childrenArray[i].componentName;
-      const newTree: TreeInt = {
-        name,
-        attributes: {},
-        children: [],
-      };
-      newChildrenArray.push(newTree);
-      tree.children = newChildrenArray;
-      if (component.childrenArray[i].childType === 'COMP') {
-        const newFocusComp = components.find(
-          comp => comp.title === component.childrenArray[i].componentName,
-        );
-        this.findChildren(newFocusComp, components, newTree);
-      }
-    }
-    return tree;
-  }
-
   generateComponentTree(componentId: number, components: ComponentsInt) {
     const component = components.find(comp => comp.id === componentId);
     const tree = { name: component.title, attributes: {}, children: [] };
@@ -141,13 +116,7 @@ class BottomTabs extends Component<PropsInt> {
 
   render() {
     const {
-      classes,
-      components,
-      focusComponent,
-      deleteProp,
-      addProp,
-      focusChild,
-      // rightColumnOpen
+      classes, components, focusComponent, deleteProp, addProp, focusChild,
     } = this.props;
     const { value } = this.state;
 
@@ -156,13 +125,6 @@ class BottomTabs extends Component<PropsInt> {
     const htmlAttribCount = focusComponent.childrenArray.filter(child => child.childType === 'HTML')
       .length;
 
-    // const counters = focusComponent.ch
-    const tree = {
-      name: focusComponent.title,
-      attributes: {},
-      children: [],
-    };
-
     return (
       <div className={classes.root}>
         <Tabs
@@ -207,8 +169,7 @@ class BottomTabs extends Component<PropsInt> {
             ref={node => (this.treeWrapper = node)}
           >
             <Tree
-              data={[this.findChildren(focusComponent, components, tree)]}
-              // data={[this.generateComponentTree(focusComponent.id, components)]}
+              data={[this.generateComponentTree(focusComponent.id, components)]}
               separation={{ siblings: 0.3, nonSiblings: 0.3 }}
               transitionDuration={0}
               translate={this.state.translate}