Added DELETE CHILD (action, reducer, button and more)

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/components/KonvaStage.jsx

@@ -51,6 +51,7 @@ class KonvaStage extends Component {
       focusComponent,
       focusChild,
       changeFocusChild,
+      deleteChild,
     } = this.props;
     const { selectedShapeName } = this.state;
 
@@ -83,6 +84,7 @@ class KonvaStage extends Component {
                 title={child.componentName + child.childId}
                 color={child.color}
                 handleTransform={handleTransform}
+                deleteChild={deleteChild}
               />
             ))}
         </Layer>

src/components/Rectangle.jsx

@@ -56,6 +56,7 @@ class Rectangle extends Component {
       focusChild,
       focusComponent,
       components,
+      deleteChild
     } = this.props;
 
     // the Group is responsible for dragging of all children

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 => ({
@@ -94,6 +96,7 @@ class MainContainer extends Component {
       focusComponent,
       focusChild,
       changeFocusChild,
+      deleteChild,
     } = this.props;
     const {
       increaseHeight,
@@ -122,8 +125,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,7 @@ 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,19 +68,20 @@ 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);
+  // console.log("view from addChild: ", view);
 
   const newChild = {
     childId: view.nextChildId.toString(),
@@ -119,6 +120,60 @@ export const addChild = (state, { title }) => {
   };
 };
 
+export const deleteChild = (state, {} )=>{
+ // The child to delete is the FOCUSED child 
+ // THE parent is the FOCUSED component 
+
+  console.log((`Focused Component (parent) id:${state.focusComponent.id} title:${state.focusComponent.title}
+ Focused Child (the one 2 be deleted) ChildID:${state.focusChild.childId}`)
+)
+
+ 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) ; 
+ console.log('currFocusedComponent: ' ,currFocusedComponent )
+ // copy the Children Array of the foxused component 
+
+ console.log('Wtf ?')
+ const copyOfChildrenArray = [...currFocusedComponent.childrenArray]
+console.log('copyOfChildrenArray',copyOfChildrenArray)
+console.log('after copy : state.focusChild.childId:',state.focusChild.childId)
+ // delete the SELECTED CHILD from the copied array 
+  const indexToDelete = copyOfChildrenArray.findIndex( elem => elem.childId == state.focusChild.childId)
+  console.log(`Index to delete : ${indexToDelete}`)
+
+  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
+  }
+
+  console.log(`copyOfFocusedComponent:`)
+  console.log(copyOfFocusedComponent)
+  // 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
+  ]
+console.log('modifiedComponentArray')
+console.log(modifiedComponentArray)
+
+  // 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 }