Some more broken functionality

Author: tonyito

src/actions/components.ts

@@ -34,7 +34,7 @@ import createApplicationUtil from '../utils/createApplication.util.ts';
 
 export const changeImagePath = (imageSource: string) => ({
   type: CHANGE_IMAGE_SOURCE,
-  payload: { imageSource },
+  payload: imageSource,
 })
 
 export const loadInitData = () => (dispatch: any) => {

src/containers/AppContainer.tsx

@@ -9,6 +9,8 @@ import { loadInitData } from '../actions/components.ts';
 import { ComponentInt, ComponentsInt } from '../utils/Interfaces.ts';
 import * as actions from '../actions/components';
 
+// ** Used with electron to render
+const IPC = require('electron').ipcRenderer;
 
 type Props = {
   imageSource: string;
@@ -18,8 +20,14 @@ type Props = {
   loading: boolean;
   selectableChildren: Array<number>;
   loadInitData: any;
+  changeImagePath: any;
 };
 
+type State = {
+  image: HTMLImageElement | null;
+  width: number;
+}
+
 const mapStateToProps = (store: any) => ({
   imageSource: store.workspace.imageSource,
   components: store.workspace.components,
@@ -31,14 +39,50 @@ const mapStateToProps = (store: any) => ({
 
 const mapDispatchToProps = (dispatch: any) => ({
   loadInitData,
-  //CHECK
   changeImagePath: (imageSource: string) => dispatch(actions.changeImagePath(imageSource)),
 });
 
-class AppContainer extends Component<Props> {
-  state = {
-    width: 25,
-    rightColumnOpen: true
+class AppContainer extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    // ** state here to create a collapsable right column where bottom panel currently lives
+    this.state = {
+      image: null,
+      width: 25,
+    };
+
+    IPC.on('new-file', (event, 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.setState({ image });
+      };
+    });
+  }
+
+  // state = {
+  //   width: 25,
+  //   rightColumnOpen: true
+  // };
+  componentDidUpdate(prevProps: Props) {
+    const { imageSource } = this.props;
+    if (imageSource !== prevProps.imageSource) {
+      this.setImage(imageSource);
+    }
+  }
+
+  setImage = (imageSource: string) => {
+    let image: HTMLImageElement;
+    image = new window.Image();
+    image.src = imageSource;
+    image.onload = () => {
+      // setState will redraw layer
+      // because "image" property is changed
+      this.setState({ image });
+    };
   };
 
   componentDidMount() {
@@ -64,8 +108,10 @@ class AppContainer extends Component<Props> {
             totalComponents={totalComponents}
             focusComponent={focusComponent}
             selectableChildren={selectableChildren}
+            setImage={this.setImage}
           />
-          <MainContainer components={components} />
+          <MainContainer components={components} image={this.state.image} 
+            imageSource={this.props.imageSource}/>
           {loading ? (
             <div
               style={{

src/containers/LeftContainer.tsx

@@ -302,7 +302,7 @@ class LeftContainer extends Component<PropsInt, StateInt> {
                 aria-label="Remove Image"
                 variant="contained"
                 fullWidth
-                onClick={clearImage}
+                onClick={() => {}}
                 className={classes.clearButton}
                 style={{ borderRadius: 0, top: 0, backgroundColor: '#dc004e', color: '#fff' }}
               >

src/reducers/componentReducer.ts

@@ -2,7 +2,7 @@ import {
   ComponentInt,
   ChildInt,
   ApplicationStateInt
-} from "../utils/Interfaces.ts";
+} from '../utils/Interfaces.ts';
 
 import {
   LOAD_INIT_DATA,
@@ -13,6 +13,7 @@ import {
   CHANGE_FOCUS_COMPONENT,
   CHANGE_FOCUS_CHILD,
   CHANGE_COMPONENT_FOCUS_CHILD,
+  CHANGE_IMAGE_SOURCE,
   EXPORT_FILES,
   CREATE_APPLICATION,
   EXPORT_FILES_SUCCESS,
@@ -27,7 +28,7 @@ import {
   DELETE_PROP,
   UPDATE_HTML_ATTR,
   UPDATE_CHILDREN_SORT
-} from "../actionTypes";
+} from '../actionTypes';
 
 import {
   addComponent,
@@ -37,6 +38,7 @@ import {
   changeFocusComponent,
   changeComponentFocusChild,
   changeFocusChild,
+  changeImageSource,
   exportFilesSuccess,
   exportFilesError,
   handleClose,
@@ -46,14 +48,14 @@ import {
   deleteProp,
   updateHtmlAttr,
   updateChildrenSort
-} from "../utils/componentReducer.util.ts";
-import cloneDeep from "../utils/cloneDeep.ts";
+} from '../utils/componentReducer.util.ts';
+import cloneDeep from '../utils/cloneDeep.ts';
 
 const appComponent: ComponentInt = {
   id: 1,
   stateful: false,
-  title: "App",
-  color: "#FF6D00",
+  title: 'App',
+  color: '#FF6D00',
   props: [],
   nextPropId: 1,
   position: {
@@ -96,7 +98,7 @@ const initialApplicationState: ApplicationStateInt = {
   initialApplicationFocusChild,
   focusChild: cloneDeep(initialApplicationFocusChild),
   components: [appComponent],
-  appDir: "",
+  appDir: '',
   loading: false
 };
 
@@ -107,7 +109,7 @@ const componentReducer = (state = initialApplicationState, action: any) => {
         ...state,
         ...action.payload.data,
         loading: false,
-        appDir: "",
+        appDir: '',
         successOpen: false,
         errorOpen: false
       };
@@ -125,6 +127,8 @@ const componentReducer = (state = initialApplicationState, action: any) => {
       return changeFocusChild(state, action.payload);
     case CHANGE_COMPONENT_FOCUS_CHILD:
       return changeComponentFocusChild(state, action.payload);
+    case CHANGE_IMAGE_SOURCE:
+      return changeImageSource(state, action.payload);
     case CREATE_APPLICATION:
     case EXPORT_FILES:
       return { ...state, loading: true };

src/utils/componentReducer.util.ts

@@ -309,6 +309,14 @@ export const handleTransform = (
     focusChild: newFocusChild,
   };
 };
+export const changeImageSource = (state: ApplicationStateInt, { src }: { src: string }) => {
+  return {
+    ...state, 
+    imageSource: src
+  }
+}
+
+
 
 //Reducer that deletes the component selected
 export const deleteComponent = (state: ApplicationStateInt, { componentId }: { componentId: number }) => {