fixed image upload

Author: tonyito

src/actions/components.ts

@@ -1,5 +1,5 @@
 import {
-  ComponentInt, ComponentsInt, PropInt, ChildInt, Action, ApplicationStateInt
+  ComponentInt, ComponentsInt, PropInt, ChildInt, Action, ApplicationStateInt, LoadInitData, AddComponent
 } from '../utils/Interfaces.ts';
 
 import {
@@ -35,14 +35,13 @@ import { loadState } from '../localStorage';
 import createFiles from '../utils/createFiles.util.ts';
 import createApplicationUtil from '../utils/createApplication.util.ts';
 
-
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
   payload: { imageSource },
 })
 
-export const loadInitData = () => (dispatch: (arg: Action) => void) => {
-  loadState().then((data: ApplicationStateInt) => {
+export const loadInitData = () => (dispatch: any) => {
+  loadState().then((data: any) => {
     dispatch({
     type: LOAD_INIT_DATA,
     payload: {
@@ -52,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 } });
 };
 
@@ -146,13 +145,13 @@ exportAppBool: boolean;
   });
 
   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 }
@@ -232,7 +231,7 @@ exportAppBool: boolean;
           })
         );
       })
-      .catch(err =>
+      .catch((err: string) =>
         dispatch({
           type: CREATE_APPLICATION_ERROR,
           payload: { status: true, err }
@@ -254,7 +253,7 @@ export const deleteProp = (propId: number) => (dispatch: (arg: Action) => void)
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
-export const toggleComponentState = (index: string) => (dispatch: any) => {
+export const toggleComponentState = (index: string) => (dispatch: (arg: Action) => void) => {
   dispatch({ type: TOGGLE_STATE, payload: index });
 };
 

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 } from '../utils/Interfaces';
 import * as actions from '../actions/components';
 
 // ** Used with electron to render
@@ -20,8 +20,8 @@ type Props = {
   totalComponents: number;
   loading: boolean;
   selectableChildren: Array<number>;
-  loadInitData: () => void;
-  changeImagePath: () => void;
+  loadInitData: any;
+  changeImagePath: any;
   changed: boolean;
 };
 
@@ -42,7 +42,9 @@ const mapStateToProps = (store: any) => ({
 
 const mapDispatchToProps = (dispatch: any) => ({
   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 +58,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 +72,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/reducers/componentReducer.ts

@@ -1,7 +1,8 @@
 import {
   ComponentInt,
   ChildInt,
-  ApplicationStateInt
+  ApplicationStateInt,
+  Action
 } from '../utils/Interfaces';
 
 
@@ -109,7 +110,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 {
@@ -144,7 +145,7 @@ const componentReducer = (state = initialApplicationState, action: any) => {
       return deleteImage(state, action.payload);
     case EXPORT_FILES_SUCCESS:
       return exportFilesSuccess(state, action.payload);
-    case CREATE_APPLICATION_ERROR:
+    // case CREATE_APPLICATION_ERROR:
     case EXPORT_FILES_ERROR:
       return exportFilesError(state, action.payload);
     case HANDLE_CLOSE:

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 }
+}