Merge branch 'master' into theme-changer

Author: brianjshan

app/src/components/left/ComponentPanel.tsx

@@ -162,7 +162,6 @@ const ComponentPanel = (): JSX.Element => {
           {state.components
             .filter(comp => state.rootComponents.includes(comp.id))
             .map(comp => {
-              //console.log('root comp', comp.name)
               return (
                 <ComponentPanelItem
                   isFocus={isFocus(comp.id)}
@@ -180,8 +179,6 @@ const ComponentPanel = (): JSX.Element => {
           {state.components
             .filter(comp => !state.rootComponents.includes(comp.id))
             .map(comp => {
-              //console.log('all root comps', state.rootComponents);
-              //console.log('all reusable comps', state.components);
               return (
                 <ComponentPanelItem
                   isFocus={isFocus(comp.id)}

app/src/components/left/ComponentPanelItem.tsx

@@ -14,7 +14,6 @@ const ComponentPanelItem: React.FC<{
 }> = ({ name, id, root, isFocus }) => {
   const classes = useStyles();
   const [state, dispatch] = useContext(stateContext);
-
   // useDrag hook allows components in left panel to be drag source
   const [{ isDragging }, drag] = useDrag({
     item: {

app/src/components/left/HTMLPanel.tsx

@@ -14,6 +14,8 @@ const HTMLPanel = (): JSX.Element => {
   const [errorMsg, setErrorMsg] = useState('');
   const [errorStatus, setErrorStatus] = useState(false);
 
+  const buttonClasses = "MuiButtonBase-root MuiButton-root MuiButton-text makeStyles-button-12 MuiButton-textPrimary";
+
   const handleTagChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     resetError();
     setTag(e.target.value);
@@ -138,12 +140,7 @@ const HTMLPanel = (): JSX.Element => {
               />
               {errorStatus && <span>{errorMsg}</span>}
             </label>
-            <input
-              className={classes.button}
-              color="primary"
-              type="submit"
-              value="Add Element"
-            />
+            <input className={buttonClasses} color="primary" type="submit" value="Add Element" style={{marginTop:'15px'}}/>
           </form>
         </div>
       </div>

app/src/components/main/Canvas.tsx

@@ -30,7 +30,6 @@ 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;
@@ -49,7 +48,6 @@ 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: {
@@ -75,8 +73,7 @@ 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

@@ -71,7 +71,6 @@ 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/constants/ErrorMessages.ts

@@ -0,0 +1,6 @@
+export default {
+  deleteIndexTitle: 'You cannot delete index.',
+  deleteIndexMessage: 'You must have at least one page.',
+  deleteComponentTitle: 'You cannot delete this component.',
+  deleteComponentMessage: 'Reusable components inside of a page must be deleted from the page.'
+}

app/src/containers/RightContainer.tsx

@@ -1,15 +1,19 @@
-import React, { useState, useContext, useEffect, useMemo } from 'react';
-
+import React, { useState, useContext, useEffect, useMemo, Component } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import MenuItem from '@material-ui/core/MenuItem';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
-
 import { stateContext } from '../context/context';
-
+import HTMLTypes from '../context/HTMLTypes';
 import ProjectManager from '../components/right/ProjectManager';
+import Dialog from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogTitle from '@material-ui/core/DialogTitle';
+import ErrorMessages from '../constants/ErrorMessages';
 
 // need to pass in props to use the useHistory feature of react router
 const RightContainer = (props): JSX.Element => {
@@ -22,10 +26,11 @@ const RightContainer = (props): JSX.Element => {
   const [BGColor, setBGColor] = useState('');
   const [compWidth, setCompWidth] = useState('');
   const [compHeight, setCompHeight] = useState('');
+  const [dialogError, setDialogError] = useState(false);
+  const [deleteIndexError, setDeleteIndexError] = useState(false);
+  const [deleteComponentError, setDeleteComponentError] = useState(false);
 
   const resetFields = () => {
-    //console.log(configTarget);
-    //console.log(configTarget.children);
     const style = configTarget.child
       ? configTarget.child.style
       : configTarget.style;
@@ -137,6 +142,25 @@ const RightContainer = (props): JSX.Element => {
       .some(el => el.id === configTarget.id);
   }
 
+  const isIndex = (): boolean => configTarget.id === 1;  
+
+  const isChildOfPage = (): boolean => {
+    // TODO: refactor
+    // TODO: output parent name and id to refocus canvas on parent
+    let isChild: boolean = false;
+    const { id } = configTarget;
+    state.components.forEach(comp => {
+      comp.children.forEach(child => {
+        if (child.type === 'Component' && child.typeId === id) {
+          isChild = true;
+        }
+      });
+    });
+    return isChild;
+  }
+
+
+
   // dispatch to 'UPDATE CSS' called when save button is clicked,
   // passing in style object constructed from all changed input values
   const handleSave = (): Object => {
@@ -163,11 +187,16 @@ const RightContainer = (props): JSX.Element => {
   };
 
   const handlePageDelete = (id) => () => {
-    dispatch({ type: 'DELETE PAGE', payload: { id }});
+    // TODO: return modal 
+    isIndex() 
+      ? handleDialogError('index') 
+      : dispatch({ type: 'DELETE PAGE', payload: { id }});
   }
-
+  
   const handleDeleteReusableComponent = () => {
-    dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
+    isChildOfPage()
+    ? handleDialogError('component')
+    : dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   }
 
   const isReusable = (configTarget): boolean => {
@@ -177,6 +206,16 @@ const RightContainer = (props): JSX.Element => {
       .some(el => el.id == configTarget.id);
   }
 
+  const handleDialogError = (err) => {
+    if (err === 'index') setDeleteIndexError(true);
+    else setDeleteComponentError(true);
+  }
+
+  const handleCloseDialogError = () => {
+    setDeleteIndexError(false);
+    setDeleteComponentError(false);
+  }
+
   return (
     <div className="column right ">
       <div className="rightPanelWrapper">
@@ -387,22 +426,57 @@ const RightContainer = (props): JSX.Element => {
                 DELETE PAGE
               </Button>
             </div>
-          ) : isReusable(configTarget) ? (
+          ) : (
             <div className={classes.buttonRow}>
               <Button
                 color="secondary"
                 className={classes.button}
                 onClick={handleDeleteReusableComponent}
                 >
-                DELETE PAGE
+                DELETE REUSABLE COMPONENT
               </Button>
             </div>
-          ) :
-            ''
+          ) 
           )}
         </div>
         <ProjectManager />
       </div>
+      <Dialog
+        open={deleteIndexError}
+        onClose={handleCloseDialogError}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">{ErrorMessages.deleteIndexTitle}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+          {ErrorMessages.deleteIndexMessage}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialogError} color="primary">
+            OK
+          </Button>
+        </DialogActions>
+      </Dialog>
+      <Dialog
+        open={deleteComponentError}
+        onClose={handleCloseDialogError}
+        aria-labelledby="alert-dialog-title"
+        aria-describedby="alert-dialog-description"
+      >
+        <DialogTitle id="alert-dialog-title">{ErrorMessages.deleteComponentTitle}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id="alert-dialog-description">
+          {ErrorMessages.deleteComponentMessage}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCloseDialogError} color="primary">
+            OK
+          </Button>
+        </DialogActions>
+      </Dialog>
     </div>
   );
 };