tutorial reusable comps bugs canvas reordering etc

john lim · john lim · commit 2c8b2335fbf6 · 2020-11-12T04:56:48.000-08:00
diff --git a/app/electron/main.js b/app/electron/main.js
@@ -229,7 +229,9 @@ app.on('web-contents-created', (event, contents) => {
       'https://github.com',
       'https://nextjs.org',
       'https://www.facebook.com',
-      'https://developer.mozilla.org'
+      'https://developer.mozilla.org',
+      'https://www.smashingmagazine.com',
+      'https://www.html5rocks.com'
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
     if (!validOrigins.includes(parsedUrl.origin)) {
@@ -251,7 +253,9 @@ app.on('web-contents-created', (event, contents) => {
       'https://github.com',
       'https://nextjs.org',
       'https://developer.mozilla.org',
-      'https://www.facebook.com'
+      'https://www.facebook.com',
+      'https://www.smashingmagazine.com',
+      'https://www.html5rocks.com'
     ];
 
     // Log and prevent the app from redirecting to a new page
@@ -292,7 +296,9 @@ app.on('web-contents-created', (event, contents) => {
       'https://nextjs.org',
       'https://developer.mozilla.org',
       'https://github.com',
-      'https://www.facebook.com'
+      'https://www.facebook.com',
+      'https://www.smashingmagazine.com',
+      'https://www.html5rocks.com'
     ];
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
     if (!validOrigins.includes(parsedUrl.origin)) {
diff --git a/app/electron/menu.js b/app/electron/menu.js
@@ -4,6 +4,7 @@ const fs = require('fs');
 const path = require('path');
 const isMac = process.platform === 'darwin';
 const port = 5000;
+const Protocol = require('./protocol');
 const tutorialRoute = `http://localhost:${port}/tutorial`;
 
 // Create a template for a menu and create menu using that template
@@ -30,7 +31,12 @@ var MenuBuilder = function(mainWindow, appName) {
         devTools: false
       }
     });
-    tutorial.loadURL(`http://localhost:8080/#/tutorial`);
+    console.log(process.env.NODE_ENV);
+    if (process.env.NODE_ENV === 'development') {
+      tutorial.loadURL(`http://localhost:8080/#/tutorial`);}
+    else {
+      tutorial.loadURL(`${Protocol.scheme}://rse/index-prod.html#/tutorial`);
+    }
     tutorial.show();
   };
 
diff --git a/app/src/components/left/HTMLItem.tsx b/app/src/components/left/HTMLItem.tsx
@@ -61,7 +61,7 @@ const HTMLItem: React.FC<{
     const children = (
       <List className="export-preference">
         <ListItem
-          key={'clear'}
+          key={`clear${deleteID}`}
           button
           onClick={() => handleDelete(deleteID)}
           style={{
@@ -77,7 +77,7 @@ const HTMLItem: React.FC<{
           />
         </ListItem>
         <ListItem
-          key={'close'}
+          key={`close${deleteID}`}
           button
           onClick={closeModal}
           style={{
@@ -111,7 +111,7 @@ const HTMLItem: React.FC<{
   };
 
   return (
-    <Grid item xs={5} key={`html-${name}`}>
+    <Grid item xs={5} key={`html-g${name}`}>
       <div ref={drag} className={classes.HTMLPanelItem}>
         <h3>{name}</h3>
         <span
diff --git a/app/src/components/main/Canvas.tsx b/app/src/components/main/Canvas.tsx
@@ -1,29 +1,38 @@
-import React, { useContext } from 'react';
+import React, { useState, useContext } from 'react';
 import { useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import createModal from '../right/createModal';
 
-const findNestedChild = (curr, components) => {
-  components.forEach((comp, i) => {
-    comp.children.forEach(child => {
-      if (child.name === curr.name) console.log('childname', child.name);
-    });
-    if (comp.children.length !== 0) findNestedChild(curr, comp.children);
-  });
+const checkChildren = (child, currentComponent) => {
+  for (let i = 0; i < child.length; i+=1) {
+    if (child[i].children.length) {
+      for (let j = 0; j < child[i].children.length; j+=1) {
+        if (child[i].children[j].name === currentComponent.name) {
+          return true;
+        }
+      }
+      return checkChildren(child[i].children, currentComponent);
+    }
+  }
+  return false;
 };
 
 function Canvas() {
+  const [modal, setModal] = useState(null);
+
   const [state, dispatch] = useContext(StateContext);
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
-  findNestedChild(currentComponent, state.components);
-
   // changes focus of the canvas to a new component / child
   const changeFocus = (componentId: number, childId: number | null) => {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
@@ -36,6 +45,48 @@ function Canvas() {
     changeFocus(state.canvasFocus.componentId, null);
   }
 
+  const closeModal = () => setModal(null);
+
+  // creates modal that asks if user wants to clear workspace
+  // if user clears their workspace, then their components are removed from state and the modal is closed
+  const triedToNestIncorrectly = () => {
+    // set modal options
+    const children = (
+      <List className="export-preference">
+        <ListItem
+          key={`gotIt${state.canvasFocus.componentId}`}
+          button
+          onClick={closeModal}
+          style={{
+            border: '1px solid #3f51b5',
+            marginBottom: '2%',
+            marginTop: '5%'
+          }}
+        >
+          <ListItemText
+            primary={'Got it'}
+            style={{ textAlign: 'center' }}
+            onClick={closeModal}
+          />
+        </ListItem>
+      </List>
+    );
+
+    // create modal
+    setModal(
+      createModal({
+        closeModal,
+        children,
+        message: 'Unable to nest component in another component that contains that component.',
+        primBtnLabel: null,
+        primBtnAction: null,
+        secBtnAction: null,
+        secBtnLabel: null,
+        open: true
+      })
+    );
+  };
+
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
@@ -45,26 +96,33 @@ function Canvas() {
         return;
       }
 
-      // 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) {
-        dispatch({
-          type: 'ADD CHILD',
-          payload: {
-            type: item.instanceType,
-            typeId: item.instanceTypeId,
-            childId: null
-          }
-        });
-      }
-      // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
-      else {
-        dispatch({
-          type: 'CHANGE POSITION',
-          payload: {
-            currentChildId: item.childId,
-            newParentChildId: null
-          }
-        });
+      const addingComponent = state.components.find(elem => elem.id === item.instanceTypeId);
+
+      if (checkChildren([addingComponent], currentComponent)) {
+        triedToNestIncorrectly();
+      } else {
+        // 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("still added");
+          dispatch({
+            type: 'ADD CHILD',
+            payload: {
+              type: item.instanceType,
+              typeId: item.instanceTypeId,
+              childId: null
+            }
+          });
+        }
+        // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
+        else {
+          dispatch({
+            type: 'CHANGE POSITION',
+            payload: {
+              currentChildId: item.childId,
+              newParentChildId: null
+            }
+          });
+        }
       }
     },
     collect: monitor => ({
@@ -84,10 +142,12 @@ function Canvas() {
   // The render children function renders all direct children of a given component
   // Direct children are draggable/clickable
 
+
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
     <div ref={drop} style={canvasStyle} onClick={onClickHandler}>
       {renderChildren(currentComponent.children)}
+      {modal}
     </div>
   );
 }
diff --git a/app/src/components/main/DirectChildComponent.tsx b/app/src/components/main/DirectChildComponent.tsx
@@ -125,7 +125,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
                 placeHolder={HTMLDefaultPlaceholder}
                 linkId={null}
                 key={
-                  'indChild' +
+                  'indChildHTML' +
                   child.childId.toString() +
                   child.typeId.toString()
                 }
@@ -138,7 +138,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
                 placeHolder={HTMLDefaultPlaceholder}
                 linkId={null}
                 key={
-                  'indChild' +
+                  'indChildNest' +
                   child.childId.toString() +
                   child.typeId.toString()
                 }
@@ -155,7 +155,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
         return (
           <IndirectChild
             key={
-              'indChild' + child.childId.toString() + child.typeId.toString()
+              'RouteLink' + child.childId.toString() + child.typeId.toString()
             }
             style={combinedStyle}
             placeHolder=""
diff --git a/app/src/context/HTMLTypes.tsx b/app/src/context/HTMLTypes.tsx
@@ -66,7 +66,7 @@ const HTMLTypes: HTMLType[] = [
     tag: 'a',
     name: 'Link',
     style: { border: 'none' },
-    placeHolderShort: <a href="">Link</a>,
+    placeHolderShort: <a href="#">Link</a>,
     placeHolderLong: '',
     icon: LinkIcon
   },
diff --git a/app/src/helperFunctions/renderChildren.tsx b/app/src/helperFunctions/renderChildren.tsx
@@ -24,7 +24,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           style={style}
-          key={'DirChild' + childId.toString()}
+          key={'DirChildComp' + childId.toString() + name}
           name={child.name}
         />
       );
@@ -37,7 +37,7 @@ const renderChildren = (children: ChildElement[]) => {
           type={type}
           typeId={typeId}
           style={style}
-          key={'DirChild' + childId.toString()}
+          key={'DirChildHTML' + childId.toString() + name}
           name={child.name}
         />
       );
@@ -51,7 +51,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           style={style}
           children={children}
-          key={'DirChild' + childId.toString()}
+          key={'DirChildHTMLNest' + childId.toString() + name}
           name={child.name}
         />
       );
@@ -66,7 +66,7 @@ const renderChildren = (children: ChildElement[]) => {
           typeId={typeId}
           style={style}
           children={children}
-          key={'DirChild' + childId.toString()}
+          key={'RouteLink' + childId.toString() + name}
           name={child.name}
         />
       );
diff --git a/app/src/reducers/componentReducer.ts b/app/src/reducers/componentReducer.ts
diff --git a/app/src/tutorial/HtmlElements.tsx b/app/src/tutorial/HtmlElements.tsx
