Skip to content

Commit 41d1ee7

Browse files
brianjshanbrianjshan
committed
merged
2 parents 41125e7 + e387cb3 commit 41d1ee7

File tree

15 files changed

+176
-139
lines changed

15 files changed

+176
-139
lines changed

‎app/electron/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ async function createWindow() {
5555
// full screen
5656
width: 1920,
5757
height: 1080,
58+
minWidth: 980,
5859
// window title
5960
title: `ReacType`,
6061
// the browser window will not display intiially as it's loading
@@ -412,6 +413,7 @@ ipcMain.on('tutorial', event => {
412413
const tutorial = new BrowserWindow({
413414
width: 800,
414415
height: 600,
416+
minWidth: 661,
415417
title: 'Tutorial',
416418
webPreferences: {
417419
nodeIntegration: false,

‎app/electron/menu.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ var MenuBuilder = function(mainWindow, appName) {
1818
const tutorial = new BrowserWindow({
1919
width: 1224,
2020
height: 1024,
21+
minWidth: 661,
2122
title: 'Tutorial',
2223
webPreferences: {
2324
nodeIntegration: false,

‎app/src/components/left/HTMLPanel.tsx

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,19 @@ import { makeStyles } from '@material-ui/core/styles';
66

77
const HTMLPanel = (): JSX.Element => {
88
const classes = useStyles();
9+
const [state, dispatch] = useContext(StateContext);
10+
11+
let startingID = 0;
12+
for (let i = 0; i < state.HTMLTypes.length; i+=1) {
13+
if (state.HTMLTypes[i].id >= startingID) {
14+
startingID = state.HTMLTypes[i].id;
15+
}
16+
}
17+
startingID += 1;
918

1019
const [tag, setTag] = useState('');
1120
const [name, setName] = useState('');
12-
const [currentID, setCurrentID] = useState(12);
13-
const [state, dispatch] = useContext(StateContext);
21+
const [currentID, setCurrentID] = useState(startingID);
1422
const [errorMsg, setErrorMsg] = useState('');
1523
const [errorStatus, setErrorStatus] = useState(false);
1624

@@ -81,14 +89,8 @@ const HTMLPanel = (): JSX.Element => {
8189
type: 'ADD ELEMENT',
8290
payload: newElement
8391
});
84-
let nextID = 0;
85-
for (let i = 0; i < state.HTMLTypes.length; i+=1) {
86-
if (state.HTMLTypes[i].id > nextID) {
87-
nextID = state.HTMLTypes.id;
88-
}
89-
}
90-
nextID += 1;
91-
setCurrentID(nextID);
92+
93+
setCurrentID(currentID + 1);
9294
setTag('');
9395
setName('');
9496
};

‎app/src/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ ReactDOM.render(
3939
<Route exact path="/signup" component={SignUp} />
4040
<PrivateRoute exact path="/" component={App} />
4141
<Route exact path="/tutorial" component={Tutorial}/>
42-
<Route exact path="/tutorialPage/:learn" component={TutorialPage} value={'test'} />
42+
<Route exact path="/tutorialPage/:learn" component={TutorialPage} />
4343
</Switch>
4444
</Router>,
4545
document.getElementById('app')

‎app/src/tutorial/Canvas.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
33

44
// import Grid from '@material-ui/core/Grid';
55

@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
88

99
// Left-hand portion of the app, where component options are displayed
1010

11-
const Canvas: React.FC<RouteComponentProps> = () => {
11+
const Canvas: React.FC<{
12+
classes: any;
13+
setPage: Function;
14+
}> = ({ classes, setPage }) => {
1215
return (
1316
<div>
1417
Canvas
15-
<Link to={`/`}>
16-
<button>Application</button>
17-
</Link>
18-
<Link to={`/tutorial`}>
19-
<button>Tutorial</button>
20-
</Link>
2118
</div>
2219
);
2320
};
2421

25-
export default withRouter(Canvas);
22+
export default Canvas;
2623

‎app/src/tutorial/CodePreview.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
33

44
// import Grid from '@material-ui/core/Grid';
55

@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
88

99
// Left-hand portion of the app, where component options are displayed
1010

11-
const CodePreview: React.FC<RouteComponentProps> = () => {
11+
const CodePreview: React.FC<{
12+
classes: any;
13+
setPage: Function;
14+
}> = ({ classes, setPage }) => {
1215
return (
1316
<div>
1417
CodePreview
15-
<Link to={`/`}>
16-
<button>Application</button>
17-
</Link>
18-
<Link to={`/tutorial`}>
19-
<button>Tutorial</button>
20-
</Link>
2118
</div>
2219
);
2320
};
2421

25-
export default withRouter(CodePreview);
22+
export default CodePreview;
2623

‎app/src/tutorial/ComponentTree.tsx

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
33
import AccountTreeIcon from '@material-ui/icons/AccountTree';
44

55
import { makeStyles } from '@material-ui/core/styles';
@@ -19,35 +19,10 @@ import re_comps from '../../../resources/tree_tutorial_images/re_comps.png';
1919

2020
// Left-hand portion of the app, where component options are displayed
2121

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();
22+
const ComponentTree: React.FC<{
23+
classes: any;
24+
setPage: Function;
25+
}> = ({ classes, setPage }) => {
5126
return (
5227
<div className={classes.wrapper}>
5328
<h1 className={classes.title}>React Component Tree</h1>
@@ -65,7 +40,7 @@ const ComponentTree: React.FC<RouteComponentProps> = () => {
6540
<div className={classes.imgWrapper}>
6641
{/* <img className={classes.img} src={re_comps}></img> */}
6742
<img className={classes.img} src={tree3}></img>
68-
</div>
43+
</div>
6944
<p className={classes.text}>HTML elements are shown by their tag name.</p>
7045
<div className={classes.imgWrapper}>
7146
<img className={classes.img} src={tree4}></img>
@@ -74,11 +49,8 @@ const ComponentTree: React.FC<RouteComponentProps> = () => {
7449
<div className={classes.imgWrapper}>
7550
<img className={classes.img} src={tree5}></img>
7651
</div>
77-
<Link to={`/tutorial`}>
78-
<button>Tutorial</button>
79-
</Link>
8052
</div>
8153
);
8254
};
8355

84-
export default withRouter(ComponentTree);
56+
export default ComponentTree;

‎app/src/tutorial/Customization.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
32
import display from '../../../resources/customizing_elements_images/Display.png';
43
import flex from '../../../resources/customizing_elements_images/Flex.png';
54
import height from '../../../resources/customizing_elements_images/Height.png';
@@ -13,7 +12,10 @@ import backgroundcolor from '../../../resources/customizing_elements_images/Back
1312

1413
// Left-hand portion of the app, where component options are displayed
1514

16-
const Customization: React.FC<RouteComponentProps> = () => {
15+
const Customization: React.FC<{
16+
classes: any;
17+
setPage: Function;
18+
}> = ({ classes, setPage }) => {
1719
return (
1820
<div className="tutorial_styling">
1921
<h1 style={{ color: 'black' }}>Customizing Elements</h1>
@@ -61,4 +63,4 @@ const Customization: React.FC<RouteComponentProps> = () => {
6163
);
6264
};
6365

64-
export default withRouter(Customization);
66+
export default Customization;

‎app/src/tutorial/HtmlElements.tsx

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
1+
import React, { useEffect } from 'react';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
3+
import { makeStyles } from '@material-ui/core/styles';
34

45
// import Grid from '@material-ui/core/Grid';
56

@@ -8,19 +9,32 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
89

910
// Left-hand portion of the app, where component options are displayed
1011

11-
const HtmlElements: React.FC<RouteComponentProps> = () => {
12+
const HtmlElements: React.FC<{
13+
classes: any;
14+
setPage: Function;
15+
}> = ({ classes, setPage }) => {
16+
// useEffect(() => {
17+
// }, [match.params.learn])
18+
1219
return (
13-
<div>
14-
HtmlElements
15-
<Link to={`/`}>
16-
<button>Application</button>
17-
</Link>
18-
<Link to={`/tutorial`}>
19-
<button>Tutorial</button>
20-
</Link>
20+
<div className={classes.wrapper}>
21+
<h1 className={classes.title}>HtmlElements</h1>
22+
<p className={classes.text}>ReacType has default elements to help get you started.<br/>
23+
You can drag and drop elements into the <span className={classes.notLink} onClick={() => setPage('Canvas')} >Canvas</span> to create a React Component with HTML Elements.</p>
24+
<h2>Custom Elements</h2>
25+
<p className={classes.text}>You can create new custom elements to better suit your needs.<br/>
26+
Click <a href="">here</a> for a link to more HTML tags that you can add.<br/>
27+
"Tag" should be the HTML tag you are creating and "Tag Name" should be something that makes it easy to remember what this tag is/does.</p>
28+
<h2>Delete Buttons</h2>
29+
<p className={classes.text}>Delete buttons that you don't need.</p>
30+
<h2>Persisting Elements</h2>
31+
<p className={classes.text}>Saving the project (available only to users) will allow you to save custom elements that you created. However, when opening a new project, only the tags saved for each specific project will show up again.<br/>
32+
In order to save custom tags across multiple projects, we recommend creating custom tags first, then saving multiple projects with the custom tags. This will allow access to custom tags across multiple projects.</p>
33+
<h2>Customization</h2>
34+
<p className={classes.text}>Add attributes to elements in the generated code in the code preview. When making changes/editing the code, please make sure not to add anymore components/elements to the canvas. This should be the final step before exporting your project. Please see <span className={classes.notLink} onClick={() => setPage('Code_Preview')}>Code Preview</span> for more details on when/how to make changes to your code in ReacType.</p>
2135
</div>
2236
);
2337
};
2438

25-
export default withRouter(HtmlElements);
39+
export default HtmlElements;
2640

‎app/src/tutorial/Pages.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
32
import pages from '../../../resources/pages_images/Pages.png';
43
import toggle from '../../../resources/pages_images/Toggle.png';
54
import deletepage from '../../../resources/pages_images/DeletePage.png';
@@ -12,7 +11,10 @@ import addelements from '../../../resources/pages_images/AddElements.png';
1211

1312
// Left-hand portion of the app, where component options are displayed
1413

15-
const Pages: React.FC<RouteComponentProps> = () => {
14+
const Pages: React.FC<{
15+
classes: any;
16+
setPage: Function;
17+
}> = ({ classes, setPage }) => {
1618
return (
1719
<div className="tutorial_styling">
1820
<h1 style={{ color: 'black' }}>Pages</h1>
@@ -41,4 +43,4 @@ const Pages: React.FC<RouteComponentProps> = () => {
4143
);
4244
};
4345

44-
export default withRouter(Pages);
46+
export default Pages;

‎app/src/tutorial/ReusableComponents.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
33

44
// import Grid from '@material-ui/core/Grid';
55

@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
88

99
// Left-hand portion of the app, where component options are displayed
1010

11-
const ReusableComponents: React.FC<RouteComponentProps> = () => {
11+
const ReusableComponents: React.FC<{
12+
classes: any;
13+
setPage: Function;
14+
}> = ({ classes, setPage }) => {
1215
return (
1316
<div>
1417
ReusableComponents
15-
<Link to={`/`}>
16-
<button>Application</button>
17-
</Link>
18-
<Link to={`/tutorial`}>
19-
<button>Tutorial</button>
20-
</Link>
2118
</div>
2219
);
2320
};
2421

25-
export default withRouter(ReusableComponents);
22+
export default ReusableComponents;
2623

‎app/src/tutorial/RouteLinks.tsx

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
2+
import { Link, RouteComponentProps } from 'react-router-dom';
33

44
// import Grid from '@material-ui/core/Grid';
55

@@ -8,19 +8,16 @@ import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
88

99
// Left-hand portion of the app, where component options are displayed
1010

11-
const RouteLinks: React.FC<RouteComponentProps> = () => {
11+
const RouteLinks: React.FC<{
12+
classes: any;
13+
setPage: Function;
14+
}> = ({ classes, setPage }) => {
1215
return (
1316
<div>
1417
RouteLinks
15-
<Link to={`/`}>
16-
<button>Application</button>
17-
</Link>
18-
<Link to={`/tutorial`}>
19-
<button>Tutorial</button>
20-
</Link>
2118
</div>
2219
);
2320
};
2421

25-
export default withRouter(RouteLinks);
22+
export default RouteLinks;
2623

‎app/src/tutorial/Styling.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from 'react';
2-
import { Link, withRouter, RouteComponentProps } from 'react-router-dom';
32
import theme from '../../../resources/customizing_elements_images/Theme.png';
43
import lighting from '../../../resources/customizing_elements_images/Lighting.png';
54
import resize from '../../../resources/customizing_elements_images/Resize.png';
@@ -12,7 +11,10 @@ import codechange from '../../../resources/customizing_elements_images/CodeChang
1211

1312
// Left-hand portion of the app, where component options are displayed
1413

15-
const Styling: React.FC<RouteComponentProps> = () => {
14+
const Styling: React.FC<{
15+
classes: any;
16+
setPage: Function;
17+
}> = ({ classes, setPage }) => {
1618
return (
1719
<div className="tutorial_styling">
1820
<h1 style={{ color: 'black' }}>Styling Features</h1>
@@ -58,4 +60,4 @@ const Styling: React.FC<RouteComponentProps> = () => {
5860
);
5961
};
6062

61-
export default withRouter(Styling);
63+
export default Styling;

0 commit comments

Comments
 (0)