Merge branch 'master' into githuboauth

Author: andrewjcho84

src/components/AppNew.tsx

@@ -4,7 +4,8 @@ import '../public/styles/styleNew.css';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import AppContainer from '../containers/AppContainer';
-import { initialState, stateContext } from '../context/context';
+import { stateContext } from '../context/context';
+import initialState from '../context/initialState';
 import reducer from '../reducers/componentReducerNew';
 // import { Context, State } from '../interfaces/InterfacesNew';
 

src/components/left/ComponentPanelItemNew.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import Grid from '@material-ui/core/Grid';
-
+import { stateContext } from '../../context/context';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 
@@ -10,19 +10,27 @@ const ComponentPanelItem: React.FC<{
   root: Boolean;
   focusClick: any;
 }> = ({ name, id, root, focusClick }) => {
+  const [state, dispatch] = useContext(stateContext);
   // useDrag hook allows components in left panel to be drag source
   const [{ isDragging }, drag] = useDrag({
     item: {
       type: ItemTypes.INSTANCE,
       newInstance: true,
       instanceType: 'Component',
-      instanceId: id
+      instanceTypeId: id
     },
     canDrag: !root,
     collect: (monitor: any) => ({
       isDragging: !!monitor.isDragging()
     })
   });
+
+  const handleClick = () => {
+    dispatch({
+      type: 'CHANGE FOCUS',
+      payload: { componentId: id, childId: null }
+    });
+  };
   return (
     <Grid
       item
@@ -41,7 +49,7 @@ const ComponentPanelItem: React.FC<{
         borderRadius: root ? '' : '8px'
       }}
     >
-      <div className="compPanelItem" onClick={focusClick}>
+      <div className="compPanelItem" onClick={handleClick}>
         <h3>
           {id} {name}
         </h3>

src/components/left/HTMLPanelNew.tsx

@@ -11,18 +11,17 @@ import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
-import HTMLTypes from '../../HTMLTypes';
+import HTMLTypes from '../../context/HTMLTypes';
 
 const HTMLPanel = (): JSX.Element => {
-  console.log(HTMLTypes);
   const options = HTMLTypes.map(option => {
     const [{ isDragging }, drag] = useDrag({
       item: {
         type: ItemTypes.INSTANCE,
         newInstance: true,
         instanceType: 'HTML Element',
         name: option.name,
-        instanceId: option.id
+        instanceTypeId: option.id
       },
       collect: (monitor: any) => ({
         isDragging: !!monitor.isDragging()

src/components/main/CanvasNew.tsx

@@ -18,10 +18,14 @@ function Canvas() {
   );
 
   // function to add a new child to the canvas
-  const addChild = (instanceType: string, instanceTypeId: number) => {
+  const addChild = (
+    instanceType: string,
+    instanceTypeId: number,
+    childId: number
+  ) => {
     dispatch({
       type: 'ADD CHILD',
-      payload: { type: instanceType, typeId: instanceTypeId }
+      payload: { type: instanceType, typeId: instanceTypeId, childId: childId }
     });
   };
 
@@ -30,14 +34,35 @@ function Canvas() {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
   };
 
-  // onClickHandler is responsible for changing the focus of the "focused" component to be the canvas when the canvas is clicked
-  const onClickHandler = () => {
-    console.log('You have clicked the CANVAS!');
-    // keep the component focus the same as the current state, but update the child focus to null
-    // a "null" value for the child component signifies that we're solely focusing on the parent component
-    changeFocus(state.canvasFocus.componentId, null);
+  // function to change position of element dragged inside div, so that the canvas is the new parent
+  const changePosition = (
+    instanceType: string,
+    instanceTypeId: number,
+    currentChildId: number,
+    newParentChildId: number | null,
+    style: object,
+    attributes: object
+  ) => {
+    dispatch({
+      type: 'CHANGE POSITION',
+      payload: {
+        type: instanceType,
+        typeId: instanceTypeId,
+        currentChildId: currentChildId,
+        newParentChildId: newParentChildId,
+        style: style,
+        attributes: attributes
+      }
+    });
   };
 
+  // onClickHandler is responsible for changing the focused component and child component
+  function onClickHandler(event) {
+    event.stopPropagation();
+    // note: a null value for the child id means that we are focusing on the top-level component rather than any child
+    changeFocus(state.canvasFocus.componentId, null);
+  }
+
   // This hook will allow the user to drag items from the left panel on to the canvas
   const [{ isOver }, drop] = useDrop({
     accept: ItemTypes.INSTANCE,
@@ -46,9 +71,21 @@ function Canvas() {
       if (didDrop) {
         return;
       }
-      console.log('Item dropped on the canvas: ', item);
       // 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) addChild(item.instanceType, item.instanceId);
+      if (item.newInstance) {
+        addChild(item.instanceType, item.instanceTypeId, null);
+      }
+      // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
+      else {
+        changePosition(
+          item.instanceType,
+          item.instanceTypeId,
+          item.childId,
+          null,
+          item.style,
+          item.attributes
+        );
+      }
     },
     collect: monitor => ({
       isOver: !!monitor.isOver()

src/components/main/DirectChildComponentNew.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useContext, useRef } from 'react';
+import React, { useMemo, useContext, useRef, Children } from 'react';
 import {
   State,
   Component,
@@ -10,10 +10,17 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import { stateContext } from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import IndirectChild from './IndirectChildNew';
-import HTMLTypes from '../../HTMLTypes';
+import HTMLTypes from '../../context/HTMLTypes';
 import globalDefaultStyle from '../../globalDefaultStyles';
 
-function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
+function DirectChildComponent({
+  childId,
+  type,
+  typeId,
+  style,
+  attributes,
+  children
+}: ChildElement) {
   const [state, dispatch] = useContext(stateContext);
   const ref = useRef(null);
 
@@ -28,7 +35,12 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
     item: {
       type: ItemTypes.INSTANCE,
       newInstance: false,
-      id: childId
+      childId: childId,
+      instanceType: type,
+      instanceTypeId: typeId,
+      style: style,
+      attributes: attributes,
+      children: []
     },
     // canDrag: !props.children.length,
     collect: (monitor: any) => ({
@@ -40,16 +52,10 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
   };
 
-  // onClickHandler is responsible for changing the focus of the "focused" component to be the canvas when the canvas is clicked
-  // TODO: stopPropogation is returning a CORS error
+  // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
-    // console.log(event);
-    // event.stopPropogation();
-
-    console.log('You have clicked a DIRECT CHILD COMPONENT: ', childId);
-    // keep the component focus the same as the current state, but update the child focus to null
-    // a "null" value for the child component signifies that we're solely focusing on the parent component
-    // changeFocus(state.canvasFocus.componentId, childId);
+    event.stopPropagation();
+    changeFocus(state.canvasFocus.componentId, childId);
   }
 
   // combine all styles so that higher priority style specifications overrule lower priority style specifications
@@ -106,7 +112,7 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
     });
   };
   return (
-    <div onClick={() => onClickHandler(event)} style={combinedStyle} ref={drag}>
+    <div onClick={onClickHandler} style={combinedStyle} ref={drag}>
       {renderIndirectChildren(referencedComponent)}
     </div>
   );

src/components/main/DirectChildHTMLNestableNew.tsx

@@ -9,7 +9,7 @@ import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 import { stateContext } from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
-import HTMLTypes from '../../HTMLTypes';
+import HTMLTypes from '../../context/HTMLTypes';
 import globalDefaultStyle from '../../globalDefaultStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 
@@ -36,7 +36,12 @@ function DirectChildHTMLNestable({
     item: {
       type: ItemTypes.INSTANCE,
       newInstance: false,
-      id: childId
+      childId: childId,
+      instanceType: type,
+      instanceTypeId: typeId,
+      style: style,
+      attributes: attributes,
+      children: children
     },
     // canDrag: !props.children.length,
     collect: (monitor: any) => ({
@@ -55,27 +60,69 @@ function DirectChildHTMLNestable({
       }
       //   const hoverId = id;
       // updates state with new instance
-      console.log('Item was dropped here: ', item);
+      // 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) {
+        addChild(item.instanceType, item.instanceTypeId, childId);
+      }
+      // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
+      else {
+        changePosition(
+          item.instanceType,
+          item.instanceTypeId,
+          item.childId,
+          childId,
+          item.style,
+          item.attributes
+        );
+      }
     },
     collect: (monitor: any) => ({
       isOver: !!monitor.isOver({ shallow: true })
     })
   });
 
+  // function to add a new child to the canvas
+  const addChild = (
+    instanceType: string,
+    instanceTypeId: number,
+    childId: number
+  ) => {
+    dispatch({
+      type: 'ADD CHILD',
+      payload: { type: instanceType, typeId: instanceTypeId, childId: childId }
+    });
+  };
+
+  // function to change position of element dragged inside div, so that the div is the new parent
+  const changePosition = (
+    instanceType: string,
+    instanceTypeId: number,
+    currentChildId: number,
+    newParentChildId: number | null,
+    style: object,
+    attributes: object
+  ) => {
+    dispatch({
+      type: 'CHANGE POSITION',
+      payload: {
+        type: instanceType,
+        typeId: instanceTypeId,
+        currentChildId: currentChildId,
+        newParentChildId: newParentChildId,
+        style: style,
+        attributes: attributes
+      }
+    });
+  };
+
   const changeFocus = (componentId: number, childId: number | null) => {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
   };
 
-  // onClickHandler is responsible for changing the focus of the "focused" component to be the canvas when the canvas is clicked
-  // TODO: stopPropogation is returning a CORS error
+  // onClickHandler is responsible for changing the focused component and child component
   function onClickHandler(event) {
-    // console.log(event);
-    // event.stopPropogation();
-
-    console.log('You have clicked a DIRECT CHILD COMPONENT: ', childId);
-    // keep the component focus the same as the current state, but update the child focus to null
-    // a "null" value for the child component signifies that we're solely focusing on the parent component
-    // changeFocus(state.canvasFocus.componentId, childId);
+    event.stopPropagation();
+    changeFocus(state.canvasFocus.componentId, childId);
   }
 
   // combine all styles so that higher priority style specifications overrule lower priority style specifications
@@ -90,7 +137,7 @@ function DirectChildHTMLNestable({
 
   drag(drop(ref));
   return (
-    <div onClick={() => onClickHandler(event)} style={combinedStyle} ref={ref}>
+    <div onClick={onClickHandler} style={combinedStyle} ref={ref}>
       {renderChildren(children)}
     </div>
   );