bottom props panel first iteration

src/actions/components.js

@@ -71,26 +71,35 @@ export const addChild = ({ title }) => dispatch => {
   dispatch({ type: ADD_CHILD, payload: { title } });
 };
 
-export const deleteChild = ({ }) => dispatch => { // with no payload, it will delete focusd child 
-  dispatch({ type: DELETE_CHILD, payload: { } });
+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)
-
-  // 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   } });
-    })
-  })
-
-  // change focus to APp 
-  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
-// after taking care of the children delete the component 
- dispatch({ type: DELETE_COMPONENT, payload: { 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,
+          },
+        });
+      });
+  });
 
+  // change focus to APp
+  dispatch({ type: CHANGE_FOCUS_COMPONENT, payload: { title: 'App' } });
+  // after taking care of the children delete the component
+  dispatch({ type: DELETE_COMPONENT, payload: { componentId } });
 };
 
 export const updateComponent = ({ id, index, newParentId = null, color = null, stateful = null }) => dispatch => {
@@ -127,8 +136,11 @@ 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) => {
@@ -218,12 +230,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);