Merge branch 'main' of https://github.com/oslabs-beta/ReacType into master

Author: jinsoolim

app/src/reducers/componentReducer.ts

@@ -26,7 +26,6 @@ const reducer = (state: State, action: Action) => {
     // We're going to keep track of the nodes we need to search through with an Array
     //  Initialize this array with the top level node
     const nodeArr: (Component | ChildElement)[] = [component];
-    nodeArr.forEach(node => console.log('node', node));
     // iterate through each node in the array as long as there are elements in the array
     while (nodeArr.length > 0) {
       // shift off the first value and assign to an element
@@ -93,6 +92,14 @@ const reducer = (state: State, action: Action) => {
     components.forEach((comp, i) => (comp.id = i + 1));
   };
 
+  const updateRoots = (components: Component[]) => {
+    const roots = [];
+    components.forEach(comp => {
+      if (comp.isPage) roots.push(comp.id);
+    });
+    return roots;
+  }
+
   const deleteById = (id: number): Component[] =>
     [...state.components].filter(comp => comp.id != id);
 
@@ -110,6 +117,9 @@ const reducer = (state: State, action: Action) => {
         action.payload.componentName === ''
       )
         return state;
+      
+      const components = [...state.components];
+      
       const newComponent = {
         id: state.components.length + 1,
         name: action.payload.componentName,
@@ -120,7 +130,6 @@ const reducer = (state: State, action: Action) => {
         isPage: action.payload.root
       };
 
-      const components = [...state.components];
       components.push(newComponent);
 
       const rootComponents = [...state.rootComponents];
@@ -134,7 +143,6 @@ const reducer = (state: State, action: Action) => {
       };
 
       const nextComponentId = state.nextComponentId + 1;
-      console.log('new comps', components);
       return {
         ...state,
         components,
@@ -190,10 +198,9 @@ const reducer = (state: State, action: Action) => {
           }
         })
       }
-
       const newChild: ChildElement = {
         type,
-        typeId,
+        typeId: components.length + 1,
         name: newName,
         childId: state.nextChildId,
         style: {},
@@ -327,43 +334,20 @@ const reducer = (state: State, action: Action) => {
         state.projectType,
         state.HTMLTypes
       );
+
       const canvasFocus = { ...state.canvasFocus, childId: null };
       return { ...state, components, canvasFocus };
     }
 
     case 'DELETE PAGE': {
       const id: number = state.canvasFocus.componentId;
-      // console.log('id', id);
-      // const pageName = state.components[id-1].name;
-      // // check if page is linked to in other pages      
-      // console.log(state.components);
-      // console.log(pageName);
-
-      // //const currentComponents = [...state.components];
-
-      // const isLinked = (comps) => {
-      //   if (comps.length === 0) return;
-      //   comps.forEach((comp, i, array) => {
-      //     if (comp.type === 'Route Link' && comp.name === pageName) {
-      //       console.log('found link', i, comp);
-      //       array.splice(i, 1);
-      //         // delete the comp
-      //     }
-      //     if (comp.children.length > 0) isLinked(comp.children);
-      //   })  
-      // }
-      // isLinked(state.components);
 
       const components: Component[] = deleteById(id);
       updateIds(components);
 
       // rebuild rootComponents with correct page IDs
-      const rootComponents: number[] = [];
-      components.forEach(comp => {
-        if (comp.isPage) rootComponents.push(comp.id);
-      });
-      //console.log('curr', currentComponents);
-      console.log('comps', components);
+      const rootComponents = updateRoots(components);
+
       const canvasFocus = { componentId: 1, childId: null }
       return {...state, rootComponents, components, canvasFocus}
     }
@@ -372,7 +356,9 @@ const reducer = (state: State, action: Action) => {
       const components: Component[] = deleteById(id);
       updateIds(components);
       const canvasFocus = { componentId: 1, childId: null };
-      return {...state, components, canvasFocus, nextComponentId: id };
+
+      const rootComponents = updateRoots(components);
+      return {...state, rootComponents, components, canvasFocus, nextComponentId: id };
     }
 
     case 'SET INITIAL STATE': {
@@ -439,7 +425,6 @@ const reducer = (state: State, action: Action) => {
         components,
         canvasFocus
       };
-      // return { ...initialState };
     }
 
     case 'UPDATE PROJECT NAME': {
@@ -451,9 +436,7 @@ const reducer = (state: State, action: Action) => {
     }
 
     case 'OPEN PROJECT': {
-      console.log("BEFORE FUNCTION: ", action.payload.HTMLTypes);
       convertToJSX(action.payload.HTMLTypes);
-      console.log("AFTER FUNCTION: ", action.payload.HTMLTypes);
       return {
         ...action.payload
       };

app/src/tutorial/ComponentTree.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
 import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import AccountTreeIcon from '@material-ui/icons/AccountTree';
 
+import { makeStyles } from '@material-ui/core/styles';
+import Typography from '@material-ui/core/Typography';
+import Container from '@material-ui/core/Container';
 // import Grid from '@material-ui/core/Grid';
 
 // import ComponentPanel from '../components/left/ComponentPanel';
 // import HTMLPanel from '../components/left/HTMLPanel';
 
 // Left-hand portion of the app, where component options are displayed
-
+const useStyles = makeStyles({});
 const ComponentTree: React.FC<RouteComponentProps> = () => {
   return (
     <div>
       ComponentTree
-      <Link to={`/`}>
-        <button>Application</button>
-      </Link>
       <Link to={`/tutorial`}>
         <button>Tutorial</button>
       </Link>