Merge pull request #1 from oslabs-beta/feat/Switch

Feat/switch

Author: rfvisuals

app/src/components/left/DragDropPanel.tsx

@@ -14,7 +14,7 @@ Central state contains all available HTML elements (stored in the HTMLTypes prop
   initialState.tsx.
 
 Hook state:
-  -tag: 
+  -tag:
 */
 // Extracted the drag and drop functionality from HTMLPanel to make a modular component that can hang wherever the future designers may choose.
 const DragDropPanel = (props): JSX.Element => {
@@ -37,9 +37,9 @@ const DragDropPanel = (props): JSX.Element => {
       payload: id
     });
   };
-  
+
   // filter out separator so that it will not appear on the html panel
-  const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator');
+  const htmlTypesToRender = state.HTMLTypes.filter(type => type.name !== 'separator' && type.name !== 'Route');
   return (
     <div className="HTMLItems">
       <div id="HTMLItemsTopHalf">

app/src/components/main/AddRoute.tsx

@@ -0,0 +1,31 @@
+import { AddRoutes } from '../../interfaces/Interfaces'
+import React, {
+  useRef, useState, useContext, useEffect,
+} from 'react';
+import StateContext from '../../context/context';
+
+function AddRoute({
+  id,
+  name
+}: AddRoutes) {
+  const [state, dispatch] = useContext(StateContext);
+
+  const handleClick = (id) => {
+    dispatch({
+      type: 'ADD CHILD',
+      payload: {
+        type: 'HTML Element',
+        typeId: -1,
+        childId: id // this is the id of the parent to attach it to
+      }
+    });
+  }
+
+  return (
+    <div style={{ padding: '1px', float: 'right' }}>
+      <button id={'routeBtn' + id} onClick={() => handleClick(id)}>+</button>
+    </div>
+  );
+}
+
+export default AddRoute;

app/src/components/main/Annotation.tsx

@@ -36,7 +36,7 @@ function Annotation({
   };
 
   /**
-   * Handles when text exists in the textarea of the modal. 
+   * Handles when text exists in the textarea of the modal.
    * If text exists/does not exist, corresponding button changes colors.
    * Sets hook value to what is contained in the textarea
    */
@@ -53,7 +53,7 @@ function Annotation({
   }
 
   /**
-   * This handler will find the specific anno for the corresponding component on the canvas in the childrenArray - 
+   * This handler will find the specific anno for the corresponding component on the canvas in the childrenArray -
    * where the canvas components are placed
    */
   const handleFindAnno = (array, id) => {
@@ -65,7 +65,7 @@ function Annotation({
       } else if (currentElement.children.length > 0) {
         // temp is to prevent a return of empty string since canvas element should always exist and allows the
         // recursion to continue
-        const temp = handleFindAnno(currentElement.children, id) 
+        const temp = handleFindAnno(currentElement.children, id)
         if (temp != '') {
           return temp;
         }
@@ -84,7 +84,7 @@ function Annotation({
     }
     handleAnnoChange(event);
   }, [])
-  
+
   const body = (
     <div className='annotate-position'>
       <span className='annotate-textarea-header'> Notes for: {name} ( {id} )</span>

app/src/components/main/Canvas.tsx

@@ -16,7 +16,7 @@ function Canvas() {
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
     );
-    
+
     // changes focus of the canvas to a new component / child
     const changeFocus = (componentId?: number, childId?: number | null) => {
       dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });
@@ -27,7 +27,7 @@ function Canvas() {
       // 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);
     };
-    
+
     // stores a snapshot of state into the past array for UNDO. snapShotFunc is also invoked for nestable elements in DirectChildHTMLNestable.tsx
     const snapShotFunc = () => {
       // make a deep clone of state
@@ -50,6 +50,7 @@ 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/DirectChildHTMLNestable.tsx

@@ -9,6 +9,8 @@ import renderChildren from '../../helperFunctions/renderChildren';
 import Annotation from './Annotation'
 import validateNewParent from '../../helperFunctions/changePositionValidation'
 import componentNest from '../../helperFunctions/componentNestValidation'
+// import addRoute from '../../helperFunctions/addRoute';
+import AddRoute from './AddRoute';
 
 function DirectChildHTMLNestable({
   childId,
@@ -79,7 +81,7 @@ const snapShotFunc = () => {
               childId: childId,
             }
           });
-        } 
+        }
       }
       // if item is not a new instance, change position of element dragged inside div so that the div is the new parent
       else {
@@ -95,7 +97,7 @@ const snapShotFunc = () => {
         }
       }
     },
-    
+
     collect: (monitor: any) => {
       return {
         isOver: !!monitor.isOver({ shallow: true })
@@ -132,10 +134,16 @@ const snapShotFunc = () => {
 
   drag(drop(ref));
 
+  const routeButton = [];
+  if (typeId === 17) {
+    routeButton.push(<AddRoute id={childId} name={name} />);
+  }
+
   return (
     <div onClick={onClickHandler} style={combinedStyle} ref={ref} id={`canv${childId}`}>
       <strong>{HTMLType.placeHolderShort}</strong>
       {`  ( ${childId} )`}
+      {routeButton}
       <Annotation
         id={childId}
         name={name}

app/src/components/main/SeparatorChild.tsx

@@ -64,7 +64,7 @@ function DirectChildHTMLNestable({
               childId: childId,
             }
           });
-        } 
+        }
       }
       // if item is not a new instance, change position of element dragged inside separator so that separator is new parent (until replacement)
       else {

app/src/context/HTMLTypes.tsx

@@ -155,15 +155,24 @@ const HTMLTypes: HTMLType[] = [
     placeHolderShort: 'list item',
     placeHolderLong: '',
     icon: ListIcon
-  }, 
+  },
   {
     id: 17,
     tag: 'Switch',
     name: 'Switch',
     style: {},
-    placeHolderShort: 'switch item',
+    placeHolderShort: 'Switch',
     placeHolderLong: '',
-    icon: ListIcon
+    icon: HeaderIcon
+  },
+  {
+    id: -1,
+    tag: 'Route',
+    name: 'Route',
+    style: {},
+    placeHolderShort: 'Route',
+    placeHolderLong: '',
+    icon: LinkIcon
   }
 ];
 

app/src/helperFunctions/generateCode.ts

@@ -59,10 +59,14 @@ const generateUnformattedCode = (
           referencedHTML.tag === 'ul' ||
           referencedHTML.tag === 'ol' ||
           referencedHTML.tag === 'menu' ||
-          referencedHTML.tag === 'li'
+          referencedHTML.tag === 'li' ||
+          referencedHTML.tag === 'Switch' ||
+          referencedHTML.tag === 'Route'
         ) {
           child.children = getEnrichedChildren(child);
         }
+        // when we see a Switch, import React Router
+        if (referencedHTML.tag === 'Switch') importReactRouter = true;
         return child;
       } else if (child.type === 'Route Link') {
         links = true;
@@ -89,7 +93,7 @@ const generateUnformattedCode = (
   // function to dynamically add classes, ids, and styles to an element if it exists.
   const elementTagDetails = (childElement: object) => {
     let customizationDetails = "";
-    if (childElement.childId) customizationDetails += (' ' + `id="${+childElement.childId}"`);
+    if (childElement.childId && childElement.tag !== 'Route') customizationDetails += (' ' + `id="${+childElement.childId}"`);
     if (childElement.attributes && childElement.attributes.cssClasses) customizationDetails += (' ' + `className="${childElement.attributes.cssClasses}"`);
     if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails +=(' ' + formatStyles(childElement));
     return customizationDetails;
@@ -120,8 +124,9 @@ const generateUnformattedCode = (
     childElement.tag === 'ol' || 
     childElement.tag === 'ul' ||
     childElement.tag === 'menu' ||
-    childElement.tag === 'li'; 
-    // childElement.tag === 'Switch';
+    childElement.tag === 'li' ||
+    childElement.tag === 'Switch' ||
+    childElement.tag === 'Route';
 
     if (childElement.tag === 'img') {
       return `${levelSpacer(level, 5)}<${childElement.tag} src="${activeLink}" ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;
@@ -130,7 +135,8 @@ const generateUnformattedCode = (
     } else if (childElement.tag === 'input') {
       return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}></${childElement.tag}>${levelSpacer(2, (3 + level))}`;
     } else if (nestable) {
-      return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}>${innerText}
+      const routePath = (childElement.tag === 'Route') ? (' ' + 'exact path="' + activeLink + '"') : '';
+      return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>${innerText}
         ${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
         ${tabSpacer(level - 1)}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
     } else if (childElement.tag !== 'separator'){
@@ -195,12 +201,14 @@ const generateUnformattedCode = (
 
   const stateful = true;
   const classBased = false;
+  let importReactRouter;
 
   // create final component code. component code differs between classic react, next.js, gatsby.js
   // classic react code
   if (projectType === 'Classic React') {
     return `
     ${stateful && !classBased ? `import React, {useState} from 'react';` : ''}
+    ${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`: ``}
     ${classBased ? `import React, {Component} from 'react';` : ''}
     ${!stateful && !classBased ? `import React from 'react';` : ''}
     ${importsMapped}
@@ -209,7 +217,6 @@ const generateUnformattedCode = (
         ? `class ${currentComponent.name} extends Component {`
         : `const ${currentComponent.name} = (props: any): JSX.Element => {`
     }
-
     ${
       stateful && !classBased
         ? `const [value, setValue] = useState<any | undefined>("INITIAL VALUE")${writeStateProps(currentComponent.useStateCodes)};
@@ -225,13 +232,18 @@ const generateUnformattedCode = (
         : ``
     }
     ${classBased ? `render(): JSX.Element {` : ``}
-      
-      return (
+    ${!importReactRouter ?
+    `return (
+      <div className="${currentComponent.name}" style={props.style}>
+        ${writeNestedElements(enrichedChildren)}
+      </div>
+    );` : `return (
+      <Router>
         <div className="${currentComponent.name}" style={props.style}>
           ${writeNestedElements(enrichedChildren)}
         </div>
-        );
-      }
+      </Router>
+    );`}
     ${classBased ? `}` : ``}
     export default ${currentComponent.name};
     `;

app/src/helperFunctions/renderChildren.tsx

@@ -18,7 +18,7 @@ const renderChildren = (children: ChildElement[]) => {
     if (name === '') child.name = state.components[typeId - 1].name;
     // A DirectChildComponent is an instance of a top level component
     // This component will render IndirectChild components (div/components rendered inside a child component)
-    // Removed style from prop drills so that styling isn't applied to canvas items. 
+    // Removed style from prop drills so that styling isn't applied to canvas items.
     // Also added keys & removed an unnecessary div around DirChildNestables that were causing errors.
     if (type === 'Component') {
       return (
@@ -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) {
+    else if (type === 'HTML Element' && typeId !== 11 && typeId !== 1000 && typeId !== 2 && typeId !== 3 && typeId !== 14 && typeId !== 15 && typeId !== 16 && typeId !== 17 && typeId !== -1) {
       return (
         <DirectChildHTML
           childId={childId}
@@ -48,8 +48,8 @@ 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)) {
-      return (       
+    else if (type === 'HTML Element' && (typeId === 11 || typeId === 2 || typeId === 3 || typeId === 14 || typeId === 15 || typeId === 16 || typeId === 17 || typeId === -1)) {
+      return (
         <DirectChildHTMLNestable
           childId={childId}
           type={type}

app/src/interfaces/Interfaces.ts

@@ -99,3 +99,8 @@ export interface StatePropsPanelProps {
   selectHandler: (table: any) => void;
   deleteHandler: (id: number | any) => void;
 }
+
+export interface AddRoutes {
+  id: number;
+  name: string;
+}

app/src/reducers/componentReducer.ts

@@ -8,6 +8,7 @@ import {
 import initialState from '../context/initialState';
 import generateCode from '../helperFunctions/generateCode';
 import manageSeparators from '../helperFunctions/manageSeparators';
+import addRoute from '../helperFunctions/addRoute';
 
 let separator = initialState.HTMLTypes[1];
 
@@ -308,6 +309,7 @@ const reducer = (state: State, action: Action) => {
         children: []
       };
 
+
       // if the childId is null, this signifies that we are adding a child to the top-level component rather than another child element
       // we also add a separator before any new child
       // if the newChild Element is an input or img type, delete the children key/value pair