working on deleting nested els

Author: diegovazquezny

app/electron/main.js

@@ -225,13 +225,6 @@ app.on('web-contents-created', (event, contents) => {
       'https://reactype.herokuapp.com',
       'https://github.com/',
       'https://nextjs.org',
-      'https://nextjs.org/',
-      'http://nextjs.org',
-      'http://nextjs.org/',
-      'https://www.nextjs.org',
-      'https://www.nextjs.org/',
-      'http://www.nextjs.org',
-      'http://www.nextjs.org/',
     ];
     console.log('parsed URL origin', parsedUrl.origin);
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -253,13 +246,6 @@ app.on('web-contents-created', (event, contents) => {
       'https://reactype.herokuapp.com',
       'https://github.com/',
       'https://nextjs.org',
-      'https://nextjs.org/',
-      'http://nextjs.org',
-      'http://nextjs.org/',
-      'https://www.nextjs.org',
-      'https://www.nextjs.org/',
-      'http://www.nextjs.org',
-      'http://www.nextjs.org/',
     ];
 
     // Log and prevent the app from redirecting to a new page
@@ -273,7 +259,7 @@ app.on('web-contents-created', (event, contents) => {
 
       event.preventDefault();
       return;
-    }
+    } else console.log('Succesful link sent to browser');
   });
 
   // https://electronjs.org/docs/tutorial/security#11-verify-webview-options-before-creation
@@ -299,13 +285,6 @@ app.on('web-contents-created', (event, contents) => {
       'https://reactype.herokuapp.com',
       'https://github.com/',
       'https://nextjs.org',
-      'https://nextjs.org/',
-      'http://nextjs.org',
-      'http://nextjs.org/',
-      'https://www.nextjs.org',
-      'https://www.nextjs.org/',
-      'http://www.nextjs.org',
-      'http://www.nextjs.org/',
     ];
     console.log('parsed URL origin', parsedUrl.origin);
     // Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
@@ -316,9 +295,9 @@ app.on('web-contents-created', (event, contents) => {
       // if the requested URL is not in the whitelisted array, then don't navigate there
       event.preventDefault();
       return;
-    } else console.log(`Successful navigation to ${parsedUrl}`);
-    event.preventDefault();
-    return;
+    } else console.log(`Successful new window to ${parsedUrl}`);
+    // event.preventDefault();
+    // return;
   });
 });
 

app/src/components/bottom/CodePreview.tsx

@@ -13,7 +13,7 @@ import useResizeObserver from '../../tree/useResizeObserver';
 
 const CodePreview = ({ theme, setTheme }) => {
   const wrapper = useRef();
-  console.log(wrapper.current);
+  //console.log(wrapper.current);
   const dimensions = useResizeObserver(wrapper);
   const { width, height } =
     dimensions || 0;
@@ -35,7 +35,7 @@ const CodePreview = ({ theme, setTheme }) => {
 
   useEffect(() => {
     setDivHeight(height);
-    console.log(divHeight);
+    //console.log(divHeight);
   }, [height])
 
   return (

app/src/components/main/Canvas.tsx

@@ -6,15 +6,25 @@ import { Component, DragItem } from '../../interfaces/Interfaces';
 import { combineStyles } from '../../helperFunctions/combineStyles';
 import renderChildren from '../../helperFunctions/renderChildren';
 
+const findNestedChild = (curr, components) => {
+  components.forEach((comp, i) => {
+    comp.children.forEach(child => {
+      if (child.name === curr.name) console.log(child.name)
+    });
+    if (comp.children.length !== 0) findNestedChild(curr, comp.children);  
+  });
+}
+
 function Canvas() {
   const [state, dispatch] = useContext(StateContext);
-  console.log('state.comps', state.components);
 
   // find the current component to render on the canvas
   const currentComponent: Component = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
+  findNestedChild(currentComponent, state.components);
+
   // changes focus of the canvas to a new component / child
   const changeFocus = (componentId: number, childId: number | null) => {
     dispatch({ type: 'CHANGE FOCUS', payload: { componentId, childId } });

app/src/containers/RightContainer.tsx

@@ -215,9 +215,9 @@ const RightContainer = (): JSX.Element => {
   }
 
   const handleDeleteReusableComponent = () => {
-    /*isChildOfPage()
+    isChildOfPage()
       ? handleDialogError('component')
-      :*/ dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
+      : dispatch({ type: 'DELETE REUSABLE COMPONENT', payload: {} });
   };
 
   const isReusable = (configTarget): boolean => {

app/src/reducers/componentReducer.ts

@@ -127,21 +127,21 @@ const reducer = (state: State, action: Action) => {
   }
 
   const deleteComponentFromPages = (components, name) => {
+    console.log('name', name);
     const searchNestedComps = (childComponents) => {
-      console.log(childComponents);
-      if (childComponents.length === 0) return;
-      childComponents.forEach((comp, i) => {
-        if (comp.isPage){
-          comp.children.forEach((child, i, arr) => {
-            if (child.name === name) {
-              arr.splice(i, 1);
-            }
-          })
-        }
-        searchNestedComps(childComponents.children)
-      });
+      console.log('child components', childComponents);
+      // if (childComponents.length === 0) return console.log('empty children array');
+      // childComponents.forEach((comp, i, arr) => {
+      //   console.log('each individual comp', comp);
+      //   if (comp.name === name){
+      //     arr.splice(i, 1);
+      //   } else searchNestedComps(childComponents.children)
+      // });
     }
-    components.forEach(comp => searchNestedComps(comp.children));
+    components.forEach(comp => {
+      console.log('current comp', comp);
+      searchNestedComps(comp.children)
+    });
     console.log(components);
   }
 
@@ -393,7 +393,7 @@ const reducer = (state: State, action: Action) => {
       updateIds(components);
 
       // check if reusable comp is inside a page
-      deleteComponentFromPages(components, name);
+      //deleteComponentFromPages(components, name);
 
       const canvasFocus = { componentId: 1, childId: null };
 

app/src/tutorial/RouteLinks.tsx

@@ -1,17 +1,11 @@
 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 link1 from '../../../resources/route_links_tutorial_images/links1.png';
-import tree2 from '../../../resources/tree_tutorial_images/tree2.png';
-import tree3 from '../../../resources/tree_tutorial_images/tree3.png';
-import tree4 from '../../../resources/tree_tutorial_images/tree4.png';
-import tree5 from '../../../resources/tree_tutorial_images/tree5.png';
-import pages from '../../../resources/tree_tutorial_images/pages.png';
-import re_comps from '../../../resources/tree_tutorial_images/re_comps.png';
+import links2 from '../../../resources/route_links_tutorial_images/links2.png';
+import links3 from '../../../resources/route_links_tutorial_images/links3.png';
+import links4 from '../../../resources/route_links_tutorial_images/links4.png';
+import links6 from '../../../resources/route_links_tutorial_images/links6.png';
+import linksCanvas from '../../../resources/route_links_tutorial_images/links-canvas.png';
 // import Grid from '@material-ui/core/Grid';
 
 // import ComponentPanel from '../components/left/ComponentPanel';
@@ -35,9 +29,13 @@ const ComponentTree: React.FC<RouteComponentProps> = () => {
       margin: '30px 30px 30px 30px',
       width: 'auto'
     },
-    img: {
+    smallImg: {
       borderRadius: '3px',
-      // alignSelf: 'center'
+      height: '300px',
+      marginRight: '20px'
+    },
+    largeImg: {
+      height: '700px'
     },
     imgWrapper: {
       display: 'flex',
@@ -51,30 +49,25 @@ const ComponentTree: React.FC<RouteComponentProps> = () => {
   return (
     <div className={classes.wrapper}>
       <h1 className={classes.title}>Next.js Route Links</h1>
-      <h2></h2>
-      <p className={classes.text}>Users are able to drag-and-drop 'Link' components which allow navigation to different pages.</p>
-      <p className={classes.text}>For more information on 'Link', please <a href="https://nextjs.org/docs/api-reference/next/link" target="_blank">visit the official documentation on nextjs.org.</a></p>
+      <h2>Route Links are only available for Next.js projects.</h2>
+      <p className={classes.text}>Users are able to drag-and-drop 'Link' components onto the canvas which allow navigation to different pages.</p>
       <div className={classes.imgWrapper}>
-        <img className={classes.img} src={link1}></img>
+        <img className={classes.largeImg} src={linksCanvas}></img>
       </div>
-      <p className={classes.text}>Each tree begins with a root node. The current page that is selected represents the root node.</p>
+      <p className={classes.text}>Each page found in the 'Pages' section can be navigated to via a 'Link'. Clicking on the 'Route Link' dropdown will display all the created pages in your application.</p>
       <div className={classes.imgWrapper}>
-        {/* <img className={classes.img} src={pages}></img> */}
-        <img className={classes.img} src={tree2}></img>
+        <img className={classes.smallImg} src={links2}></img>
+        <img className={classes.smallImg} src={links3}></img>
       </div>
-      <p className={classes.text}>Reusable components are shown attached to the current page along with their subtrees of components and HTML elements.</p>
-      <div className={classes.imgWrapper}>
-        {/* <img className={classes.img} src={re_comps}></img> */}
-        <img className={classes.img} src={tree3}></img>
-      </div>  
-      <p className={classes.text}>HTML elements are shown by their tag name.</p>
+      <p className={classes.text}>The code generator will automatically <code>import Link from 'next/link'</code> and create your Link component in the bottom panel.</p>
       <div className={classes.imgWrapper}>
-        <img className={classes.img} src={tree4}></img>
+        <img className={classes.largeImg} src={links4}></img>
       </div>
-      <p className={classes.text}>You can also view the tree for each reusable component.</p>
+      <p className={classes.text}>Clicking on a Link component on the canvas will navigate to the corresponding page.</p>
       <div className={classes.imgWrapper}>
-        <img className={classes.img} src={tree5}></img>
+        <img className={classes.smallImg} src={links6}></img>
       </div>
+      <p className={classes.text}>For more information on 'Link' for Next.js, please <a href="https://nextjs.org/docs/api-reference/next/link" target="_blank">visit the official documentation on nextjs.org.</a></p>
       <Link to={`/tutorial`}>
         <button>Tutorial</button>
       </Link>

app/src/tutorial/TutorialPage.tsx

@@ -15,7 +15,8 @@ const useStyles = makeStyles({
   tutorial_page: {
     display: 'flex',
     flexDirection: 'row',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    fontSize: '30px'
   },
   main_tutorial: {
     flexGrow: 2