del reusable comps

Author: diegovazquezny

app/electron/main.js

@@ -396,3 +396,5 @@ ipcMain.on('github', event => {
     }
   });
 });
+
+//module.exports = dialog;

app/src/components/left/ComponentPanel.tsx

@@ -82,7 +82,7 @@ const ComponentPanel = (): JSX.Element => {
   };
 
   const handleNameSubmit = () => {
-    let letters = /[a-z]/;
+    let letters = /[a-zA-Z]/;
     if (!compName.charAt(0).match(letters)) {
       triggerError('letters');
       return;

app/src/components/main/Canvas.tsx

@@ -38,7 +38,6 @@ function Canvas() {
 
       // if item dropped is going to be a new instance (i.e. it came from the left panel), then create a new child component
       if (item.newInstance) {
-        console.log('new item dropped')
         dispatch({
           type: 'ADD CHILD',
           payload: {
@@ -76,6 +75,8 @@ function Canvas() {
   // Combine the default styles of the canvas with the custom styles set by the user for that component
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
+  //console.log('curr comp =>', currentComponent);
+  //console.log('curr comp style', currentComponent.style);
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
     <div ref={drop} style={canvasStyle} onClick={onClickHandler}>

app/src/components/main/DirectChildComponent.tsx

@@ -72,6 +72,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
   const renderIndirectChildren = (
     referencedComponent: Component | ChildElement
   ) => {
+    console.log('referenced comp => ', referencedComponent);
     // iterate through all children of referenced
     return referencedComponent.children.map(child => {
       if (child.type === 'Component') {

app/src/containers/RightContainer.tsx

@@ -156,9 +156,8 @@ const RightContainer = (props): JSX.Element => {
     dispatch({ type: 'DELETE CHILD', payload: {} });
   };
 
-  const handleDeleteReusableComponent = (id) => () => {
-    //console.log(id);
-    dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: { id} });
+  const handleDeleteReusableComponent = () => {
+    dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   }
 
   const isReusable = (configTarget): boolean => {
@@ -374,7 +373,7 @@ const RightContainer = (props): JSX.Element => {
               <Button
                 color="secondary"
                 className={classes.button}
-                onClick={handleDeleteReusableComponent(configTarget.id)}
+                onClick={handleDeleteReusableComponent}
               >
                 DELETE REUSABLE COMPONENT
               </Button>

app/src/reducers/componentReducer.ts

@@ -88,6 +88,27 @@ const reducer = (state: State, action: Action) => {
     return;
   };
 
+  const isChildOfPage = (id: number): boolean => {
+    // TODO: refactor
+    // TODO: output parent name and id to refocus canvas on parent
+    let isChild: boolean = false;
+    state.components.forEach(comp => {
+      console.log('comp =>', comp);
+      comp.children.forEach(child => {
+        if (child.type === 'Component' && child.typeId === id) {
+          isChild = true;
+          console.log('parent name =>', comp.name);
+          console.log('parent id =>', comp.name);
+        }
+      });
+    });
+    return isChild;
+  }
+
+  const updateIds = (components: Array<Object>) => {
+    components.forEach((comp, i) => comp.id = i + 1);
+  }
+
   switch (action.type) {
     // Add a new component type
     // add component to the component array and increment our counter for the componentId
@@ -290,39 +311,29 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'DELETE REUSABLE COMPONENT' : {
-      // const component = findComponent(
-      //   components,
-      //   state.canvasFocus.componentId
-      //   );
-      const { id } = action.payload;
-        // slice id out of components
-      const components = [...state.components].filter(comp => comp.id != id);
-      const component = findComponent(
-        state.components,
-        state.canvasFocus.componentId
-      );
-      //const newComponents = components
-
-      console.log('components', state.components);
-      console.log('new components', components);
-      //console.log('id', id);
-      //console.log(state.canvasFocus.componentId);
-      // component.code = generateCode(
-      //   components,
-      //   state.canvasFocus.componentId,
-      //   [...state.rootComponents],
-      //   state.projectType
-      // );
-      //console.log('deleted component', component);
-      //component.code = '';
-      const canvasFocus = { ...state.canvasFocus, childId: null };
-      return {...state, components, canvasFocus};
-    }
-
-
-
+      // TODO: bug when deleting element inside page
+        // can't edit component name
+        // happens sometimes. not sure exactly when
+
+      const id: number = state.canvasFocus.componentId;
+      // check if component is a child element of a page
+      if(isChildOfPage(id)) {
+        // TODO: include name of parent in alert
+        // TODO: change canvas focus to parent  
+        //dialog.showErrorBox('error','Reusable components inside of a page must be deleted from the page');
+        alert('Reusable components inside of a page must be deleted from the page');
+        //const canvasFocus:Object = { componentId: id, childId: null };
+        return  { ...state }
+      }
+      // filter out components that don't match id
+      const components: Array<Object> = [...state.components].filter(comp => comp.id != id);
 
+      updateIds(components);
 
+      // TODO: temporary fix. should point to id directly 
+      const canvasFocus = { componentId: 1, childId: null };
+      return {...state, components, canvasFocus};
+    }
 
     case 'SET INITIAL STATE': {
       // set the canvas focus to be the first component