merged dev changes into comment branch

Author: null267

main.js

@@ -19,9 +19,9 @@ const {
 // ** Uncomment below for hot reloading during development **
 
 // below hard-resets the entire electron process so is more of a catch-all in terms of dev mode:
-// require('electron-reload')(__dirname, {
-//   electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
-// });
+require('electron-reload')(__dirname, {
+  electron: path.join(__dirname, 'node_modules', '.bin', 'electron')
+});
 
 // below loads contents of all active BrowserWindows within electron when the source files are changed. 
 // ** You'll want to use this one when working in most files other than main.js

package.json

@@ -83,7 +83,7 @@
     ]
   },
   "dependencies": {
-    "@material-ui/core": "^3.9.3",
+    "@material-ui/core": "^3.9.4",
     "@material-ui/icons": "^2.0.0",
     "@types/react": "^16.8.14",
     "@types/react-dom": "^16.8.4",
@@ -153,4 +153,4 @@
     "style-loader": "^0.20.3",
     "typescript": "^2.8.3"
   }
-}
+}

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,18 +1,12 @@
 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';
 import createApplicationUtil from '../utils/createApplication.util';
 
 // ** ACTION CREATORS ** \\
 
-// ** openExpansionPanel just takes the id of the current component and toggles the expanded value to either true or false
-export const toggleExpansionPanel = (id: number) => ({
-  type: types.TOGGLE_EXPANSION_PANEL,
-  payload: { id },
-});
-
 // ! Redux thunk action
 export const loadInitData = () => {
   return (dispatch: any) => {
@@ -25,23 +19,32 @@ export const loadInitData = () => {
   }
 };
 
+// ** openExpansionPanel just takes the id of the current component and toggles the expanded value to either true or false
+export const toggleExpansionPanel = (id: number) => ({
+  type: types.TOGGLE_EXPANSION_PANEL,
+  payload: { id },
+});
+
+export const changeImagePath = (imageSource: string) => ({
+  type: types.CHANGE_IMAGE_SOURCE,
+  payload: { imageSource },
+})
+
 // ! Redux thunk action
 // ** addComponent waits for createComponent to dispatch then createComponent returns a promise with the new component object created
 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));
   };
@@ -57,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/CodePreview.tsx

@@ -1,21 +1,21 @@
 import React, { Component } from 'react';
 import { format } from 'prettier';
 import componentRender from '../utils/componentRender.util';
-import { ComponentInt, ComponentsInt } from '../utils/Interfaces';
+import { ComponentState } from '../types/types';
 /** **   SortCHildren will be fixed , dont XXX the file  *** */
 // import SortChildren from './SortChildren.jsx';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { hybrid } from 'react-syntax-highlighter/dist/styles/hljs/';
 
 type Props = {
-  focusComponent: ComponentInt;
-  components: ComponentsInt;
+  focusComponent: ComponentState;
+  components: Array<ComponentState>;
 };
 
 class CodePreview extends Component<Props> {
   render(): JSX.Element {
-    const focusComponent: ComponentInt = this.props.focusComponent;
-    const components: ComponentsInt = this.props.components;
+    const focusComponent: ComponentState = this.props.focusComponent;
+    const components: Array<ComponentState> = this.props.components;
 
     return (
       <div

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/Dropzone.tsx

@@ -1,12 +1,16 @@
-import React from "react";
+import React, { Component } from "react";
 import Dropzone from "react-dropzone";
 
 const IPC = require('electron').ipcRenderer;
 
-class FileDrop extends React.Component { 
-  onDrop = (file) => {
+type Props = {
+  changeImagePath: any;
+}
+
+class FileDrop extends Component<Props> { 
+  onDrop = (file: any) => {
     const { path } = file[0];
-    console.log(path);
+    this.props.changeImagePath(path);
   };
 
   render() {

src/components/GrandchildRectangle.tsx

@@ -1,12 +1,14 @@
 import React, { Component } from 'react';
 import { Rect, Group } from 'react-konva';
 // Konva = JavaScript library for drawing complex canvas graphics using React
-import { ComponentsInt, ComponentInt, ChildInt } from '../utils/interfaces';
+import { ComponentState, ChildState } from '../types/types';
 
 // ** this file might restrict you from making the child of a component one of its references - prevents circular references
 // Component does enable nesting of arbitrary numbers of child components, but it does NOT prevent circular references
 // Only check for that is in LeftColExpansionPanel on or around line 138
-interface PropsInt {
+
+
+type Props = {
   x: number;
   y: number;
   scaleX: number;
@@ -19,33 +21,36 @@ interface PropsInt {
   height: number;
   title: string;
   focusChild: any;
-  components: ComponentsInt;
+  components: ComponentState[];
   draggable: boolean;
   blockSnapSize: number;
   childType: string;
   imageSource: string;
   handleTransform: any;
 }
 
-interface StateInt {
-  image: any;
+type State = {
+  image: HTMLImageElement | null;
 }
 
-class GrandchildRectangle extends Component<PropsInt, StateInt> {
-  state = {
-    image: null
-  };
+class GrandchildRectangle extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      image: null
+    };
+  }
 
   getComponentColor(componentId: number) {
     const color = this.props.components.find(
-      (comp: ComponentInt) => comp.id === componentId
+      (comp: ComponentState) => comp.id === componentId
     ).color;
     return color;
   }
 
   getPseudoChild() {
     return this.props.components.find(
-      (comp: ComponentInt) => comp.id === this.props.childComponentId
+      (comp: ComponentState) => comp.id === this.props.childComponentId
     );
   }
 
@@ -118,9 +123,9 @@ class GrandchildRectangle extends Component<PropsInt, StateInt> {
         />
         {childType === 'COMP' &&
           components
-            .find((comp: ComponentInt) => comp.title === childComponentName)
-            .children.filter((child: ChildInt) => child.childId !== -1)
-            .map((grandchild: ChildInt, i: number) => (
+            .find((comp: ComponentState) => comp.title === childComponentName)
+            .children.filter((child: ChildState) => child.childId !== -1)
+            .map((grandchild: ChildState, i: number) => (
               <GrandchildRectangle
                 key={i}
                 components={components}

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,25 +1,20 @@
 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 { updateHtmlAttr } from '../actions/actions.ts';
-import { HTMLelements } from '../utils/htmlElements.util.ts';
-import { ComponentInt, ChildInt } from '../utils/interfaces.ts';
+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';
 
-interface PropsInt {
+type Props = {
   updateHtmlAttr: any;
-  focusComponent: ComponentInt;
+  focusComponent: ComponentState;
   classes: any;
   deleteProp: any;
   addProp: any;
-  focusChild: ChildInt;
+  focusChild: ChildState;
 }
 
-interface StateInt {}
+type State = { }
 
 const styles = (theme: any): any => ({
   root: {
@@ -49,11 +44,14 @@ const mapStateToProps = (store: any) => ({
   focusChild: store.application.focusChild,
 });
 
-class HtmlAttr extends Component<PropsInt, StateInt> {
-  state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
-    acc[attr] = '';
-    return acc;
-  }, {});
+class HtmlAttr extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = HTMLelements[this.props.focusChild.htmlElement].attributes.reduce((acc, attr) => {
+      acc[attr] = '';
+      return acc;
+    }, {});
+  }
 
   handleSave = (attr: string) => {
     this.props.updateHtmlAttr({ attr, value: this.state[attr] });