Skip to content

Commit 2e73814

Browse files
jzuniga206jzuniga206
authored
Merge pull request #22 from tonyito/mvp
Complete tutorial Functionality
2 parents 12db67e + fa52ac8 commit 2e73814

File tree

7 files changed

+288
-66
lines changed

7 files changed

+288
-66
lines changed

‎src/actionTypes/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ export const CHANGE_IMAGE_SOURCE: string = 'CHANGE_IMAGE_SOURCE';
3131
export const DELETE_IMAGE: string = 'DELETE_IMAGE';
3232
export const TOGGLE_STATE: string = 'TOGGLE_STATE';
3333
export const TOGGLE_CLASS: string = 'TOGGLE_CLASS';
34+
export const CHANGE_TUTORIAL: string = 'CHANGE_TUTORIAL';

‎src/actions/components.ts

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,19 @@ import {
2626
UPDATE_HTML_ATTR,
2727
// UPDATE_CHILDREN_SORT, --The reason why this is commented out is because of the unused reducer of the same name, for the component that is unfinished with the same name. Check out the Sort Children component to see what it does.
2828
CHANGE_IMAGE_SOURCE,
29-
DELETE_IMAGE
29+
DELETE_IMAGE,
30+
CHANGE_TUTORIAL
3031
} from '../actionTypes/index';
3132

3233
import { loadState } from '../localStorage'; //this is a warning from 'localStorage' being a .js file instead of .ts. Convert to .ts to remove this warning.
3334
import createFiles from '../utils/createFiles.util';
3435
import createApplicationUtil from '../utils/createApplication.util';
3536

37+
export const changeTutorial = (tutorial: number) => ({
38+
type: CHANGE_TUTORIAL,
39+
payload: { tutorial }
40+
});
41+
3642
export const changeImagePath = (imageSource: string) => ({
3743
type: CHANGE_IMAGE_SOURCE,
3844
payload: { imageSource }

‎src/components/Tutorial.tsx

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
import React, { Component } from 'react';
2+
import Backdrop from '@material-ui/core/Backdrop';
3+
import Modal from '@material-ui/core/Modal';
4+
import Fade from '@material-ui/core/Fade';
5+
import theme from '../components/theme';
6+
import Button from '@material-ui/core/Button';
7+
8+
interface Props {
9+
tutorial: number;
10+
handleNext(tutorial: number): void;
11+
}
12+
13+
class Tutorial extends Component<Props> {
14+
render(): JSX.Element {
15+
const { tutorial, handleNext } = this.props;
16+
17+
let dialog;
18+
if (!tutorial) dialog = (<div />);
19+
if (tutorial === 1) {
20+
dialog = (
21+
<div
22+
style={{
23+
gridColumnStart: 'col2',
24+
gridColumnEnd: 'col4',
25+
gridRowStart: 'row9',
26+
gridRowEnd: 'row10',
27+
backgroundColor: theme.palette.background.paper,
28+
border: '2px solid #000',
29+
padding: '20px',
30+
boxShadow: theme.shadows[5],
31+
wordWrap: 'break-word',
32+
width: '100%',
33+
borderRadius: '20px 50px',
34+
}}
35+
>
36+
<h1
37+
style={{ color: theme.palette.primary.dark }}
38+
id="transition-modal-title"
39+
>
40+
Step 1
41+
</h1>
42+
<h2 id="transition-modal-description">
43+
Upload an image of your website template using the red 'upload image' button below.
44+
</h2>
45+
<h2 id="transition-modal-description">
46+
You can remove the image by clicking the button again, or replace
47+
the image by going to 'File --> Open Image'.
48+
</h2>
49+
<Button
50+
onClick={() => {
51+
handleNext(2);
52+
}}
53+
variant="contained"
54+
color="inherit"
55+
style={{ float: 'right' }}
56+
>
57+
Next
58+
</Button>
59+
</div>
60+
);
61+
}
62+
if (tutorial === 2) {
63+
dialog = (
64+
<div
65+
style={{
66+
gridColumnStart: 'col2',
67+
gridColumnEnd: 'col6',
68+
gridRowStart: 'row2',
69+
gridRowEnd: 'row3',
70+
backgroundColor: theme.palette.background.paper,
71+
border: '2px solid #000',
72+
padding: '20px',
73+
boxShadow: theme.shadows[5],
74+
wordWrap: 'break-word',
75+
width: '100%',
76+
borderRadius: '20px 50px',
77+
}}
78+
>
79+
<h1
80+
style={{ color: theme.palette.primary.dark }}
81+
id="transition-modal-title"
82+
>
83+
Step 2
84+
</h1>
85+
<h2 id="transition-modal-description">
86+
Give your component a name add click '+' to add it to your collection of components.
87+
</h2>
88+
<h2 id="transition-modal-description">
89+
You can also make each component you create stateful or not stateful, and functional or as a class component as well.
90+
</h2>
91+
<h2 id="transition-modal-description">
92+
Once you've added your component, while in the view of the component you would like to make the parent of your new component, click '+' next to the new component you created to make it a child.
93+
</h2>
94+
<Button
95+
onClick={() => {
96+
handleNext(3);
97+
}}
98+
variant="contained"
99+
color="inherit"
100+
style={{ float: 'right' }}
101+
>
102+
Next
103+
</Button>
104+
</div>
105+
);
106+
}
107+
if (tutorial === 3) {
108+
dialog = (
109+
<div
110+
style={{
111+
gridColumnStart: 'col6',
112+
gridColumnEnd: 'col9',
113+
gridRowStart: 'row9',
114+
gridRowEnd: 'row10',
115+
backgroundColor: theme.palette.background.paper,
116+
border: '2px solid #000',
117+
padding: '20px',
118+
boxShadow: theme.shadows[5],
119+
wordWrap: 'break-word',
120+
width: '100%',
121+
borderRadius: '20px 50px',
122+
}}
123+
>
124+
<h1
125+
style={{ color: theme.palette.primary.dark }}
126+
id="transition-modal-title"
127+
>
128+
Step 3
129+
</h1>
130+
<h2 id="transition-modal-description">
131+
Once you have designed your components above, you can add props and HTML elements to your components in this bottom panel.
132+
</h2>
133+
<h2 id="transition-modal-description">
134+
While you're working on designing your app, you can also preview the code that will be exported and your application's component tree in the corresponding tabs.
135+
</h2>
136+
<Button
137+
onClick={() => {
138+
handleNext(4);
139+
}}
140+
variant="contained"
141+
color="inherit"
142+
style={{ float: 'right' }}
143+
>
144+
Next
145+
</Button>
146+
</div>
147+
);
148+
}
149+
if (tutorial === 4) {
150+
dialog = (
151+
<div
152+
style={{
153+
gridColumnStart: 'col1',
154+
gridColumnEnd: 'col4',
155+
gridRowStart: 'row9',
156+
gridRowEnd: 'row10',
157+
backgroundColor: theme.palette.background.paper,
158+
border: '2px solid #000',
159+
padding: '20px',
160+
boxShadow: theme.shadows[5],
161+
wordWrap: 'break-word',
162+
width: '100%',
163+
borderRadius: '20px 50px',
164+
}}
165+
>
166+
<h1
167+
style={{ color: theme.palette.primary.dark }}
168+
id="transition-modal-title"
169+
>
170+
Step 4
171+
</h1>
172+
<h2 id="transition-modal-description">
173+
Once you're all done, simply click on the "Export Project" button below to export your files for development.
174+
</h2>
175+
<h2 id="transition-modal-description">
176+
You have the option of exporting just the components, or an entire React + Express boilerplate with the components you designed.
177+
</h2>
178+
<Button
179+
onClick={() => {
180+
handleNext(0);
181+
}}
182+
variant="contained"
183+
color="inherit"
184+
style={{ float: 'right' }}
185+
>
186+
Finish!
187+
</Button>
188+
</div>
189+
);
190+
}
191+
return (
192+
<Modal
193+
aria-labelledby="transition-modal-title"
194+
aria-describedby="transition-modal-description"
195+
open={tutorial !== 0}
196+
onClose={() => handleNext(0)}
197+
closeAfterTransition
198+
BackdropComponent={Backdrop}
199+
BackdropProps={{
200+
timeout: 500,
201+
}}
202+
style={{
203+
display: 'grid',
204+
gridTemplateColumns:
205+
'[col1] 1fr [col2] 1fr [col3] 1fr [col4] 1fr [col5] 1fr [col6] 1fr [col7] 1fr [col8] 1fr [col9] 1fr [col10] 1fr [end]',
206+
gridTemplateRows:
207+
'[row1] 1fr [row2] 1fr [row3] 1fr [row4] 1fr [row5] 1fr [row6] 1fr [row7] 1fr [row8] 1fr [row9] 1fr [row10] 1fr [end]',
208+
}}
209+
>
210+
<Fade in={tutorial !== 0}>{dialog}</Fade>
211+
</Modal>
212+
);
213+
}
214+
}
215+
216+
export default Tutorial;

0 commit comments

Comments
 (0)