bottom props panel first iteration

Author: Tolga Mizrakci

src/actions/components.js

@@ -26,70 +26,84 @@ 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 : {},
-    },
-  }));
+export const loadInitData = () => dispatch => {
+  loadState().then(data =>
+    dispatch({
+      type: LOAD_INIT_DATA,
+      payload: {
+        data: data ? data.workspace : {}
+      }
+    })
+  );
 };
 
 export const updateChildren = ({ parentIds, childIndex, childId }) => ({
   type: UPDATE_CHILDREN,
   payload: {
     parentIds,
     childIndex,
-    childId,
-  },
+    childId
+  }
 });
 
 export const parentReassignment = ({ index, id, parentIds }) => ({
   type: REASSIGN_PARENT,
   payload: {
     index,
     id,
-    parentIds,
-  },
+    parentIds
+  }
 });
 
-export const addComponent = ({ title }) => (dispatch) => {
+export const addComponent = ({ title }) => dispatch => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
 };
 
-export const addChild = ({ title }) => (dispatch) => {
+export const addChild = ({ title }) => dispatch => {
   dispatch({ type: ADD_CHILD, payload: { title } });
 };
 
-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 } });
 };
@@ -99,43 +113,49 @@ export const updateComponent = ({
   index,
   newParentId = null,
   color = null,
-  stateful = null,
-}) => (dispatch) => {
+  stateful = null
+}) => dispatch => {
   dispatch({
     type: UPDATE_COMPONENT,
     payload: {
       id,
       index,
       newParentId,
       color,
-      stateful,
-    },
+      stateful
+    }
   });
 
   if (newParentId) {
     dispatch(
       updateChildren({
         parentIds: [newParentId],
         childId: id,
-        childIndex: index,
-      }),
+        childIndex: index
+      })
     );
   }
 
   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) => {
-  dispatch({ type: CHANGE_COMPONENT_FOCUS_CHILD, payload: { componentId, childId } });
+export const changeComponentFocusChild = ({
+  componentId,
+  childId
+}) => dispatch => {
+  dispatch({
+    type: CHANGE_COMPONENT_FOCUS_CHILD,
+    payload: { componentId, childId }
+  });
 };
 
 // export const exportFiles = ({ components, path }) => (dispatch) => {
@@ -156,21 +176,23 @@ export const changeComponentFocusChild = ({ componentId, childId }) => (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 = ({
@@ -200,7 +222,7 @@ export const handleTransform = (componentId, childId, {
 
 export const toggleDragging = status => ({
   type: TOGGLE_DRAGGING,
-  payload: status,
+  payload: status
 });
 
 // export const moveToBottom = componentId => ({
@@ -215,7 +237,7 @@ export const toggleDragging = status => ({
 
 export const openExpansionPanel = component => ({
   type: OPEN_EXPANSION_PANEL,
-  payload: { component },
+  payload: { component }
 });
 
 // export const deleteAllData = () => ({
@@ -227,12 +249,12 @@ export const openExpansionPanel = component => ({
 //   payload: path,
 // });
 
-// export const deleteCompProp = ({ id, index }) => ({
-//   type: DELETE_PROP,
-//   payload: { id, index },
-// });
+export const deleteProp = ({ id, index }) => ({
+  type: DELETE_PROP,
+  payload: { id, index }
+});
 
-// export const addCompProp = prop => ({
-//   type: ADD_PROP,
-//   payload: { ...prop },
-// });
+export const addProp = prop => ({
+  type: ADD_PROP,
+  payload: { ...prop }
+});

src/components/BottomPanel.jsx

@@ -0,0 +1,86 @@
+import React, { Component } from "react";
+import { connect } from "react-redux";
+// import PropTypes from 'prop-types';
+import {
+  handleClose,
+  deleteCompProp,
+  addCompProp
+} from "../actions/components";
+// import Snackbars from '../components/Snackbars.jsx';
+import RightTabs from "./RightTabs.jsx";
+
+const IPC = require("electron").ipcRenderer;
+
+const mapDispatchToProps = dispatch => ({
+  handleNotificationClose: () => dispatch(handleClose()),
+  deleteProp: ({ id, index }) => dispatch(deleteCompProp({ id, index })),
+  addProp: prop => dispatch(addCompProp(prop))
+});
+
+const mapStateToProps = store => ({
+  successOpen: store.workspace.successOpen,
+  errorOpen: store.workspace.errorOpen,
+  appDir: store.workspace.appDir
+});
+
+class BottomPanel extends Component {
+  state = {
+    successOpen: false,
+    errorOpen: false
+  };
+
+  viewAppDir = () => {
+    IPC.send("view_app_dir", this.props.appDir);
+  };
+
+  render() {
+    const {
+      components,
+      successOpen,
+      errorOpen,
+      handleNotificationClose,
+      appDir,
+      focusComponent,
+      deleteProp,
+      addProp
+      // rightColumnOpen
+    } = this.props;
+
+    return (
+      <div className="bottom-panel" style={{ width: "100%" }}>
+        <RightTabs
+          components={components}
+          focusComponent={focusComponent}
+          deleteProp={deleteProp}
+          addProp={addProp}
+          // rightColumnOpen={rightColumnOpen}
+        />
+        {/* <Snackbars
+          successOpen={successOpen}
+          errorOpen={errorOpen}
+          handleNotificationClose={handleNotificationClose}
+          msg={appDir}
+          viewAppDir={this.viewAppDir}
+        /> */}
+      </div>
+    );
+  }
+}
+
+// RightContainer.propTypes = {
+//   components: PropTypes.array.isRequired,
+//   successOpen: PropTypes.bool.isRequired,
+//   appDir: PropTypes.string,
+//   errorOpen: PropTypes.bool.isRequired,
+//   focusComponent: PropTypes.object.isRequired,
+//   handleNotificationClose: PropTypes.func.isRequired,
+//   deleteProp: PropTypes.func.isRequired,
+//   addProp: PropTypes.func.isRequired,
+//   width: PropTypes.number.isRequired,
+//   rightColumnOpen: PropTypes.bool.isRequired,
+// };
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(BottomPanel);