Merge pull request #2 from oslabs-beta/ron-william-changes

ReactRouter components added to DragDrop panel, LinkTo - styles appear in CodePreview

Author: crlim

app/src/components/left/DragDropPanel.tsx

@@ -46,16 +46,38 @@ const DragDropPanel = (props): JSX.Element => {
         <Grid
             id="HTMLItemsGrid"
           >
-            {htmlTypesToRender.map(option => (
-              <HTMLItem
-                name={option.name}
-                key={`html-${option.name}`}
-                id={option.id}
-                Icon={option.icon}
-                handleDelete={handleDelete}
-                isThemeLight={isThemeLight}
-              />
-            ))}
+            <h3>HTML ELEMENTS</h3>
+            {htmlTypesToRender.map(option => {
+              if(option.id !== 17 || option.id !== 18) {
+                return (
+                  <HTMLItem
+                    name={option.name}
+                    key={`html-${option.name}`}
+                    id={option.id}
+                    Icon={option.icon}
+                    handleDelete={handleDelete}
+                    isThemeLight={isThemeLight}
+                  />
+                  ); 
+              }
+
+            })}
+            <h3>REACT ROUTER</h3>
+            {htmlTypesToRender.map(option => {
+              if(option.id === 17 || option.id === 18) {
+                return (
+                  <HTMLItem
+                    name={option.name}
+                    key={`html-${option.name}`}
+                    id={option.id}
+                    Icon={option.icon}
+                    handleDelete={handleDelete}
+                    isThemeLight={isThemeLight}
+                  />
+                  ); 
+              }
+            })}
+
           </Grid>
       </div>
     </div>

app/src/components/left/HTMLItem.tsx

@@ -122,11 +122,11 @@ const HTMLItem : React.FC<{
   // updated the id's to reflect the new element types input and label
   return ( // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
-      { id <= 17 &&
+      { id <= 18 &&
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>
         </div>}
-      {id > 17 &&
+      {id > 18 &&
       <span id="customHTMLElement">
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>

app/src/components/main/Canvas.tsx

@@ -25,6 +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); 
       changeFocus(state.canvasFocus.componentId, null);
     };
 

app/src/context/HTMLTypes.tsx

@@ -163,7 +163,16 @@ const HTMLTypes: HTMLType[] = [
     style: {},
     placeHolderShort: 'Switch',
     placeHolderLong: '',
-    icon: HeaderIcon
+    icon: ListIcon
+  }, 
+  {
+    id: 18,
+    tag: 'Link',
+    name: 'LinkTo',
+    style: {},
+    placeHolderShort: 'link to',
+    placeHolderLong: '',
+    icon: ListIcon
   },
   {
     id: -1,

app/src/helperFunctions/generateCode.ts

@@ -60,6 +60,7 @@ const generateUnformattedCode = (
           referencedHTML.tag === 'ol' ||
           referencedHTML.tag === 'menu' ||
           referencedHTML.tag === 'li' ||
+          referencedHTML.tag === 'Link' ||
           referencedHTML.tag === 'Switch' ||
           referencedHTML.tag === 'Route'
         ) {
@@ -81,10 +82,16 @@ const generateUnformattedCode = (
   // Raised formatStyles so that it is declared before it is referenced. It was backwards.
   // format styles stored in object to match React inline style format
   const formatStyles = (styleObj: any) => {
+    console.log(styleObj); 
+
     if (Object.keys(styleObj).length === 0) return ``;
     const formattedStyles = [];
     for (let i in styleObj) {
-      const styleString = i + ': ' + "'" + styleObj[i] + "'";
+      let styleString = i + ': ' + "'" + styleObj[i] + "'"; 
+      // if(i === 'style') {
+      //   styleString = i + ':' + JSON.stringify(styleObj[i]); 
+      // }
+
       formattedStyles.push(styleString);
     }
     return ' style={{' + formattedStyles.join(',') + '}}';
@@ -134,6 +141,10 @@ 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 (nestable) {
       const routePath = (childElement.tag === 'Route') ? (' ' + 'exact path="' + activeLink + '"') : '';
       return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>${innerText}
@@ -205,6 +216,8 @@ const generateUnformattedCode = (
 
   // create final component code. component code differs between classic react, next.js, gatsby.js
   // classic react code
+
+  //import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
   if (projectType === 'Classic React') {
     return `
     ${stateful && !classBased ? `import React, {useState} from 'react';` : ''}

app/src/helperFunctions/renderChildren.tsx

@@ -34,7 +34,7 @@ const renderChildren = (children: ChildElement[]) => {
     }
     // ommitted orderedlists, unorderedlists, and menus, ommitted li items as non-nestable types because they can be nested within.
     // child is a non-nestable type of HTML element (everything except for divs and forms)
-    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2 && typeId !== 3 && typeId !== 14 && typeId !== 15 && typeId !== 16 && typeId !== 17 && typeId !== -1) {
+    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2 && typeId !== 3 && typeId !== 14 && typeId !== 15 && typeId !== 16 && typeId !== 17 && typeId !== 18 && typeId !== -1) {
       return (
         <DirectChildHTML
           childId={childId}
@@ -48,7 +48,7 @@ const renderChildren = (children: ChildElement[]) => {
     }
     // Added Orderedlists, Unorderedlists, and Menus, changed lists to nestable because they are nestable.
     // child is a nestable type of HTML element (divs and forms)
-    else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16 || typeId === 17 || typeId === -1)) {
+    else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16 || typeId === 17 || typeId === 18 || typeId === -1)) {
       return (
         <DirectChildHTMLNestable
           childId={childId}