added Route type and button to add Routes

Author: crlim

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/addRoute.ts

@@ -0,0 +1,27 @@
+import {
+  State,
+  Action,
+  Component,
+  ChildElement,
+  HTMLType
+} from '../interfaces/Interfaces';
+import React, { useState, useCallback, useContext, useEffect } from 'react';
+import StateContext from '../context/context';
+
+
+// const addRoute = (switchItem: ChildElement) => {
+const addRoute = (id: number) => {
+  const [state, dispatch] = useContext(StateContext);
+  console.log('in addRoute');
+  // dispatch ADD CHILD to Switch?
+  dispatch({
+    type: 'ADD CHILD',
+    payload: {
+      type: 'HTML Element',
+      typeId: -1,
+      childId: id
+    }
+  });
+};
+
+export default addRoute;

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
@@ -350,6 +352,14 @@ const reducer = (state: State, action: Action) => {
         state.HTMLTypes
       );
 
+      // TODO: when newChild is a Switch, call addRoute to create a Route child
+      // passing in newChild
+
+      // if (typeId === 17 && !addedInitialRoute) {
+      //   addRoute(newChild);
+      //   addedInitialRoute = true;
+      // }
+
       return {
         ...state,
         components,