Skip to content

Commit 7220fac

Browse files
diegovazqueznydiegovazquezny
committed
merging johns update
1 parent f4d6724 commit 7220fac

File tree

8 files changed

+128
-29
lines changed

8 files changed

+128
-29
lines changed

‎app/electron/main.js

Lines changed: 45 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -223,8 +223,17 @@ app.on('web-contents-created', (event, contents) => {
223223
selfHost,
224224
'http://localhost:5000',
225225
'https://reactype.herokuapp.com',
226-
'https://github.com/'
226+
'https://github.com/',
227+
'https://nextjs.org',
228+
'https://nextjs.org/',
229+
'http://nextjs.org',
230+
'http://nextjs.org/',
231+
'https://www.nextjs.org',
232+
'https://www.nextjs.org/',
233+
'http://www.nextjs.org',
234+
'http://www.nextjs.org/',
227235
];
236+
console.log('parsed URL origin', parsedUrl.origin);
228237
// Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
229238
if (!validOrigins.includes(parsedUrl.origin)) {
230239
console.error(
@@ -233,7 +242,7 @@ app.on('web-contents-created', (event, contents) => {
233242
// if the requested URL is not in the whitelisted array, then don't navigate there
234243
event.preventDefault();
235244
return;
236-
}
245+
} else console.log(`Successful navigation to ${parsedUrl}`);
237246
});
238247

239248
contents.on('will-redirect', (event, navigationUrl) => {
@@ -242,8 +251,15 @@ app.on('web-contents-created', (event, contents) => {
242251
selfHost,
243252
'http://localhost:5000',
244253
'https://reactype.herokuapp.com',
245-
'https://github.com',
246-
'app://rse/'
254+
'https://github.com/',
255+
'https://nextjs.org',
256+
'https://nextjs.org/',
257+
'http://nextjs.org',
258+
'http://nextjs.org/',
259+
'https://www.nextjs.org',
260+
'https://www.nextjs.org/',
261+
'http://www.nextjs.org',
262+
'http://www.nextjs.org/',
247263
];
248264

249265
// Log and prevent the app from redirecting to a new page
@@ -276,10 +292,31 @@ app.on('web-contents-created', (event, contents) => {
276292
// https://electronjs.org/docs/tutorial/security#13-disable-or-limit-creation-of-new-windows
277293
contents.on('new-window', async (event, navigationUrl) => {
278294
// Log and prevent opening up a new window
279-
console.error(
280-
`The application tried to open a new window at the following address: '${navigationUrl}'. This attempt was blocked.`
281-
);
282-
295+
const parsedUrl = new URL(navigationUrl);
296+
const validOrigins = [
297+
selfHost,
298+
'http://localhost:5000',
299+
'https://reactype.herokuapp.com',
300+
'https://github.com/',
301+
'https://nextjs.org',
302+
'https://nextjs.org/',
303+
'http://nextjs.org',
304+
'http://nextjs.org/',
305+
'https://www.nextjs.org',
306+
'https://www.nextjs.org/',
307+
'http://www.nextjs.org',
308+
'http://www.nextjs.org/',
309+
];
310+
console.log('parsed URL origin', parsedUrl.origin);
311+
// Log and prevent the app from navigating to a new page if that page's origin is not whitelisted
312+
if (!validOrigins.includes(parsedUrl.origin)) {
313+
console.error(
314+
`The application tried to open a new window at the following address: '${navigationUrl}'. This attempt was blocked.`
315+
);
316+
// if the requested URL is not in the whitelisted array, then don't navigate there
317+
event.preventDefault();
318+
return;
319+
} else console.log(`Successful navigation to ${parsedUrl}`);
283320
event.preventDefault();
284321
return;
285322
});

‎app/src/components/bottom/CodePreview.tsx

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext, useState } from 'react';
1+
import React, { useContext, useState, useRef, useEffect } from 'react';
22
import { StateContext } from '../../context/context';
33
import AceEditor from 'react-ace';
44
import { makeStyles } from '@material-ui/core/styles';
@@ -9,21 +9,17 @@ import 'ace-builds/src-noconflict/theme-solarized_dark';
99
import 'ace-builds/src-noconflict/theme-solarized_light';
1010
import 'ace-builds/src-noconflict/theme-terminal';
1111
import { Component } from '../../interfaces/Interfaces';
12-
13-
// const useStyles = makeStyles(theme => ({
14-
// formControl: {
15-
// margin: theme.spacing(1),
16-
// minWidth: 120
17-
// },
18-
// selectEmpty: {
19-
// marginTop: theme.spacing(2)
20-
// }
21-
// }));
22-
23-
// const optionColor = '#252526';
12+
import useResizeObserver from '../../tree/useResizeObserver';
2413

2514
const CodePreview = ({ theme, setTheme }) => {
15+
const wrapper = useRef();
16+
console.log(wrapper.current);
17+
const dimensions = useResizeObserver(wrapper);
18+
const { width, height } =
19+
dimensions || 0;
20+
2621
const [state, dispatch] = useContext(StateContext);
22+
const [divHeight, setDivHeight] = useState(0);
2723
// const classes = useStyles();
2824
const currentComponent = state.components.find(
2925
(elem: Component) => elem.id === state.canvasFocus.componentId
@@ -37,14 +33,21 @@ const CodePreview = ({ theme, setTheme }) => {
3733
setTheme(e.target.value);
3834
};
3935

36+
useEffect(() => {
37+
setDivHeight(height);
38+
console.log(divHeight);
39+
}, [height])
40+
4041
return (
4142
<div
43+
ref={wrapper}
4244
style={{
4345
height: '90%',
4446
maxWidth: '100%',
4547
justifyContent: 'center'
4648
}}
4749
>
50+
{/* <h1>{divHeight}</h1> */}
4851
<AceEditor
4952
mode="javascript"
5053
theme={theme}

‎app/src/tutorial/RouteLinks.tsx

Lines changed: 67 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,85 @@
11
import React from 'react';
22
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
3+
import AccountTreeIcon from '@material-ui/icons/AccountTree';
34

5+
import { makeStyles } from '@material-ui/core/styles';
6+
import Typography from '@material-ui/core/Typography';
7+
import Container from '@material-ui/core/Container';
8+
import link1 from '../../../resources/route_links_tutorial_images/links1.png';
9+
import tree2 from '../../../resources/tree_tutorial_images/tree2.png';
10+
import tree3 from '../../../resources/tree_tutorial_images/tree3.png';
11+
import tree4 from '../../../resources/tree_tutorial_images/tree4.png';
12+
import tree5 from '../../../resources/tree_tutorial_images/tree5.png';
13+
import pages from '../../../resources/tree_tutorial_images/pages.png';
14+
import re_comps from '../../../resources/tree_tutorial_images/re_comps.png';
415
// import Grid from '@material-ui/core/Grid';
516

617
// import ComponentPanel from '../components/left/ComponentPanel';
718
// import HTMLPanel from '../components/left/HTMLPanel';
819

920
// Left-hand portion of the app, where component options are displayed
1021

11-
const RouteLinks: React.FC<RouteComponentProps> = () => {
22+
const ComponentTree: React.FC<RouteComponentProps> = () => {
23+
const body = document.querySelector('body');
24+
body.style.overflowY = 'auto';
25+
const useStyles = makeStyles({
26+
title: {
27+
color: '#14151f',
28+
fontSize: 54
29+
},
30+
text: {
31+
color: '#2e2f3e',
32+
fontSize: 24
33+
},
34+
wrapper: {
35+
margin: '30px 30px 30px 30px',
36+
width: 'auto'
37+
},
38+
img: {
39+
borderRadius: '3px',
40+
// alignSelf: 'center'
41+
},
42+
imgWrapper: {
43+
display: 'flex',
44+
flexDirection: 'row',
45+
alignItems: 'center',
46+
// border: '1px solid black',
47+
width: 'auto'
48+
}
49+
});
50+
const classes = useStyles();
1251
return (
13-
<div>
14-
RouteLinks
15-
<Link to={`/`}>
16-
<button>Application</button>
17-
</Link>
52+
<div className={classes.wrapper}>
53+
<h1 className={classes.title}>Next.js Route Links</h1>
54+
<h2></h2>
55+
<p className={classes.text}>Users are able to drag-and-drop 'Link' components which allow navigation to different pages.</p>
56+
<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>
57+
<div className={classes.imgWrapper}>
58+
<img className={classes.img} src={link1}></img>
59+
</div>
60+
<p className={classes.text}>Each tree begins with a root node. The current page that is selected represents the root node.</p>
61+
<div className={classes.imgWrapper}>
62+
{/* <img className={classes.img} src={pages}></img> */}
63+
<img className={classes.img} src={tree2}></img>
64+
</div>
65+
<p className={classes.text}>Reusable components are shown attached to the current page along with their subtrees of components and HTML elements.</p>
66+
<div className={classes.imgWrapper}>
67+
{/* <img className={classes.img} src={re_comps}></img> */}
68+
<img className={classes.img} src={tree3}></img>
69+
</div>
70+
<p className={classes.text}>HTML elements are shown by their tag name.</p>
71+
<div className={classes.imgWrapper}>
72+
<img className={classes.img} src={tree4}></img>
73+
</div>
74+
<p className={classes.text}>You can also view the tree for each reusable component.</p>
75+
<div className={classes.imgWrapper}>
76+
<img className={classes.img} src={tree5}></img>
77+
</div>
1878
<Link to={`/tutorial`}>
1979
<button>Tutorial</button>
2080
</Link>
2181
</div>
2282
);
2383
};
2484

25-
export default withRouter(RouteLinks);
26-
85+
export default withRouter(ComponentTree);

‎resources/route_links_tutorial_images/link4.PNG

17.8 KB
Loading

‎resources/route_links_tutorial_images/link5.PNG

2.5 KB
Loading

‎resources/route_links_tutorial_images/links1.PNG

3.11 KB
Loading

‎resources/route_links_tutorial_images/links2.PNG

2.69 KB
Loading

‎resources/route_links_tutorial_images/links3.PNG

3.91 KB
Loading

0 commit comments

Comments
 (0)