Merge pull request #3 from oslabs-beta/c2

C2 (Chris and Crys) Branch Merging to Dev-46 Branch

Author: WilliamCheng12345

app/src/components/left/DragDropPanel.tsx

@@ -48,7 +48,7 @@ const DragDropPanel = (props): JSX.Element => {
           >
             <h3>HTML ELEMENTS</h3>
             {htmlTypesToRender.map(option => {
-              if(option.id !== 17 || option.id !== 18) {
+              if(option.id !== 17 && option.id !== 18) {
                 return (
                   <HTMLItem
                     name={option.name}

app/src/components/main/Canvas.tsx

@@ -25,7 +25,7 @@ function Canvas() {
     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
-      console.log(state.canvasFocus); 
+      console.log(state.canvasFocus);
       changeFocus(state.canvasFocus.componentId, null);
     };
 
@@ -51,7 +51,6 @@ function Canvas() {
       }
       // 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('Canvas first dispatch')
         dispatch({
           type: 'ADD CHILD',
           payload: {

app/src/components/main/DemoRender.tsx

@@ -2,6 +2,7 @@
 import React, {
   useState, useCallback, useContext, useEffect,
 } from 'react';
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 import Button from '@material-ui/core/Button';
 import Box from '@material-ui/core/Box';
 import StateContext from '../../context/context';
@@ -37,6 +38,9 @@ const DemoRender = (props): JSX.Element => {
         if (elementType === 'input') componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'img') componentsToRender.push(<Box component={elementType} src={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}></Box>);
         else if (elementType === 'a') componentsToRender.push(<Box component={elementType} href={activeLink} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}</Box>);
+        else if (elementType === 'Switch') componentsToRender.push(<Switch>{renderedChildren}</Switch>);
+        else if (elementType === 'Route') componentsToRender.push(<Route exact path={activeLink}>{renderedChildren}</Route>);
+        else if (elementType === 'LinkTo') componentsToRender.push(<Link to={activeLink}>{innerText}</Link>);
         else componentsToRender.push(<Box component={elementType} className={classRender} style={elementStyle} key={key} id={`rend${childId}`}>{innerText}{renderedChildren}</Box>);
         key += 1;
       }
@@ -57,9 +61,12 @@ const DemoRender = (props): JSX.Element => {
 
 
   return (
-    <div id={'renderFocus'} style={demoContainerStyle}>
-      {components.map((component, index) => component)}
-    </div>
+    <Router>
+      <div id={'renderFocus'} style={demoContainerStyle}>
+        {components.map((component, index) => component)}
+      </div>
+    </Router>
+
   );
 };
 

app/src/components/main/DirectChildComponent.tsx

@@ -9,9 +9,8 @@ import { ItemTypes } from '../../constants/ItemTypes';
 import StateContext from '../../context/context';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import globalDefaultStyle from '../../public/styles/globalDefaultStyles';
-import renderChildren from '../../helperFunctions/renderChildren'
 
-function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
+function DirectChildComponent({ childId, type, typeId, style, name }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
 
   // find the top-level component corresponding to this instance of the component
@@ -64,13 +63,17 @@ function DirectChildComponent({ childId, type, typeId, style }: ChildElement) {
     interactiveStyle
   );
 
-  return (
+
+  // Renders name and not children of subcomponents to clean up Canvas view when dragging components
+  // into the main canvas.  To render html elements on canvas, import and invoke renderChildren
+  return  (
     <div
       onClick={onClickHandler}
       style={combinedStyle}
       ref={drag}
     >
-      {renderChildren(referencedComponent.children)}
+      <strong>{name}</strong>
+      {`  (${childId})`}
     </div>
   );
 }

app/src/components/main/DirectChildHTMLNestable.tsx

@@ -20,6 +20,7 @@ function DirectChildHTMLNestable({
   children,
   name,
   annotations,
+  attributes
 }: ChildElement) {
   const [state, dispatch] = useContext(StateContext);
   const ref = useRef(null);
@@ -143,6 +144,7 @@ const snapShotFunc = () => {
     <div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
       <strong>{HTMLType.placeHolderShort}</strong>
       {`  ( ${childId} )`}
+      <strong style={{ color: "#0099E6" }}>{attributes && attributes.compLink ? ` ${attributes.compLink}` : ''}</strong>
       {routeButton}
       <Annotation
         id={childId}

app/src/context/HTMLTypes.tsx

@@ -165,15 +165,6 @@ const HTMLTypes: HTMLType[] = [
     placeHolderLong: '',
     icon: ListIcon
   }, 
-  {
-    id: 18,
-    tag: 'Link',
-    name: 'LinkTo',
-    style: {},
-    placeHolderShort: 'link to',
-    placeHolderLong: '',
-    icon: ListIcon
-  },
   {
     id: -1,
     tag: 'Route',
@@ -182,6 +173,15 @@ const HTMLTypes: HTMLType[] = [
     placeHolderShort: 'Route',
     placeHolderLong: '',
     icon: LinkIcon
+  },
+  {
+    id: 18,
+    tag: 'LinkTo',
+    name: 'LinkTo', 
+    style: {},
+    placeHolderShort: 'LinkTo',
+    placeHolderLong: '',
+    icon: ListIcon
   }
 ];
 

app/src/helperFunctions/generateCode.ts

@@ -141,10 +141,8 @@ const generateUnformattedCode = (
       return `${levelSpacer(level, 5)}<${childElement.tag} href="${activeLink}" ${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
     } else if (childElement.tag === 'input') {
       return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>${levelSpacer(2, (3 + level))}`;
-    } else if (childElement.tag === 'Link') {
-      return `${levelSpacer(level, 5)}<${childElement.tag} to="${activeLink}" ${elementTagDetails(childElement)}>${innerText}
-      ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
-      ${tabSpacer(level - 1)}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
+    } else if (childElement.tag === 'LinkTo') {
+      return `${levelSpacer(level, 5)}<Link to="${activeLink}"${elementTagDetails(childElement)}>${innerText}</Link>${levelSpacer(2, (3 + level))}`;
     } else if (nestable) {
       const routePath = (childElement.tag === 'Route') ? (' ' + 'exact path="' + activeLink + '"') : '';
       return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>${innerText}

app/src/helperFunctions/renderChildren.tsx

@@ -58,6 +58,7 @@ const renderChildren = (children: ChildElement[]) => {
           key={'DirChildHTMLNest' + childId.toString() + name}
           name={name}
           annotations={annotations}
+          attributes={attributes}
         />
       );
     }