styling changes

Author: tolgamizrakci

src/actions/components.js

@@ -25,23 +25,21 @@ import {
   DELETE_PROP,
   ADD_PROP,
   DELETE_ALL_DATA,
-  CHANGE_IMAGE_PATH
-} from "../actionTypes/index";
+  CHANGE_IMAGE_PATH,
+} from '../actionTypes/index';
 
-import { loadState } from "../localStorage";
+import { loadState } from '../localStorage';
 
 import createFiles from '../utils/createFiles.util';
-import createApplicationUtil from '../utils/createApplication.util'
-
-export const loadInitData = () => dispatch => {
-  loadState().then(data =>
-    dispatch({
-      type: LOAD_INIT_DATA,
-      payload: {
-        data: data ? data.workspace : {}
-      }
-    })
-  );
+import createApplicationUtil from '../utils/createApplication.util';
+
+export const loadInitData = () => (dispatch) => {
+  loadState().then(data => dispatch({
+    type: LOAD_INIT_DATA,
+    payload: {
+      data: data ? data.workspace : {},
+    },
+  }));
 };
 
 // export const updateChildren = ({ parentIds, childIndex, childId }) => ({
@@ -62,47 +60,39 @@ export const loadInitData = () => dispatch => {
 //   },
 // });
 
-export const addComponent = ({ title }) => dispatch => {
+export const addComponent = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
-export const addChild = ({ title, childType, HTMLInfo }) => dispatch => {
+export const addChild = ({ title, childType, HTMLInfo }) => (dispatch) => {
   dispatch({ type: ADD_CHILD, payload: { title, childType, HTMLInfo } });
 };
 
-export const deleteChild = ({}) => dispatch => {
+export const deleteChild = ({}) => (dispatch) => {
   // with no payload, it will delete focusd child
   dispatch({ type: DELETE_CHILD, payload: {} });
 };
 
-export const deleteComponent = ({
-  componentId,
-  stateComponents
-}) => dispatch => {
-  console.log(
-    "Hello from component.js delete component.componentId= ",
-    componentId
-  );
+export const deleteComponent = ({ componentId, stateComponents }) => (dispatch) => {
+  console.log('Hello from component.js delete component.componentId= ', componentId);
 
   // find all places where the "to be delted" is a child and do what u gotta do
-  stateComponents.forEach(parent => {
-    parent.childrenArray
-      .filter(child => child.childComponentId == componentId)
-      .forEach(child => {
-        // console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
-        dispatch({
-          type: DELETE_CHILD,
-          payload: {
-            parentId: parent.id,
-            childId: child.childId,
-            calledFromDeleteComponent: true
-          }
-        });
+  stateComponents.forEach((parent) => {
+    parent.childrenArray.filter(child => child.childComponentId == componentId).forEach((child) => {
+      // console.log(`Should delete ${child.childId} from component id:${parent.id} ${parent.title}`)
+      dispatch({
+        type: DELETE_CHILD,
+        payload: {
+          parentId: parent.id,
+          childId: child.childId,
+          calledFromDeleteComponent: true,
+        },
       });
+    });
   });
 
   // change focus to APp
-  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: "App" } });
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
   // after taking care of the children delete the component
   dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
 };
@@ -138,22 +128,19 @@ export const deleteComponent = ({
 //   dispatch({ type: SET_SELECTABLE_PARENTS });
 // };
 
-export const changeFocusComponent = ({ title }) => dispatch => {
+export const changeFocusComponent = ({ title }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title } });
 };
 
 // make sure childId is being sent in
-export const changeFocusChild = ({ title, childId }) => dispatch => {
+export const changeFocusChild = ({ title, childId }) => (dispatch) => {
   dispatch({ type: CHANGE_FOCUS_CHILD, payload: { title, childId } });
 };
 
-export const changeComponentFocusChild = ({
-  componentId,
-  childId
-}) => dispatch => {
+export const changeComponentFocusChild = ({ componentId, childId }) => (dispatch) => {
   dispatch({
     type: CHANGE_COMPONENT_FOCUS_CHILD,
-    payload: { componentId, childId }
+    payload: { componentId, childId },
   });
 };
 
@@ -175,27 +162,29 @@ export const exportFiles = ({ components, path }) => (dispatch) => {
 
 export const handleClose = () => ({
   type: HANDLE_CLOSE,
-  payload: false
+  payload: false,
 });
 
-export const handleTransform = (
-  componentId,
-  childId,
-  { x, y, width, height }
-) => ({
+export const handleTransform = (componentId, childId, {
+  x, y, width, height,
+}) => ({
   type: HANDLE_TRANSFORM,
   payload: {
     componentId,
     childId,
     x,
     y,
     width,
-    height
-  }
+    height,
+  },
 });
 
 export const createApplication = ({
-  path, components = [], genOption, appName = 'proto_app', repoUrl,
+  path,
+  components = [],
+  genOption,
+  appName = 'proto_app',
+  repoUrl,
 }) => (dispatch) => {
   if (genOption === 0) {
     dispatch(exportFiles({ path, components }));
@@ -204,7 +193,10 @@ export const createApplication = ({
       type: CREATE_APPLICATION,
     });
     createApplicationUtil({
-      path, appName, genOption, repoUrl,
+      path,
+      appName,
+      genOption,
+      repoUrl,
     })
       .then(() => {
         dispatch({
@@ -221,18 +213,18 @@ export const createApplication = ({
 
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component }
+  payload: { component },
 });
 
 // export const deleteAllData = () => ({
 //   type: DELETE_ALL_DATA,
 // });
 
-export const deleteProp = propId => dispatch => {
+export const deleteProp = propId => (dispatch) => {
   dispatch({ type: DELETE_PROP, payload: propId });
 };
 
 export const addProp = prop => ({
   type: ADD_PROP,
-  payload: { ...prop }
+  payload: { ...prop },
 });

src/components/MainContainerHeader.jsx renamed to src/components/ApplicationActions.jsx

@@ -1,53 +1,52 @@
-import React from 'react';
+import React from "react";
 // import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import ZoomInIcon from '@material-ui/icons/ZoomIn';
-import ZoomOutIcon from '@material-ui/icons/ZoomOut';
-import ImageSearchIcon from '@material-ui/icons/ImageSearch';
-import OpenWithIcon from '@material-ui/icons/OpenWith';
-import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
-import KeyboardArrowRightIcon from '@material-ui/icons/KeyboardArrowRight';
-import DeleteOutlineIcon from '@material-ui/icons/DeleteOutline';
-import GetAppIcon from '@material-ui/icons/GetApp';
-import { withStyles } from '@material-ui/core/styles';
-import Tooltip from '@material-ui/core/Tooltip';
+import Button from "@material-ui/core/Button";
+import ZoomInIcon from "@material-ui/icons/ZoomIn";
+import ZoomOutIcon from "@material-ui/icons/ZoomOut";
+import ImageSearchIcon from "@material-ui/icons/ImageSearch";
+import OpenWithIcon from "@material-ui/icons/OpenWith";
+import KeyboardArrowLeftIcon from "@material-ui/icons/KeyboardArrowLeft";
+import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight";
+import DeleteOutlineIcon from "@material-ui/icons/DeleteOutline";
+import GetAppIcon from "@material-ui/icons/GetApp";
+import { withStyles } from "@material-ui/core/styles";
+import Tooltip from "@material-ui/core/Tooltip";
 
 const styles = () => ({
   iconSmall: {
-    fontSize: 10,
+    fontSize: 10
   },
   button: {
     // borderRight: '1px solid grey',
-    borderRadius: '0px',
-    backgroundColor: '#212121',
+    borderRadius: "0px",
+    backgroundColor: "#212121",
 
-    '&:hover > span > svg': {
-      color: '#1de9b6',
-      transition: 'all .2s ease',
+    "&:hover > span > svg": {
+      color: "#1de9b6",
+      transition: "all .2s ease"
     },
-    '&:hover': {
-      backgroundColor: '#212121',
+    "&:hover": {
+      backgroundColor: "#212121"
     },
-    '&:disabled': {
-      backgroundColor: '#424242',
+    "&:disabled": {
+      backgroundColor: "#424242"
     },
 
-    '&:disabled > span > svg': {
-      color: '#eee',
-      opacity: '0.3',
-    },
+    "&:disabled > span > svg": {
+      color: "#eee",
+      opacity: "0.3"
+    }
   },
   light: {
-    color: '#eee',
+    color: "#eee"
     // opacity: '0.7',
   },
   dark: {
-    color: '#1de9b6',
-  },
+    color: "#1de9b6"
+  }
 });
 
-
-const MainContainerHeader = (props) => {
+const MainContainerHeader = props => {
   const {
     classes,
     image,
@@ -56,7 +55,7 @@ const MainContainerHeader = (props) => {
     totalComponents,
     showGenerateAppModal,
     collapseColumn,
-    rightColumnOpen,
+    rightColumnOpen
   } = props;
 
   return (
@@ -74,14 +73,18 @@ const MainContainerHeader = (props) => {
             </Button>
           </div>
         </Tooltip>
-        <Tooltip title={image ? 'update image' : 'upload image'}>
+        <Tooltip title={image ? "update image" : "upload image"}>
           <div>
-            <Button color="default" className={classes.button} onClick={updateImage}>
+            <Button
+              color="default"
+              className={classes.button}
+              onClick={updateImage}
+            >
               <ImageSearchIcon className={classes.light} />
             </Button>
           </div>
         </Tooltip>
-        <Tooltip title={'export'}>
+        <Tooltip title={"export"}>
           <div>
             <Button
               color="default"