merged with Shlomo delete button

Author: ChristianEdwardPadilla

src/actionTypes/index.js

@@ -1,6 +1,7 @@
 export const LOAD_INIT_DATA = "LOAD_INIT_DATA";
 export const ADD_COMPONENT = "ADD_COMPONENT";
 export const ADD_CHILD = "ADD_CHILD";
+export const DELETE_CHILD = "DELETE_CHILD";
 export const UPDATE_COMPONENT = "UPDATE_COMPONENT";
 export const DELETE_COMPONENT = "DELETE_COMPONENT";
 export const CHANGE_FOCUS_COMPONENT = "CHANGE_FOCUS_COMPONENT";

src/actions/components.js

@@ -2,6 +2,7 @@ import {
   LOAD_INIT_DATA,
   ADD_COMPONENT,
   ADD_CHILD,
+  DELETE_CHILD,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
@@ -63,12 +64,14 @@ export const parentReassignment = ({ index, id, parentIds }) => ({
 
 export const addComponent = ({ title }) => dispatch => {
   dispatch({ type: ADD_COMPONENT, payload: { title } });
-  // dispatch({ type: SET_SELECTABLE_PARENTS });
 };
 
 export const addChild = ({ title }) => dispatch => {
   dispatch({ type: ADD_CHILD, payload: { title } });
-  // dispatch({ type: SET_SELECTABLE_PARENTS });
+};
+
+export const deleteChild = ({ title }) => dispatch => {
+  dispatch({ type: DELETE_CHILD, payload: { title } });
 };
 
 export const deleteComponent = ({ index, id, parentIds = [] }) => dispatch => {

src/containers/MainContainer.jsx

@@ -12,6 +12,7 @@ import {
   openExpansionPanel,
   handleTransform,
   changeFocusChild,
+  deleteChild,
 } from '../actions/components';
 import KonvaStage from '../components/KonvaStage.jsx';
 // import MainContainerHeader from '../components/MainContainerHeader.jsx';
@@ -34,6 +35,7 @@ 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 })),
 });
 
 const mapStateToProps = store => ({
@@ -58,20 +60,6 @@ class MainContainer extends Component {
 
   componentDidMount() {}
 
-  // increaseHeight = () => {
-  //   this.setState({
-  //     scaleX: this.state.scaleX * 1.5,
-  //     scaleY: this.state.scaleY * 1.5,
-  //   });
-  // };
-
-  // decreaseHeight = () => {
-  //   this.setState({
-  //     scaleX: this.state.scaleX * 0.75,
-  //     scaleY: this.state.scaleY * 0.75,
-  //   });
-  // };
-
   toggleDrag = () => {
     this.props.toggleComponentDragging(this.state.draggable);
     this.setState({
@@ -94,6 +82,7 @@ class MainContainer extends Component {
       focusComponent,
       focusChild,
       changeFocusChild,
+      deleteChild,
     } = this.props;
     const {
       increaseHeight,
@@ -122,8 +111,10 @@ class MainContainer extends Component {
               focusComponent={focusComponent}
               focusChild={focusChild}
               changeFocusChild={changeFocusChild}
+              deleteChild={deleteChild}
             />
           </div>
+          <button onClick={deleteChild}>`delete focused child`</button>
         </div>
       </MuiThemeProvider>
     );

src/reducers/componentReducer.js

@@ -2,6 +2,7 @@ import {
   LOAD_INIT_DATA,
   ADD_COMPONENT,
   ADD_CHILD,
+  DELETE_CHILD,
   UPDATE_COMPONENT,
   DELETE_COMPONENT,
   CHANGE_FOCUS_COMPONENT,
@@ -29,6 +30,7 @@ import {
 import {
   addComponent,
   addChild,
+  deleteChild,
   updateComponent,
   deleteComponent,
   changeFocusComponent,
@@ -127,6 +129,8 @@ const componentReducer = (state = initialApplicationState, action) => {
       return addComponent(state, action.payload);
     case ADD_CHILD:
       return addChild(state, action.payload);
+    case DELETE_CHILD:
+      return deleteChild(state, action.payload);
     case UPDATE_COMPONENT:
       return updateComponent(state, action.payload);
     case DELETE_COMPONENT:

src/utils/componentReducer.util.js

@@ -32,7 +32,9 @@ export const addComponent = (state, { title }) => {
     .replace(/[-_\s0-9\W]+/gi, '');
 
   if (state.components.find(comp => comp.title === strippedTitle)) {
-    // alert the user that duplicate component names are not allowed
+    window.alert(
+      `a component with the name: "${strippedTitle}" already exists.\n Please think of another name.`,
+    );
     return {
       ...state,
     };
@@ -68,18 +70,17 @@ export const addComponent = (state, { title }) => {
 // get the focus component (aka the component were adding the child to)
 
 export const addChild = (state, { title }) => {
-  const strippedTitle = title
-    .replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
-    .replace(/[-_\s0-9\W]+/gi, '');
+  const strippedTitle = title;
+  // .replace(/[a-z]+/gi, word => word[0].toUpperCase() + word.slice(1))
+  // .replace(/[-_\s0-9\W]+/gi, "");
 
-  // view represents the component that this child will live (and be rendered) in
+  // view represents the curretn FOCUSED COMPONENT - this is the component where the child is being added to
+  // we only add childrent (or do any action) to the focused omconent
   const view = state.components.find(comp => comp.title === state.focusComponent.title);
 
   // parentComponent is the component this child is generated from (ex. instance of Box has comp of Box)
   const parentComponent = state.components.find(comp => comp.title === title);
 
-  console.log('view from addChild: ', view);
-
   const newChild = {
     childId: view.nextChildId.toString(),
     childComponentId: parentComponent.id,
@@ -117,6 +118,48 @@ export const addChild = (state, { title }) => {
   };
 };
 
+export const deleteChild = (state, {}) => {
+  // The child to delete is the FOCUSED child
+  // THE parent is the FOCUSED component
+
+  if (!state.focusComponent.id) return window.alert('Cannot delete Child if Focused component id = ZERO');
+  if (!state.focusChild.childId) return window.alert('Cannot delete Child if Focused Child id = ZERO');
+  // I'm not sure what the "focused component" is (a reference, a copy or ?
+  // So, let's  get a reference to the focused component ..
+  const currFocusedComponent = state.components.find(c => c.id == state.focusComponent.id);
+
+  // copy the Children Array of the foxused component
+  const copyOfChildrenArray = [...currFocusedComponent.childrenArray];
+  // delete the SELECTED CHILD from the copied array
+  const indexToDelete = copyOfChildrenArray.findIndex(
+    elem => elem.childId == state.focusChild.childId,
+  );
+
+  if (indexToDelete < 0) return window.alert('DeleteChild speaking here. The chils u r trying to delete was not found');
+
+  copyOfChildrenArray.splice(indexToDelete, 1);
+
+  // Make a copy of the focused component - this is the one we will modify
+  const copyOfFocusedComponent = {
+    ...currFocusedComponent,
+    childrenArray: copyOfChildrenArray,
+  };
+
+  // copy the entire compoenents array from state
+  const modifiedComponentArray = [
+    ...state.components.filter(c => c.id !== currFocusedComponent.id), // all elements besides the one just changed
+    copyOfFocusedComponent,
+  ];
+
+  // RETURN - update state...
+  return {
+    ...state,
+    components: modifiedComponentArray,
+    focusComponent: copyOfFocusedComponent, // problem! the delete works on State.components, but not on FOcus component.. starnge..
+    focusChild: {}, // reset to blank.
+  };
+};
+
 export const handleTransform = (state, {
   componentId, childId, x, y, width, height,
 }) => {