Delete functionality for reusable components and pages

Author: stormikph

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;
@@ -106,6 +106,12 @@ const ComponentPanel = (): JSX.Element => {
     return state.canvasFocus.componentId === targetId ? true : false;
   };
 
+  const deleteReusableComponent = (id) => {
+    // reducer to modify state.components
+    // make sure the component is not a root
+    // 
+  }
+
   return (
     <div className={classes.panelWrapper}>
       {/* Add a new component*/}
@@ -155,30 +161,35 @@ const ComponentPanel = (): JSX.Element => {
         <Grid container direction="row" justify="center" alignItems="center">
           {state.components
             .filter(comp => state.rootComponents.includes(comp.id))
-            .map(comp => (
+            .map(comp => {
+              //console.log('root comp', comp.name)
+              return (
               <ComponentPanelItem
                 isFocus={isFocus(comp.id)}
                 key={`comp-${comp.id}`}
                 name={comp.name}
                 id={comp.id}
                 root={true}
               />
-            ))}
+            )})}
         </Grid>
         {/* Display all reusable components */}
         <h4>Reusable components</h4>
         <Grid container direction="row" justify="center" alignItems="center">
           {state.components
             .filter(comp => !state.rootComponents.includes(comp.id))
-            .map(comp => (
+            .map(comp => {
+              //console.log('all root comps', state.rootComponents);
+              //console.log('all reusable comps', state.components);
+              return (
               <ComponentPanelItem
                 isFocus={isFocus(comp.id)}
                 key={`comp-${comp.id}`}
                 name={comp.name}
                 id={comp.id}
                 root={false}
               />
-            ))}
+            )})}
         </Grid>
         {/* Display navigation components - (only applies to next.js which has routing built in) */}
         {state.projectType === 'Next.js' ? (

app/src/components/main/Canvas.tsx

@@ -30,6 +30,7 @@ function Canvas() {
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
     drop: (item: DragItem, monitor: DropTargetMonitor) => {
+      //console.log(isOver);
       const didDrop = monitor.didDrop(); // returns false for direct drop target
       if (didDrop) {
         return;
@@ -48,6 +49,7 @@ function Canvas() {
       }
       // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
       else {
+        console.log('dispatch change position')
         dispatch({
           type: 'CHANGE POSITION',
           payload: {
@@ -73,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

@@ -25,6 +25,8 @@ const RightContainer = (props): JSX.Element => {
   const [compHeight, setCompHeight] = useState('');
 
   const resetFields = () => {
+    //console.log(configTarget);
+    //console.log(configTarget.children);
     const style = configTarget.child
       ? configTarget.child.style
       : configTarget.style;
@@ -165,6 +167,17 @@ const RightContainer = (props): JSX.Element => {
     dispatch({ type: 'DELETE PAGE', payload: { id }});
   }
 
+  const handleDeleteReusableComponent = () => {
+    dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
+  }
+
+  const isReusable = (configTarget): boolean => {
+    return state.components
+      .filter(comp => !state.rootComponents
+      .includes(comp.id))
+      .some(el => el.id == configTarget.id);
+  }
+
   return (
     <div className="column right ">
       <div className="rightPanelWrapper">
@@ -366,12 +379,22 @@ const RightContainer = (props): JSX.Element => {
               </Button>
             </div>
           ) : (isPage(configTarget) ? (
-            <div className={classes.buttonRow}>
+              <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 PAGE
               </Button>
             </div>

app/src/helperFunctions/generateCode.ts

@@ -245,6 +245,10 @@ const generateCode = (
   rootComponents: number[],
   projectType: string
 ) => {
+  // console.log('components', components);
+  // console.log('componentId', componentId);
+  // console.log('rootComponents', rootComponents);
+  // console.log('projectType', projectType);
   const code = generateUnformattedCode(
     components,
     componentId,

app/src/index.js

@@ -17,12 +17,14 @@ import {
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
     {...rest}
-    render={props =>
-      Cookies.get('ssid') || window.localStorage.getItem('ssid') ? (
+    render={props => {
+      //console.log(props);
+      return Cookies.get('ssid') || window.localStorage.getItem('ssid') ? (
         <Component {...props} />
-      ) : (
-        <Redirect to="/login" />
-      )
+        ) : (
+          <Redirect to="/login" />
+          )
+      }
     }
   />
 );

app/src/reducers/componentReducer.ts

@@ -24,7 +24,8 @@ const reducer = (state: State, action: Action) => {
     // We're going to keep track of the nodes we need to search through with an Array
     //  Initialize this array with the top level node
     const nodeArr: (Component | ChildElement)[] = [component];
-
+    nodeArr.forEach(node => console.log('node', node));
+    //console.log('nodeArr', nodeArr);
     // iterate through each node in the array as long as there are elements in the array
     while (nodeArr.length > 0) {
       // shift off the first value and assign to an element
@@ -87,8 +88,25 @@ 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)
+    components.forEach((comp, i) => comp.id = i + 1);
   }
 
   switch (action.type) {
@@ -273,13 +291,15 @@ const reducer = (state: State, action: Action) => {
         components,
         state.canvasFocus.componentId
       );
-
+      console.log('curr comp', component);
       // find the moved element's former parent
       // delete the element from it's former parent's children array
       const { directParent, childIndexValue } = findParent(
         component,
         state.canvasFocus.childId
       );
+      console.log('direct parent', directParent);
+      console.log('child index', childIndexValue);
       const child = { ...directParent.children[childIndexValue] };
       directParent.children.splice(childIndexValue, 1);
       component.code = generateCode(
@@ -304,6 +324,30 @@ const reducer = (state: State, action: Action) => {
       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
+        // 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