refactor material ui imports and delete and add child refactor

Author: Mitchel Severe

src/App.tsx

@@ -1,12 +1,10 @@
 import React from 'react';
 import './public/styles/style.css';
 import AppContainer from './containers/AppContainer';
-// import Test from './components/Test';
 
 const App: React.FC = () => (
   <div className="app">
     <AppContainer />
-    {/* <Test /> */}
   </div>
 );
 

src/actions/actions.ts

@@ -1,5 +1,5 @@
 import { createComponent } from '../utils/reducer.util';
-import { ComponentState } from '../types/types';
+import { ComponentState, ChildState } from '../types/types';
 import * as types from '../types/actionTypes';
 import { loadState } from '../localStorage.js';
 import createFiles from '../utils/createFiles.util';
@@ -35,18 +35,16 @@ export const changeImagePath = (imageSource: string) => ({
 export const addComponent = (title: string) => {
   return (dispatch, getState) => {
     // ** grab state from our reducer to see how many components currently exist in our array
-    const appComponentState = getState().application.components;
-    // ** Conditionally assigning a variable componentId. If any components exist in the array find the last component's id and increment it else initialize at 1.
-    const componentId = appComponentState.length ? appComponentState[appComponentState.length - 1].id + 1 : 1;
-    dispatch(createComponent(componentId, title, appComponentState))
+    const app = getState().application;
+    const componentId = app.nextComponentId;
+    const components = app.components;
+    dispatch(createComponent(componentId, title, components))
     .then((component: ComponentState) => {
-      // ** the dispatch to createComponent will return a promise. The promise will return either the new createdComponent or just the generic state object (which will have an id of 0 by default)
-      if (component.id !== 0) {
-        dispatch({ 
-          type: types.ADD_COMPONENT, 
-          payload: { component } 
-        });
-      }
+      // ** the dispatch to createComponent will return a promise. The promise will return either the new createdComponent.
+      dispatch({ 
+        type: types.ADD_COMPONENT, 
+        payload: { component } 
+      });
     })
     .catch((err: Error) => console.log(err));
   };
@@ -62,26 +60,47 @@ export const updateComponent = (id: number, update: {}) => ({
 });
 
 // ** deleteComponent deletes a component from our global state component array
-export const deleteComponent = (id: number) => ({
-  type: types.DELETE_COMPONENT,
-  payload: { id }
-});
-
-export const addChild = ({
-  title,
-  childType,
-  HTMLInfo,
-}: {
-title: string;
-childType: string;
-HTMLInfo: object;
-}) => (dispatch: any) => {
-  dispatch({ type: types.ADD_CHILD, payload: { title, childType, HTMLInfo } });
+export const deleteComponent = (id: number) => {
+  return (dispatch, getState) => {
+    const appComponents = getState().application.components;
+    appComponents.forEach((parent: ComponentState) => {
+      parent.children
+      .filter((child: ChildState) => child.childComponentId === id)
+      .forEach((child: ChildState) => {
+        dispatch({
+          type: types.DELETE_CHILD,
+          payload: {
+            parentId: parent.id,
+            childId: child.childId,
+            // calledFromDeleteComponent: true,
+          },
+        });
+      });
+    });
+    dispatch({
+      type: types.DELETE_COMPONENT,
+      payload: { id }
+    });
+  }
 };
 
-export const deleteChild = ({}) => (dispatch: any) => {
-  // with no payload, it will delete focusd child
-  dispatch({ type: types.DELETE_CHILD, payload: {} });
+export const addChild = (title: string, childType: string, HTMLInfo?: {}) => ({
+  type: types.ADD_CHILD, 
+  payload: { title, childType, HTMLInfo } 
+});
+
+export const deleteChild = (id: number) => { 
+  return (dispatch, getState) => {
+    const parent = getState().application.focusComponent;
+    const child = parent.children.find((currentChild: ChildState) => id === currentChild.childComponentId);
+    dispatch({
+      type: types.DELETE_CHILD,
+      payload: {
+        parentId: parent.id,
+        childId: child.childId,
+      },
+    });
+  }
 };
 
 export const changeFocusComponent = ({ title }: { title: string }) => (dispatch: any) => {

src/components/DataTable.tsx

@@ -1,13 +1,5 @@
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import Table from '@material-ui/core/Table';
-import TableBody from '@material-ui/core/TableBody';
-import TableCell from '@material-ui/core/TableCell';
-import TableHead from '@material-ui/core/TableHead';
-import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
-import DeleteIcon from '@material-ui/icons/Delete';
-import { IconButton } from '@material-ui/core';
+import { withStyles, Table, TableBody, TableCell, TableHead, TableRow, Paper, DeleteIcon, IconButton } from '../utils/material.util';
 
 const styles = (theme: any) => ({
   root: {

src/components/HTMLComponentPanel.tsx

@@ -32,7 +32,7 @@ class HTMLComponentPanel extends Component<PropsInt, StateInt> {
   };
 
   handleCreateHTMLChild = (type: string) => {
-    this.props.addChild({ title: type, childType: type, HTMLInfo: {} });
+    this.props.addChild(type, type, {});
   };
 
   render() {

src/components/HtmlAttr.tsx

@@ -1,11 +1,6 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
-import SaveIcon from '@material-ui/icons/Save';
-import Paper from '@material-ui/core/Paper';
-import Fab from '@material-ui/core/Fab';
+import { withStyles, Grid, TextField, SaveIcon, Paper, Fab } from '../utils/material.util';
 import { updateHtmlAttr } from '../actions/actions';
 import { HTMLelements } from '../utils/htmlElements.util';
 import { ComponentState, ChildState } from '../types/types';

src/components/KonvaStage.tsx

@@ -20,7 +20,6 @@ type Props = {
   handleTransform: any;
   focusChild: any;
   changeComponentFocusChild: any;
-  deleteChild: any;
   width: number;
   height: number;
 }
@@ -69,18 +68,19 @@ class KonvaStage extends Component<Props, State> {
   }
 
   componentDidMount() {
-    this.stage.current.addEventListener('keydown', this.handleKeyDown);
+    window.addEventListener('keydown', this.handleKeyDown);
   }
 
   componentWillUnmount() {
-    this.stage.current.removeEventListener('keydown', this.handleKeyDown);
+    window.removeEventListener('keydown', this.handleKeyDown);
   }
 
   handleKeyDown = (e: any) => {
     // backspace and delete keys are keyCode 8 and 46, respectively
     // this function is only used for deleting children atm, could be used for other things
     if (e.keyCode === 8 || e.keyCode === 46) {
-      this.props.deleteChild({});
+      const { focusComponent, deleteComponent } = this.props;
+      deleteComponent(focusComponent.id);
     }
   };
 
@@ -97,7 +97,6 @@ class KonvaStage extends Component<Props, State> {
 
     // find clicked rect by its name
     const rectChildId = e.target.attrs.childId;
-    // console.log("user clicked on child rectangle with childId: ", rectChildId);
     this.props.changeFocusChild({ childId: rectChildId });
     this.props.changeComponentFocusChild({
       componentId: this.props.focusComponent.id,