Image upload button added but no functionality

Author: tonyito

src/actionTypes/index.js

@@ -26,4 +26,5 @@ export const ADD_PROP = 'ADD_PROP';
 export const DELETE_ALL_DATA = 'DELETE_ALL_DATA';
 export const CHANGE_IMAGE_PATH = 'CHANGE_IMAGE_PATH';
 export const UPDATE_HTML_ATTR = 'UPDATE_HTML_ATTR';
-export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT'
+export const UPDATE_CHILDREN_SORT = 'UPDATE_CHILDREN_SORT';
+export const CHANGE_IMAGE_SOURCE = 'CHANGE_IMAGE_SOURCE';

src/actions/components.ts

@@ -25,12 +25,18 @@ import {
   DELETE_ALL_DATA,
   UPDATE_HTML_ATTR,
   UPDATE_CHILDREN_SORT,
+  CHANGE_IMAGE_SOURCE
 } from '../actionTypes/index.js';
 
 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: any) => {
   loadState().then((data: any) => dispatch({
     type: LOAD_INIT_DATA,

src/containers/AppContainer.tsx

@@ -1,14 +1,17 @@
-import React, { Component } from "react";
-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 { loadInitData } from "../actions/components.ts";
-import { ComponentInt, ComponentsInt } from "../utils/Interfaces.ts";
+import React, { Component } from 'react';
+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 { loadInitData } from '../actions/components.ts';
+import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
+import * as actions from '../actions/components';
+
 
 type Props = {
+  imageSource: string;
   components: ComponentsInt;
   focusComponent: ComponentInt;
   totalComponents: number;
@@ -18,14 +21,19 @@ type Props = {
 };
 
 const mapStateToProps = (store: any) => ({
+  imageSource: store.workspace.imageSource,
   components: store.workspace.components,
   totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
   loading: store.workspace.loading,
   selectableChildren: store.workspace.selectableChildren
 });
 
-const mapDispatchToProps = { loadInitData };
+const mapDispatchToProps = (dispatch: any) => ({
+  loadInitData,
+  //CHECK
+  changeImagePath: (imageSource: string) => dispatch(actions.changeImagePath(imageSource)),
+});
 
 class AppContainer extends Component<Props> {
   state = {
@@ -61,9 +69,9 @@ class AppContainer extends Component<Props> {
           {loading ? (
             <div
               style={{
-                alignSelf: "flex-end",
-                position: "fixed",
-                width: "100%"
+                alignSelf: 'flex-end',
+                position: 'fixed',
+                width: '100%'
               }}
             >
               <LinearProgress color="secondary" />
@@ -75,7 +83,4 @@ class AppContainer extends Component<Props> {
   }
 }
 
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(AppContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);

src/containers/LeftContainer.tsx

@@ -21,6 +21,7 @@ import cloneDeep from "../utils/cloneDeep.ts";
 const IPC = require("electron").ipcRenderer;
 
 interface PropsInt {
+  imageSource: string;
   components: ComponentsInt;
   focusComponent: ComponentInt;
   selectableChildren: Array<number>;
@@ -156,6 +157,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
   };
 
   chooseAppDir = () => IPC.send("choose_app_dir");
+  addImage = () => IPC.send('update-file');
 
   showGenerateAppModal = () => {
     const { closeModal, chooseGenOptions } = this;
@@ -194,6 +196,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
 
   render(): JSX.Element {
     const {
+      imageSource,
       components,
       deleteComponent,
       focusComponent,
@@ -222,6 +225,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
           components={components}
         />
       ));
+      const { addImage } = this;
 
     return (
       <div className="column left">
@@ -292,6 +296,31 @@ class LeftContainer extends Component<PropsInt, StateInt> {
               flexDirection: "column"
             }}
           >
+             { 
+            imageSource ? (
+              <Button
+                aria-label="Remove Image"
+                variant="contained"
+                fullWidth
+                onClick={clearImage}
+                className={classes.clearButton}
+                style={{ borderRadius: 0, top: 0, backgroundColor: '#dc004e', color: '#fff' }}
+              >
+                Remove Image
+              </Button> 
+            ) : (
+              <Button
+                aria-label="Upload Image"
+                variant="contained"
+                fullWidth
+                onClick={addImage}
+                className={classes.clearButton}
+                style={{ borderRadius: 0, top: 0, backgroundColor: '#dc004e', color: '#fff' }}
+              >
+                Upload Image
+              </Button> 
+            )
+          }
             <Button
               color="secondary"
               aria-label="Delete All"

src/reducers/componentReducer.ts

@@ -85,6 +85,7 @@ const initialApplicationFocusChild: ChildInt = {
 };
 
 const initialApplicationState: ApplicationStateInt = {
+  imageSource: '',
   totalComponents: 1,
   nextId: 2,
   successOpen: false,

src/utils/Interfaces.ts

@@ -43,6 +43,7 @@ export interface ComponentInt {
 export interface ComponentsInt extends Array<ComponentInt> {}
 
 export interface ApplicationStateInt {
+  imageSource: String;
   totalComponents: number;
   nextId: number;
   successOpen: boolean;