Merge pull request #11 from ReacType-2-0/redux-image

Image support added in Redux

Author: chelseyeslehc

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/actions/actions.ts

@@ -7,12 +7,6 @@ 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,6 +19,17 @@ 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) => {

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/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,11 +1,11 @@
 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
 
-interface PropsInt {
+type Props = {
   x: number;
   y: number;
   scaleX: number;
@@ -18,33 +18,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
     );
   }
 
@@ -117,9 +120,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/HtmlAttr.tsx

@@ -6,20 +6,20 @@ 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 { 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 +49,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] });