working branch

Author: john lim

app/src/components/main/Canvas.tsx

@@ -1,14 +1,10 @@
-import React, { useState, useContext } from 'react';
+import React, { 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) => {
@@ -17,18 +13,17 @@ const findNestedChild = (curr, components) => {
     });
     if (comp.children.length !== 0) findNestedChild(curr, comp.children);
   });
-
 };
 
 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 } });
@@ -41,48 +36,6 @@ 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,
@@ -92,41 +45,26 @@ function Canvas() {
         return;
       }
 
-      const runReducers = () => {
-        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
-            }
-          });
-        }
+      // 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
+          }
+        });
       }
-
-      const addingComponent = state.components.find(elem => elem.id === item.instanceTypeId);
-
-      if (item.instanceType === "HTML Element") {
-        return runReducers();
-      } else if (item.instanceType === 'Route Link') {
-        return runReducers();
-      } else if (checkChildren([addingComponent], currentComponent)) {
-        triedToNestIncorrectly();
-        return;
-      } 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
-        return runReducers();
+      // 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 => ({
@@ -146,12 +84,10 @@ 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>
   );
 }

app/src/reducers/componentReducer.ts

@@ -257,7 +257,6 @@ const reducer = (state: State, action: Action) => {
 
       const parentComponentId: number = state.canvasFocus.componentId;
       const components = [...state.components];
-      updateAllIds(components);
 
       // find component that we're adding a child to
       const parentComponent = findComponent(components, parentComponentId);
@@ -328,11 +327,7 @@ const reducer = (state: State, action: Action) => {
         componentId: state.canvasFocus.componentId,
         childId: newChild.childId
       };
-
-      let nextChildId: number = 1;
-      for (let i = 0; i < parentComponent.children.length; i+=1) {
-        nextChildId +=1;
-      }
+      const nextChildId = state.nextChildId + 1;
       return { ...state, components, nextChildId, canvasFocus };
     }
     // move an instance from one position in a component to another position in a component
@@ -376,23 +371,17 @@ const reducer = (state: State, action: Action) => {
         state.HTMLTypes
       );
 
-      let nextChildId: number = 1;
-      for (let i = 0; i < component.children.length; i+=1) {
-        nextChildId +=1;
-      }
-      updateAllIds(components);
-      return { ...state, components, nextChildId };
+      return { ...state, components };
     }
     // Change the focus component and child
     case 'CHANGE FOCUS': {
       const {
         componentId,
         childId
       }: { componentId: number; childId: number | null } = action.payload;
-      const canvasFocus = { componentId, childId };
-      const components = [...state.components];
-      updateAllIds(components);
-      return { ...state, canvasFocus, components };
+
+      const canvasFocus = { ...state.canvasFocus, componentId, childId };
+      return { ...state, canvasFocus };
     }
     case 'UPDATE CSS': {
       const { style } = action.payload;
@@ -418,7 +407,7 @@ const reducer = (state: State, action: Action) => {
     case 'DELETE CHILD': {
       // if in-focus instance is a top-level component and not a child, don't delete anything
 
-      // if (!state.canvasFocus.childId) return state;
+      if (!state.canvasFocus.childId) return state;
 
       // find the current component in focus
       const components = [...state.components];
@@ -443,23 +432,15 @@ const reducer = (state: State, action: Action) => {
         state.HTMLTypes
       );
 
-      let nextChildId: number = 1;
-      for (let i = 0; i < component.children.length; i+=1) {
-        nextChildId +=1;
-      }
-
-      let childId: null | number = ((state.canvasFocus.childId - 1) === 0) ? null : state.canvasFocus.childId - 1;
-      const canvasFocus = { ...state.canvasFocus, childId };
-      updateAllIds(components);
-      return { ...state, components, canvasFocus, nextChildId };
+      const canvasFocus = { ...state.canvasFocus, childId: null };
+      return { ...state, components, canvasFocus };
     }
 
     case 'DELETE PAGE': {
       const id: number = state.canvasFocus.componentId;
       const name: string = state.components[id - 1].name;
 
       const components: Component[] = deleteById(id, name);
-
       // rebuild rootComponents with correct page IDs
       const rootComponents = updateRoots(components);
       const canvasFocus = { componentId: 1, childId: null };
@@ -474,18 +455,17 @@ const reducer = (state: State, action: Action) => {
       const rootComponents: number[] = updateRoots(components);
 
       // iterate over the length of the components array
-      components.forEach((el, i) => {
+      for (let i = 0; i < components.length; i++) {
         // for each components' code, run the generateCode function to
         // update the code preview on the app
-        el.code = generateCode(
+        components[i].code = generateCode(
           components,
           components[i].id,
           rootComponents,
           state.projectType,
           state.HTMLTypes
         );
-      });
-
+      }
 
       const canvasFocus = { componentId: 1, childId: null };
 
@@ -574,14 +554,13 @@ const reducer = (state: State, action: Action) => {
 
     case 'OPEN PROJECT': {
       convertToJSX(action.payload.HTMLTypes);
-      // action.payload.canvasFocus = { ...action.payload.canvasFocus, childId: null}
       return {
         ...action.payload
       };
     }
 
     case 'ADD ELEMENT': {
-      const HTMLTypes: HTMLType[] = [...state.HTMLTypes];
+      const HTMLTypes = [...state.HTMLTypes];
       HTMLTypes.push(action.payload);
       return {
         ...state,
@@ -610,8 +589,7 @@ const reducer = (state: State, action: Action) => {
       })
       return {
         ...state,
-        HTMLTypes,
-        components
+        HTMLTypes
       };
     }