Skip to content

Commit 7e9e246

Browse files
merge conflict
2 parents 4b48065 + e387cb3 commit 7e9e246

File tree

15 files changed

+183
-214
lines changed

15 files changed

+183
-214
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 initially as it's loading
@@ -419,6 +420,7 @@ ipcMain.on('tutorial', event => {
419420
const tutorial = new BrowserWindow({
420421
width: 800,
421422
height: 600,
423+
minWidth: 661,
422424
title: 'Tutorial',
423425
webPreferences: {
424426
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: 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 Customization: React.FC<RouteComponentProps> = () => {
11+
const Customization: React.FC<{
12+
classes: any;
13+
setPage: Function;
14+
}> = ({ classes, setPage }) => {
1215
return (
1316
<div>
1417
Customization
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(Customization);
22+
export default Customization;
2623

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: 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 Pages: React.FC<RouteComponentProps> = () => {
11+
const Pages: React.FC<{
12+
classes: any;
13+
setPage: Function;
14+
}> = ({ classes, setPage }) => {
1215
return (
1316
<div>
1417
Pages
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(Pages);
22+
export default Pages;
2623

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

0 commit comments

Comments
 (0)