Merge pull request #3 from stormikph/deletePages

Delete pages

Author: diegovazquezny

app/src/containers/RightContainer.tsx

@@ -131,6 +131,13 @@ const RightContainer = (props): JSX.Element => {
     state.canvasFocus.componentId
   ]);
 
+  const isPage = (configTarget) : boolean => {
+    const { components, rootComponents } = state;
+    return components
+      .filter(component => rootComponents.includes(component.id))
+      .some(el => el.id === configTarget.id);
+  }
+
   // dispatch to 'UPDATE CSS' called when save button is clicked,
   // passing in style object constructed from all changed input values
   const handleSave = (): Object => {
@@ -156,6 +163,10 @@ const RightContainer = (props): JSX.Element => {
     dispatch({ type: 'DELETE CHILD', payload: {} });
   };
 
+  const handlePageDelete = (id) => () => {
+    dispatch({ type: 'DELETE PAGE', payload: { id }});
+  }
+  
   const handleDeleteReusableComponent = () => {
     dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   }
@@ -367,19 +378,29 @@ const RightContainer = (props): JSX.Element => {
                 DELETE INSTANCE
               </Button>
             </div>
-          ) : isReusable(configTarget) ?
-            (
+          ) : (isPage(configTarget) ? (
+              <div className={classes.buttonRow}>
+              <Button
+                color="secondary"
+                className={classes.button}
+                onClick={handlePageDelete(configTarget.id)}
+                >
+                DELETE PAGE
+              </Button>
+            </div>
+          ) : isReusable(configTarget) ? (
             <div className={classes.buttonRow}>
               <Button
                 color="secondary"
                 className={classes.button}
                 onClick={handleDeleteReusableComponent}
-              >
-                DELETE REUSABLE COMPONENT
+                >
+                DELETE PAGE
               </Button>
             </div>
-            ) : '' 
-          }
+          ) : 
+            ''
+          )}
         </div>
         <ProjectManager />
       </div>

app/src/reducers/componentReducer.ts

@@ -186,6 +186,8 @@ const reducer = (state: State, action: Action) => {
         parentComponent.children.push(newChild);
       }
       // if there is a childId (childId here references the direct parent of the new child) find that child and a new child to its children array
+
+  
       else {
         const directParent = findChild(parentComponent, childId);
         directParent.children.push(newChild);
@@ -310,6 +312,18 @@ const reducer = (state: State, action: Action) => {
       return { ...state, components, canvasFocus };
     }
 
+    case 'DELETE PAGE': {
+      const id: number = state.canvasFocus.componentId;
+      // console.log('id: ', id);
+
+      const components = [...state.components].filter(comp => comp.id != id);
+      // console.log('components: ', components);
+      updateIds(components);
+      // // console.log('all components', state.components);
+
+      const canvasFocus = { componentId: 1, childId: null }
+      return {...state, components, canvasFocus}
+    }
     case 'DELETE REUSABLE COMPONENT' : {
       // TODO: bug when deleting element inside page
         // can't edit component name