Merge pull request #13 from tonyito/mvp

Corrected bug in image upload function

Author: jzuniga206

src/actions/components.ts

@@ -1,10 +1,5 @@
 import {
-  ComponentInt,
-  ComponentsInt,
-  PropInt,
-  ChildInt,
-  Action,
-  ApplicationStateInt
+  ComponentInt, ComponentsInt, PropInt, ChildInt, Action, ApplicationStateInt, LoadInitData, AddComponent
 } from '../utils/Interfaces.ts';
 
 import {
@@ -46,8 +41,7 @@ export const changeImagePath = (imageSource: string) => ({
 });
 
 export const loadInitData = () => (dispatch: (arg: Action) => void) => {
-  loadState().then((data: ApplicationStateInt) => {
-    console.log('data.workspace', data.workspace);
+  loadState().then((data: any) => {
     dispatch({
       type: LOAD_INIT_DATA,
       payload: {
@@ -57,7 +51,7 @@ export const loadInitData = () => (dispatch: (arg: Action) => void) => {
   });
 };
 
-export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: Action) => void) => {
+export const addComponent = ({ title }: { title: string }) => (dispatch: (arg: AddComponent) => void) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
@@ -154,13 +148,13 @@ export const exportFiles = ({
   });
 
   createFiles(components, path, appName, exportAppBool)
-    .then(dir =>
+    .then((dir: string) =>
       dispatch({
         type: EXPORT_FILES_SUCCESS,
         payload: { status: true, dir: dir[0] }
       })
     )
-    .catch(err =>
+    .catch((err: string) =>
       dispatch({
         type: EXPORT_FILES_ERROR,
         payload: { status: true, err }
@@ -235,7 +229,7 @@ export const createApplication = ({
           })
         );
       })
-      .catch(err =>
+      .catch((err: string) =>
         dispatch({
           type: CREATE_APPLICATION_ERROR,
           payload: { status: true, err }
@@ -257,11 +251,11 @@ export const deleteProp = (propId: number) => (dispatch: (arg: Action) => void)
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
-export const toggleComponentState = (id: string) => (dispatch: any) => {
+export const toggleComponentState = (id: string) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: TOGGLE_STATE, payload: id });
 };
 
-export const toggleComponentClass = (id: string) => (dispatch: any) => {
+export const toggleComponentClass = (id: string) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: TOGGLE_CLASS, payload: id });
 };
 

src/components/App.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import '../public/styles/style.css';
-import AppContainer from '../containers/AppContainer.tsx';
+import AppContainer from '../containers/AppContainer';
 
 export const App: React.SFC = () => (
   <div className="app">

src/containers/AppContainer.tsx

@@ -3,11 +3,11 @@ import { connect } from 'react-redux';
 import { MuiThemeProvider } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 
-import LeftContainer from './LeftContainer.tsx';
-import MainContainer from './MainContainer.tsx';
-import theme from '../components/theme.ts';
+import LeftContainer from './LeftContainer';
+import MainContainer from './MainContainer';
+import theme from '../components/theme';
 // import { loadInitData } from '../actions/components.ts';
-import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
+import { ComponentInt, ComponentsInt, Action } from '../utils/Interfaces';
 import * as actions from '../actions/components';
 
 // ** Used with electron to render
@@ -22,7 +22,6 @@ type Props = {
   selectableChildren: Array<number>;
   loadInitData: () => void;
   changeImagePath: () => void;
-  changed: boolean;
 };
 
 type State = {
@@ -40,9 +39,11 @@ const mapStateToProps = (store: any) => ({
   selectableChildren: store.workspace.selectableChildren
 });
 
-const mapDispatchToProps = (dispatch: any) => ({
+const mapDispatchToProps = (dispatch: (arg: a) => void) => ({
   loadInitData: () => dispatch(actions.loadInitData()),
-  changeImagePath: (imageSource: string) => dispatch(actions.changeImagePath(imageSource)),
+  // loadInitData: () => {},
+  changeImagePath: (imageSource: string) => 
+  dispatch(actions.changeImagePath(imageSource)),
 });
 
 class AppContainer extends Component<Props, State> {
@@ -56,12 +57,12 @@ class AppContainer extends Component<Props, State> {
       changed: false
     };
 
-    IPC.on('new-file', (event, file: string) => {
+    IPC.on('new-file', (event: any, file: string) => {
       const image = new window.Image();
       image.src = file;
       image.onload = () => {
         // update state when the image has been uploaded
-        this.props.changeImagePath(file);
+        this.props.changeImagePath(image.src);
         this.setState({ image });
       };
     });
@@ -70,11 +71,11 @@ class AppContainer extends Component<Props, State> {
   componentDidUpdate(prevProps: Props) {
     const { imageSource } = this.props;
     const {changed} = this.state;
-    if (imageSource == '' && changed) {
-      this.setState({...this.state, image:null, changed:false});
+    if (imageSource === '' && changed) {
+      this.setState({image:null, changed:false});
 
     }
-    else if (imageSource !== prevProps.imageSource) {
+    else if (imageSource !== prevProps.imageSource && imageSource !== '') {
       this.setImage(imageSource);
     }
   }

src/containers/MainContainer.tsx

@@ -4,23 +4,22 @@
 import React, { Component } from "react";
 import { connect } from "react-redux";
 import { MuiThemeProvider } from "@material-ui/core/styles";
-import BottomPanel from "../components/BottomPanel.tsx";
-import theme from "../components/theme.ts";
+import BottomPanel from "../components/BottomPanel";
+import theme from "../components/theme";
 import {
   handleTransform,
   changeFocusChild,
   changeComponentFocusChild,
   deleteChild
-} from "../actions/components.ts";
-import KonvaStage from "../components/KonvaStage.tsx";
-import { ComponentInt, ComponentsInt } from "../utils/Interfaces.ts";
+} from "../actions/components";
+import KonvaStage from "../components/KonvaStage";
+import { ComponentInt, ComponentsInt } from "../utils/Interfaces";
 import * as actions from '../actions/components';
 
 interface PropsInt {
   image: HTMLImageElement | null;
   components: ComponentsInt;
   focusComponent: ComponentInt;
-  selectableChildren: Array<number>;
   classes: any;
   addComponent: any;
   addChild: any;
@@ -34,6 +33,7 @@ interface PropsInt {
   focusChild: any;
   changeComponentFocusChild: any;
   deleteChild: any;
+  imageSource: string;
 }
 
 interface StateInt {

src/reducers/componentReducer.ts

@@ -1,4 +1,10 @@
-import { ComponentInt, ChildInt, ApplicationStateInt } from '../utils/Interfaces';
+import {
+  ComponentInt,
+  ChildInt,
+  ApplicationStateInt,
+  Action
+} from '../utils/Interfaces';
+
 
 import {
   LOAD_INIT_DATA,
@@ -105,7 +111,7 @@ const initialApplicationState: ApplicationStateInt = {
   loading: false
 };
 
-const componentReducer = (state = initialApplicationState, action: any) => {
+const componentReducer = (state = initialApplicationState, action: Action) => {
   switch (action.type) {
     case LOAD_INIT_DATA:
       return {

src/reducers/index.ts

@@ -1,6 +1,6 @@
 import { combineReducers } from 'redux';
 
-import componentReducer from './componentReducer.ts';
+import componentReducer from './componentReducer';
 
 const reducers = combineReducers({
   workspace: componentReducer,

src/utils/Interfaces.ts

@@ -44,7 +44,7 @@ export interface ComponentInt {
 export interface ComponentsInt extends Array<ComponentInt> {}
 
 export interface ApplicationStateInt {
-  imageSource: String;
+  imageSource: string;
   totalComponents: number;
   nextId: number;
   successOpen: boolean;
@@ -61,5 +61,15 @@ export interface ApplicationStateInt {
 
 export interface Action {
   type: string;
-  payload: object;
+  payload?: any;
 }
+
+export interface LoadInitData {
+  type: string;
+  payload: { data: ApplicationStateInt | object }
+}
+
+export interface AddComponent {
+  type: string;
+  payload: { title : string }
+}