Skip to content
This repository was archived by the owner on Mar 7, 2024. It is now read-only.

Commit 73e31cb

Browse files
KeenWarriorKeenWarrior
committed
Update applications edit process and submission
1 parent adeac91 commit 73e31cb

File tree

6 files changed

+393
-44
lines changed

6 files changed

+393
-44
lines changed

‎src/Routes.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,6 @@ const routesConfig = [
9494
layout: MainLayout,
9595
routes: [
9696
{
97-
exact: true,
9897
path: '/courses',
9998
component: Courses
10099
},

‎src/views/pages/ApplicationsView/ApplicationSteps.js

Lines changed: 308 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,308 @@
1+
import React, { useState } from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import Stepper from '@material-ui/core/Stepper';
4+
import Step from '@material-ui/core/Step';
5+
import StepLabel from '@material-ui/core/StepLabel';
6+
import StepContent from '@material-ui/core/StepContent';
7+
import Paper from '@material-ui/core/Paper';
8+
9+
import { Button, Typography } from '@material-ui/core';
10+
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
11+
12+
// import axios from 'axios';
13+
14+
const useStyles = makeStyles(theme => ({
15+
root: {
16+
width: '100%'
17+
},
18+
button: {
19+
marginTop: theme.spacing(1),
20+
marginRight: theme.spacing(1)
21+
},
22+
actionsContainer: {
23+
marginBottom: theme.spacing(2)
24+
},
25+
resetContainer: {
26+
padding: theme.spacing(3)
27+
},
28+
textField: {
29+
marginBottom: '12px'
30+
}
31+
}));
32+
33+
function getSteps() {
34+
return ['Profile Information', 'Education Information', 'Application Challenge'];
35+
}
36+
37+
function getStepContent(step, setActiveStep, formData, setFormData) {
38+
switch (step) {
39+
case 0:
40+
return (
41+
<FormPersonalInfo
42+
setActiveStep={setActiveStep}
43+
data={formData}
44+
setData={setFormData}
45+
/>
46+
);
47+
case 1:
48+
return (
49+
<FormEducationInfo
50+
setActiveStep={setActiveStep}
51+
data={formData}
52+
setData={setFormData}
53+
/>
54+
);
55+
case 2:
56+
return (
57+
<FormChallenge
58+
setActiveStep={setActiveStep}
59+
data={formData}
60+
setData={setFormData}
61+
/>
62+
);
63+
default:
64+
return 'Unknown step';
65+
}
66+
}
67+
68+
export function ApplicationSteps() {
69+
const classes = useStyles();
70+
const [activeStep, setActiveStep] = React.useState(0);
71+
const [formData, setFormData] = React.useState({
72+
personal : {},
73+
education : {},
74+
challenge: {}
75+
});
76+
const steps = getSteps();
77+
78+
const handleSubmitApplication = () => {
79+
console.log(formData)
80+
};
81+
82+
return (
83+
<div className={classes.root}>
84+
<Stepper activeStep={activeStep} orientation="vertical">
85+
{steps.map((label, index) => (
86+
<Step key={label}>
87+
<StepLabel>{label}</StepLabel>
88+
<StepContent>
89+
{getStepContent(index, setActiveStep, formData, setFormData)}
90+
</StepContent>
91+
</Step>
92+
))}
93+
</Stepper>
94+
{activeStep === steps.length && (
95+
<Paper square elevation={0} className={classes.resetContainer}>
96+
<Typography>All steps completed</Typography>
97+
<Button onClick={handleSubmitApplication} className={classes.button}>
98+
Submit Application
99+
</Button>
100+
</Paper>
101+
)}
102+
</div>
103+
);
104+
}
105+
106+
function FormPersonalInfo({ setActiveStep, data, setData }) {
107+
const classes = useStyles();
108+
const [formData, updateFormData] = useState(data.personal);
109+
110+
const handleChange = event => {
111+
updateFormData({
112+
...formData,
113+
[event.target.name]: event.target.value
114+
});
115+
};
116+
117+
const handleSubmit = e => {
118+
e.preventDefault();
119+
setData({
120+
...data,
121+
personal: formData
122+
});
123+
setActiveStep(1);
124+
};
125+
126+
return (
127+
<ValidatorForm onSubmit={handleSubmit}>
128+
<TextValidator
129+
key="name"
130+
className={classes.textField}
131+
label="Full Name"
132+
variant="outlined"
133+
value={formData.name}
134+
fullWidth
135+
name="name"
136+
onChange={handleChange}
137+
validators={['required']}
138+
errorMessages={['This is a required field']}
139+
/>
140+
141+
<TextValidator
142+
key="email"
143+
className={classes.textField}
144+
label="Email"
145+
variant="outlined"
146+
value={formData.email}
147+
fullWidth
148+
name="email"
149+
onChange={handleChange}
150+
validators={['required']}
151+
errorMessages={['This is a required field']}
152+
/>
153+
154+
<Button variant="outlined" disabled color="secondary">
155+
Cancel
156+
</Button>
157+
158+
<Button
159+
type="submit"
160+
variant="contained"
161+
color="secondary"
162+
style={{
163+
marginLeft: '16px'
164+
}}
165+
>
166+
Next
167+
</Button>
168+
</ValidatorForm>
169+
);
170+
}
171+
172+
function FormEducationInfo({ setActiveStep, data, setData }) {
173+
const classes = useStyles();
174+
const [formData, updateFormData] = useState(data.education);
175+
176+
const handleChange = event => {
177+
updateFormData({
178+
...formData,
179+
[event.target.name]: event.target.value
180+
});
181+
};
182+
183+
const handlePrev = () => {
184+
setActiveStep(0);
185+
};
186+
187+
const handleSubmit = e => {
188+
e.preventDefault();
189+
setData({
190+
...data,
191+
education: formData
192+
});
193+
setActiveStep(2);
194+
};
195+
196+
return (
197+
<ValidatorForm onSubmit={handleSubmit}>
198+
<TextValidator
199+
key="name"
200+
className={classes.textField}
201+
label="Full Name"
202+
variant="outlined"
203+
value={formData.name}
204+
fullWidth
205+
name="name"
206+
onChange={handleChange}
207+
validators={['required']}
208+
errorMessages={['This is a required field']}
209+
/>
210+
211+
<TextValidator
212+
key="email"
213+
className={classes.textField}
214+
label="Email"
215+
variant="outlined"
216+
value={formData.email}
217+
fullWidth
218+
name="email"
219+
onChange={handleChange}
220+
validators={['required']}
221+
errorMessages={['This is a required field']}
222+
/>
223+
224+
<Button variant="outlined" onClick={handlePrev} color="secondary">
225+
Prev
226+
</Button>
227+
<Button
228+
type="submit"
229+
variant="contained"
230+
color="secondary"
231+
style={{
232+
marginLeft: '16px'
233+
}}
234+
>
235+
Next
236+
</Button>
237+
</ValidatorForm>
238+
);
239+
}
240+
241+
function FormChallenge({ setActiveStep, data, setData }) {
242+
const classes = useStyles();
243+
const [formData, updateFormData] = useState(data.challenge);
244+
245+
const handleChange = event => {
246+
updateFormData({
247+
...formData,
248+
[event.target.name]: event.target.value
249+
});
250+
};
251+
252+
const handlePrev = () => {
253+
setActiveStep(1);
254+
};
255+
256+
const handleSubmit = e => {
257+
e.preventDefault();
258+
setData({
259+
...data,
260+
challenge: formData
261+
});
262+
setActiveStep(3);
263+
};
264+
265+
return (
266+
<ValidatorForm onSubmit={handleSubmit}>
267+
<TextValidator
268+
key="name"
269+
className={classes.textField}
270+
label="Full Name"
271+
variant="outlined"
272+
value={formData.name}
273+
fullWidth
274+
name="name"
275+
onChange={handleChange}
276+
validators={['required']}
277+
errorMessages={['This is a required field']}
278+
/>
279+
280+
<TextValidator
281+
key="email"
282+
className={classes.textField}
283+
label="Email"
284+
variant="outlined"
285+
value={formData.email}
286+
fullWidth
287+
name="email"
288+
onChange={handleChange}
289+
validators={['required']}
290+
errorMessages={['This is a required field']}
291+
/>
292+
293+
<Button variant="outlined" onClick={handlePrev} color="secondary">
294+
Prev
295+
</Button>
296+
<Button
297+
type="submit"
298+
variant="contained"
299+
color="secondary"
300+
style={{
301+
marginLeft: '16px'
302+
}}
303+
>
304+
Next
305+
</Button>
306+
</ValidatorForm>
307+
);
308+
}

‎src/views/pages/ApplicationsView/EditApplication.js

Lines changed: 34 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,37 @@
11
import React from 'react';
2-
import Button from '@material-ui/core/Button';
3-
import { ValidatorForm, TextValidator} from 'react-material-ui-form-validator';
4-
5-
export class EditApplication extends React.Component {
6-
7-
state = {
8-
email: '',
9-
}
10-
11-
handleChange = (event) => {
12-
const email = event.target.value;
13-
this.setState({ email });
14-
}
15-
16-
handleSubmit = () => {
17-
// your submit logic
18-
}
19-
20-
render() {
21-
const { email } = this.state;
22-
return (
23-
<ValidatorForm
24-
ref="form"
25-
onSubmit={this.handleSubmit}
26-
>
27-
<TextValidator
28-
label="Email"
29-
variant="outlined"
30-
onChange={this.handleChange}
31-
name="email"
32-
value={email}
33-
validators={['required']}
34-
errorMessages={['This is a required field']}
35-
/>
36-
<Button type="submit">Submit</Button>
37-
</ValidatorForm>
38-
);
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import { Grid, Typography } from '@material-ui/core';
4+
import { ApplicationSteps } from './ApplicationSteps';
5+
// import axios from 'src/utils/axios';
6+
7+
const useStyles = makeStyles(theme => ({
8+
root: {
9+
padding: theme.spacing(10, 10, 10),
10+
display: 'flex',
11+
justifyContent: 'center',
12+
alignItems: 'center',
13+
[theme.breakpoints.down('md')]: {
14+
padding: theme.spacing(10, 3, 10)
3915
}
16+
}
17+
}));
18+
19+
export function EditApplication() {
20+
const classes = useStyles();
21+
22+
return (
23+
<Grid container className={classes.root}>
24+
<Grid item lg={6} md={6} sm={12} xs={12}>
25+
<Typography variant="h2">
26+
Fill the Application to be Considered for the Course
27+
</Typography>
28+
</Grid>
29+
30+
<Grid item lg={6} md={6} sm={12} xs={12}></Grid>
31+
32+
<Grid item lg={6} md={6} sm={12} xs={12}>
33+
<ApplicationSteps />
34+
</Grid>
35+
</Grid>
36+
);
4037
}

0 commit comments

Comments
 (0)