Merge pull request #27 from diegovazquezny/fix-del

Fix del

Author: jinsoolim

app/electron/main.js

@@ -224,8 +224,10 @@ app.on('web-contents-created', (event, contents) => {
       selfHost,
       'http://localhost:5000',
       'https://reactype.herokuapp.com',
-      'https://github.com/'
+      'https://github.com/',
+      'https://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
     if (!validOrigins.includes(parsedUrl.origin)) {
       console.error(
@@ -234,7 +236,7 @@ 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}`);
   });
 
   contents.on('will-redirect', (event, navigationUrl) => {
@@ -243,8 +245,8 @@ app.on('web-contents-created', (event, contents) => {
       selfHost,
       'http://localhost:5000',
       'https://reactype.herokuapp.com',
-      'https://github.com',
-      'app://rse/'
+      'https://github.com/',
+      'https://nextjs.org',
     ];
 
     // Log and prevent the app from redirecting to a new page
@@ -258,7 +260,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
@@ -277,12 +279,26 @@ app.on('web-contents-created', (event, contents) => {
   // https://electronjs.org/docs/tutorial/security#13-disable-or-limit-creation-of-new-windows
   contents.on('new-window', async (event, navigationUrl) => {
     // Log and prevent opening up a new window
-    console.error(
-      `The application tried to open a new window at the following address: '${navigationUrl}'. This attempt was blocked.`
-    );
-
-    event.preventDefault();
-    return;
+    const parsedUrl = new URL(navigationUrl);
+    const validOrigins = [
+      selfHost,
+      'http://localhost:5000',
+      'https://reactype.herokuapp.com',
+      'https://github.com/',
+      'https://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
+    if (!validOrigins.includes(parsedUrl.origin)) {
+      console.error(
+        `The application tried to open a new window at the following address: '${navigationUrl}'. This attempt was blocked.`
+      );
+      // if the requested URL is not in the whitelisted array, then don't navigate there
+      event.preventDefault();
+      return;
+    } else console.log(`Successful new window to ${parsedUrl}`);
+    // event.preventDefault();
+    // return;
   });
 });
 

app/src/components/bottom/CodePreview.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useState, useRef, useEffect } from 'react';
 import { StateContext } from '../../context/context';
 import AceEditor from 'react-ace';
 import { makeStyles } from '@material-ui/core/styles';
@@ -9,21 +9,17 @@ import 'ace-builds/src-noconflict/theme-solarized_dark';
 import 'ace-builds/src-noconflict/theme-solarized_light';
 import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
-
-// const useStyles = makeStyles(theme => ({
-//   formControl: {
-//     margin: theme.spacing(1),
-//     minWidth: 120
-//   },
-//   selectEmpty: {
-//     marginTop: theme.spacing(2)
-//   }
-// }));
-
-// const optionColor = '#252526';
+import useResizeObserver from '../../tree/useResizeObserver';
 
 const CodePreview = ({ theme, setTheme }) => {
+  const wrapper = useRef();
+  //console.log(wrapper.current);
+  const dimensions = useResizeObserver(wrapper);
+  const { width, height } =
+    dimensions || 0;
+
   const [state, dispatch] = useContext(StateContext);
+  const [divHeight, setDivHeight] = useState(0);
   // const classes = useStyles();
   const currentComponent = state.components.find(
     (elem: Component) => elem.id === state.canvasFocus.componentId
@@ -37,14 +33,21 @@ const CodePreview = ({ theme, setTheme }) => {
     setTheme(e.target.value);
   };
 
+  useEffect(() => {
+    setDivHeight(height);
+    //console.log(divHeight);
+  }, [height])
+
   return (
     <div
+    ref={wrapper}
       style={{
         height: '90%',
         maxWidth: '100%',
         justifyContent: 'center'
       }}
     >
+      {/* <h1>{divHeight}</h1> */}
       <AceEditor
         mode="javascript"
         theme={theme}

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,23 +1,78 @@
 import React from 'react';
-import { Link, RouteComponentProps } from 'react-router-dom';
-
+import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
+import { makeStyles } from '@material-ui/core/styles';
+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';
 // import HTMLPanel from '../components/left/HTMLPanel';
 
 // Left-hand portion of the app, where component options are displayed
 
-const RouteLinks: React.FC<{
-  classes: any;
-  setPage: Function;
-}> = ({ classes, setPage }) => {
+const ComponentTree: React.FC<RouteComponentProps> = () => {
+  const body = document.querySelector('body');
+  body.style.overflowY = 'auto';
+  const useStyles = makeStyles({
+    title: {
+      color: '#14151f',
+      fontSize: 54
+    },
+    text: {
+      color: '#2e2f3e',
+      fontSize: 24
+    },
+    wrapper: {
+      margin: '30px 30px 30px 30px',
+      width: 'auto'
+    },
+    smallImg: {
+      borderRadius: '3px',
+      height: '300px',
+      marginRight: '20px'
+    },
+    largeImg: {
+      height: '700px'
+    },
+    imgWrapper: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      // border: '1px solid black',
+      width: 'auto'
+    }
+  });
+  const classes = useStyles();
   return (
-    <div>
-      RouteLinks
+    <div className={classes.wrapper}>
+      <h1 className={classes.title}>Next.js Route Links</h1>
+      <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.largeImg} src={linksCanvas}></img>
+      </div>
+      <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.smallImg} src={links2}></img>
+        <img className={classes.smallImg} src={links3}></img>
+      </div>
+      <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.largeImg} src={links4}></img>
+      </div>
+      <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.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>
     </div>
   );
 };
 
-export default RouteLinks;
-
+export default withRouter(ComponentTree);