merged with Shlomo delete functionality

ChristianEdwardPadilla · ChristianEdwardPadilla · commit af227d852cf5 · 2019-04-24T10:18:38.000-04:00
diff --git a/src/actions/components.js b/src/actions/components.js
@@ -68,20 +68,29 @@ export const addChild = ({ title }) => (dispatch) => {
   dispatch({ type: ADD_CHILD, payload: { title } });
 };
 
-export const deleteChild = ({ title }) => (dispatch) => {
-  dispatch({ type: DELETE_CHILD, payload: { title } });
+export const deleteChild = ({}) => (dispatch) => {
+  // with no payload, it will delete focusd child
+  dispatch({ type: DELETE_CHILD, payload: {} });
 };
 
-export const deleteComponent = ({ index, id, parentIds = [] }) => (dispatch) => {
-  if (parentIds.length) {
-    // Delete Component  from its parent if it has a parent.
-    dispatch(updateChildren({ parentIds, childId: id, childIndex: index }));
-  }
-  // Reassign Component's children to its parent if it has one or make them orphans
-  dispatch(parentReassignment({ index, id, parentIds }));
+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 },
+      });
+    });
+  });
 
-  dispatch({ type: DELETE_COMPONENT, payload: { index, id } });
-  dispatch({ type: SET_SELECTABLE_PARENTS });
+  // 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 = ({
diff --git a/src/containers/LeftContainer.jsx b/src/containers/LeftContainer.jsx
@@ -1,62 +1,55 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { compose } from "redux";
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
 // import PropTypes from 'prop-types';
-import FormControl from "@material-ui/core/FormControl";
-import TextField from "@material-ui/core/TextField";
-import Button from "@material-ui/core/Button";
-import AddIcon from "@material-ui/icons/Add";
-import Grid from "@material-ui/core/Grid";
-import { withStyles } from "@material-ui/core/styles";
-import LeftColExpansionPanel from "../components/LeftColExpansionPanel.jsx";
+import FormControl from '@material-ui/core/FormControl';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import AddIcon from '@material-ui/icons/Add';
+import Grid from '@material-ui/core/Grid';
+import { withStyles } from '@material-ui/core/styles';
+import LeftColExpansionPanel from '../components/LeftColExpansionPanel.jsx';
 // import createModal from '../utils/createModal.util';
-import * as actions from "../actions/components";
+import * as actions from '../actions/components';
 
 const mapDispatchToProps = dispatch => ({
   addComponent: ({ title }) => dispatch(actions.addComponent({ title })),
   updateComponent: ({
-    id,
-    index,
-    newParentId = null,
-    color = null,
-    stateful = null
-  }) =>
-    dispatch(
-      actions.updateComponent({
-        id,
-        index,
-        newParentId,
-        color,
-        stateful
-      })
-    ),
+    id, index, newParentId = null, color = null, stateful = null,
+  }) => dispatch(
+    actions.updateComponent({
+      id,
+      index,
+      newParentId,
+      color,
+      stateful,
+    }),
+  ),
   // deleteComponent: ({ index, id, parentIds }) => dispatch(actions.deleteComponent({ index, id, parentIds })),
   // moveToBottom: componentId => dispatch(actions.moveToBottom(componentId)),
   // moveToTop: componentId => dispatch(actions.moveToTop(componentId)),
   // openExpansionPanel: component => dispatch(actions.openExpansionPanel(component)),
   // deleteAllData: () => dispatch(actions.deleteAllData()),
   addChild: ({ title }) => dispatch(actions.addChild({ title })),
-  changeFocusComponent: ({ title }) =>
-    dispatch(actions.changeFocusComponent({ title })),
-  changeFocusChild: ({ title, childId }) =>
-    dispatch(actions.changeFocusChild({ title, childId }))
+  changeFocusComponent: ({ title }) => dispatch(actions.changeFocusComponent({ title })),
+  changeFocusChild: ({ title, childId }) => dispatch(actions.changeFocusChild({ title, childId })),
 });
 
 class LeftContainer extends Component {
   state = {
-    componentName: ""
+    componentName: '',
   };
 
-  handleChange = event => {
+  handleChange = (event) => {
     this.setState({
-      [event.target.name]: event.target.value
+      [event.target.name]: event.target.value,
     });
   };
 
   handleAddComponent = () => {
     this.props.addComponent({ title: this.state.componentName });
     this.setState({
-      componentName: ""
+      componentName: '',
     });
   };
 
@@ -71,11 +64,11 @@ class LeftContainer extends Component {
       addChild,
       changeFocusComponent,
       changeFocusChild,
-      selectableChildren
+      selectableChildren,
     } = this.props;
     const { componentName } = this.state;
 
-    console.log(components);
+    // console.log(components);
 
     const componentsExpansionPanel = components
       .sort((a, b) => parseInt(b.id) - parseInt(a.id)) // sort by id value of comp
@@ -105,8 +98,8 @@ class LeftContainer extends Component {
               margin="normal"
               autoFocus
               onChange={this.handleChange}
-              onKeyPress={ev => {
-                if (ev.key === "Enter") {
+              onKeyPress={(ev) => {
+                if (ev.key === 'Enter') {
                   // Do code here
                   this.handleAddComponent();
                   ev.preventDefault();
@@ -116,10 +109,10 @@ class LeftContainer extends Component {
               name="componentName"
               className={classes.light}
               InputProps={{
-                className: classes.input
+                className: classes.input,
               }}
               InputLabelProps={{
-                className: classes.input
+                className: classes.input,
               }}
             />
           </Grid>
@@ -147,8 +140,8 @@ export default compose(
   withStyles(styles),
   connect(
     null,
-    mapDispatchToProps
-  )
+    mapDispatchToProps,
+  ),
 )(LeftContainer);
 
 // LeftContainer.propTypes = {
@@ -168,40 +161,40 @@ export default compose(
 function styles() {
   return {
     cssLabel: {
-      color: "white",
+      color: 'white',
 
-      "&$cssFocused": {
-        color: "green"
-      }
+      '&$cssFocused': {
+        color: 'green',
+      },
     },
     cssFocused: {},
     input: {
-      color: "#fff",
-      opacity: "0.7",
-      marginBottom: "10px"
+      color: '#fff',
+      opacity: '0.7',
+      marginBottom: '10px',
     },
     underline: {
-      color: "white",
-      "&::before": {
-        color: "white"
-      }
+      color: 'white',
+      '&::before': {
+        color: 'white',
+      },
     },
     button: {
-      color: "#fff",
+      color: '#fff',
 
-      "&:disabled": {
-        color: "grey"
-      }
+      '&:disabled': {
+        color: 'grey',
+      },
     },
     clearButton: {
-      top: "96%",
-      position: "sticky!important",
-      zIndex: "1",
+      top: '96%',
+      position: 'sticky!important',
+      zIndex: '1',
 
-      "&:disabled": {
-        color: "grey",
-        backgroundColor: "#424242"
-      }
-    }
+      '&:disabled': {
+        color: 'grey',
+        backgroundColor: '#424242',
+      },
+    },
   };
 }
diff --git a/src/containers/MainContainer.jsx b/src/containers/MainContainer.jsx
@@ -13,6 +13,7 @@ import {
   handleTransform,
   changeFocusChild,
   deleteChild,
+  deleteComponent,
 } from '../actions/components';
 import KonvaStage from '../components/KonvaStage.jsx';
 // import MainContainerHeader from '../components/MainContainerHeader.jsx';
@@ -35,13 +36,15 @@ const mapDispatchToProps = dispatch => ({
   toggleComponentDragging: status => dispatch(toggleDragging(status)),
   openPanel: component => dispatch(openExpansionPanel(component)),
   changeFocusChild: ({ title, childId }) => dispatch(changeFocusChild({ title, childId })),
-  deleteChild: ({ childId }) => dispatch(deleteChild({ childId })),
+  deleteChild: ({}) => dispatch(deleteChild({})), // if u send no prms, function will delete focus child.
+  deleteComponent: ({ componentId, stateComponents }) => dispatch(deleteComponent({ componentId, stateComponents })),
 });
 
 const mapStateToProps = store => ({
   totalComponents: store.workspace.totalComponents,
   focusComponent: store.workspace.focusComponent,
   focusChild: store.workspace.focusChild,
+  stateComponents: store.workspace.components,
 });
 
 class MainContainer extends Component {
@@ -83,6 +86,8 @@ class MainContainer extends Component {
       focusChild,
       changeFocusChild,
       deleteChild,
+      deleteComponent,
+      stateComponents,
     } = this.props;
     const {
       increaseHeight,
@@ -96,6 +101,14 @@ class MainContainer extends Component {
     } = this;
     const cursor = this.state.draggable ? 'move' : 'default';
 
+    // show a string of all direct parents. SO the user can gaze at it.
+    const directParents = !focusComponent.id
+      ? 'Waiting for a focused component'
+      : stateComponents
+        .filter(comp => comp.childrenArray.some(kiddy => kiddy.childComponentId == focusComponent.id))
+        .map(comp => comp.title)
+        .join(',');
+
     return (
       <MuiThemeProvider theme={theme}>
         <div className="main-container" style={{ cursor }}>
@@ -114,7 +127,14 @@ class MainContainer extends Component {
               deleteChild={deleteChild}
             />
           </div>
-          <button onClick={deleteChild}>`delete focused child`</button>
+
+          <p>{directParents ? `Used in: ${directParents}` : 'Not used in any other component'}</p>
+          <button onClick={deleteChild}>delete focused child</button>
+          <button
+            onClick={() => deleteComponent({ componentId: focusComponent.id, stateComponents })}
+          >
+            delete focused components
+          </button>
         </div>
       </MuiThemeProvider>
     );
diff --git a/src/reducers/componentReducer.js b/src/reducers/componentReducer.js
@@ -24,8 +24,8 @@ import {
   DELETE_ALL_DATA,
   CHANGE_IMAGE_PATH,
   ADD_PROP,
-  DELETE_PROP
-} from "../actionTypes";
+  DELETE_PROP,
+} from '../actionTypes';
 
 import {
   addComponent,
@@ -48,8 +48,8 @@ import {
   openExpansionPanel,
   changeImagePath,
   addProp,
-  deleteProp
-} from "../utils/componentReducer.util";
+  deleteProp,
+} from '../utils/componentReducer.util';
 
 // interface Child {
 //   childId: number;
@@ -66,11 +66,11 @@ import {
 // }
 
 const appComponent = {
-  id: "1",
+  id: '1',
   stateful: false,
-  title: "App",
+  title: 'App',
   parentIds: [],
-  color: "#FF6D00",
+  color: '#FF6D00',
   draggable: true,
   childrenIds: [],
   selectableParents: [],
@@ -81,12 +81,12 @@ const appComponent = {
     x: 110,
     y: 120,
     width: 50,
-    height: 50
+    height: 50,
   },
 
   childrenArray: [],
   nextChildId: 1,
-  focusChild: null
+  focusChild: null,
 };
 
 const initialApplicationState = {
@@ -105,13 +105,13 @@ const initialApplicationState = {
       x: 110,
       y: 120,
       width: 50,
-      height: 50
+      height: 50,
     },
-    draggable: true
+    draggable: true,
   },
   components: [appComponent],
-  appDir: "",
-  loading: false
+  appDir: '',
+  loading: false,
 };
 
 const componentReducer = (state = initialApplicationState, action) => {
@@ -121,9 +121,9 @@ const componentReducer = (state = initialApplicationState, action) => {
         ...state,
         ...action.payload.data,
         loading: false,
-        appDir: "",
+        appDir: '',
         successOpen: false,
-        errorOpen: false
+        errorOpen: false,
       };
     case ADD_COMPONENT:
       return addComponent(state, action.payload);
diff --git a/src/utils/componentReducer.util.js b/src/utils/componentReducer.util.js
