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

Commit 932096e

Browse files
Abhishek-kumar09Abhishek-kumar09
authored
Add Edit Profile View to Student Dashboard (#132)
* Add Edit profile View to Student Dashboard * fix netlify build
1 parent 8caccf6 commit 932096e

File tree

4 files changed

+360
-1
lines changed

4 files changed

+360
-1
lines changed

‎src/Routes.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import ProfileView from 'src/views/pages/ProfileView';
1212
import ApplicationsView from 'src/views/pages/ApplicationsView';
1313
import Error404View from 'src/views/pages/Error404View';
1414
import StudentDashboardView from 'src/views/pages/StudentDashboardView';
15+
import EditProfileView from 'src/views/pages/StudentDashboardView/EditProfile';
1516
import CoursePage from 'src/views/pages/Course/CoursePage';
1617
import TermsView from './views/pages/documents/termsView';
1718
import DocsLayout from './layouts/DocsLayout';
@@ -75,6 +76,15 @@ const renderRoutes = () => (
7576
</MainLayout>
7677
)}
7778
/>
79+
<Route
80+
path="/editProfile"
81+
exact
82+
render={props => (
83+
<MainLayout>
84+
<EditProfileView {...props} />
85+
</MainLayout>
86+
)}
87+
/>
7888

7989
<Route
8090
path="/courses"

‎src/components/Hero/StudentDashboardHero.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ function IconsList() {
204204
target="_blank"
205205
>
206206
<ListItemIcon className={classes.iconSocialMedia}>
207-
<FontAwesomeIcon icon={['fab', 'facebook']} size="2x" />
207+
<FontAwesomeIcon icon={['fab', 'facebook-square']} size="2x" />
208208
</ListItemIcon>
209209
</ListItem>
210210
<ListItem

‎src/views/pages/StudentDashboardView/EditProfile/Form.js

Lines changed: 313 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,313 @@
1+
import {
2+
Button,
3+
CircularProgress,
4+
Container,
5+
Divider,
6+
makeStyles,
7+
Paper,
8+
Typography
9+
} from '@material-ui/core';
10+
import axios from 'axios';
11+
import React, { useReducer, useState } from 'react';
12+
import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
13+
import ButtonComponent from 'src/components/Button/ButtonComponent';
14+
15+
const useStyles = makeStyles(theme => ({
16+
root: {
17+
width: '80%',
18+
margin: '0px auto 100px',
19+
[theme.breakpoints.down('sm')]: {
20+
width: '100%'
21+
}
22+
},
23+
mainHeading: {
24+
fontWeight: 700,
25+
color: '#000'
26+
},
27+
container: {
28+
padding: '10% 12%'
29+
},
30+
subhead: {
31+
padding: '40px 0 10px'
32+
},
33+
textField: {
34+
marginBottom: '16px',
35+
background: '#DEDEDE'
36+
},
37+
btn: {
38+
padding: '13px'
39+
},
40+
41+
unactbtn: {
42+
margin: '5px 5px 5px 0px',
43+
padding: '10px',
44+
background: '#DEDEDE',
45+
'&:hover': {
46+
background: '#dedede',
47+
color: 'black'
48+
}
49+
},
50+
actbtn: {
51+
margin: '5px 5px 5px 0px',
52+
padding: '10px',
53+
background: 'black',
54+
color: 'white',
55+
'&:hover': {
56+
background: 'black',
57+
color: 'white'
58+
}
59+
},
60+
submissions: {
61+
padding: '10px 0',
62+
width: '80px',
63+
height: '50px'
64+
},
65+
extraPadding: {
66+
padding: '20px 0px'
67+
},
68+
rightPadding: {
69+
[theme.breakpoints.up('md')]: {
70+
paddingRight: '10px'
71+
}
72+
},
73+
leftPadding: {
74+
[theme.breakpoints.up('md')]: {
75+
paddingLeft: '10px'
76+
}
77+
}
78+
}));
79+
80+
function Form({ ...rest }) {
81+
const classes = useStyles();
82+
83+
const [formData, updateFormData] = useState({});
84+
const [submitting, setSubmitting] = useState(0);
85+
86+
const handleChange = event => {
87+
updateFormData({
88+
...formData,
89+
[event.target.name]: event.target.value
90+
});
91+
};
92+
93+
const handleSubmit = e => {
94+
setSubmitting(1);
95+
console.log('d : ' + formData.date);
96+
e.preventDefault();
97+
axios({
98+
method: 'post',
99+
url:
100+
'https://us-central1-codeforcauseorg.cloudfunctions.net/widgets/profile', // cloud function url to be generated
101+
data: formData
102+
})
103+
.then(response => {
104+
setSubmitting(0);
105+
// handleClose();
106+
// enqueueSnackbar('Application Submitted Successfully');
107+
})
108+
.catch(error => {
109+
// enqueueSnackbar('Application Failed. Try again later');
110+
});
111+
};
112+
113+
const skillsArray = [
114+
{
115+
skill: 'c/c++',
116+
activated: true
117+
},
118+
{
119+
skill: 'Machine Learning',
120+
activated: false
121+
},
122+
{
123+
skill: 'Web Development',
124+
activated: false
125+
},
126+
{
127+
skill: 'Augmented Reality',
128+
activated: false
129+
},
130+
131+
{
132+
skill: 'Game Development',
133+
activated: false
134+
}
135+
];
136+
// to force update the state of the app
137+
const [, forceUpdate] = useReducer(x => x + 1, 0);
138+
139+
const [skills, updateSkills] = useState(skillsArray);
140+
const handleSkillClick = eskill => {
141+
for (var i = 0; i < skills.length; i++) {
142+
if (skills[i].skill === eskill) {
143+
skills[i].activated = !skills[i].activated;
144+
}
145+
}
146+
console.log(skills);
147+
updateSkills(skills);
148+
forceUpdate();
149+
};
150+
151+
return (
152+
<Paper elevation={0} className={classes.root} {...rest}>
153+
<Container className={classes.container}>
154+
<Typography align="center" className={classes.mainHeading} variant="h1">
155+
Set Up Your Profile
156+
</Typography>
157+
<Typography
158+
className={classes.extraPadding}
159+
style={{ fontWeight: 600 }}
160+
variant="subtitle2"
161+
>
162+
We will be able to recommend and will be able to notify you about our
163+
events of your interest and near you.
164+
</Typography>
165+
<Typography className={classes.subhead} variant="h6" color="primary">
166+
Personal Information
167+
</Typography>
168+
<ValidatorForm onSubmit={handleSubmit}>
169+
<Typography variant="caption">Name</Typography>
170+
<TextValidator
171+
key="name"
172+
className={classes.textField}
173+
variant="outlined"
174+
value={formData.name}
175+
fullWidth
176+
name="name"
177+
onChange={handleChange}
178+
validators={['required']}
179+
errorMessages={['This is a required field']}
180+
/>
181+
182+
<Typography variant="caption">Contact Number</Typography>
183+
<TextValidator
184+
key="contact"
185+
className={classes.textField}
186+
variant="outlined"
187+
value={formData.phone}
188+
fullWidth
189+
name="phone"
190+
onChange={handleChange}
191+
validators={[
192+
'required',
193+
'matchRegexp:^[+]*[(]*[+]{0,1}[0-9]{1,3}[)]{0,1}[-s./0-9]*$'
194+
]}
195+
errorMessages={[
196+
'This is a required field',
197+
'Please enter a valid contact number'
198+
]}
199+
/>
200+
<Divider
201+
variant="fullWidth"
202+
style={{ margin: '40px 0px 0px', padding: '0.5px' }}
203+
/>
204+
205+
<Typography className={classes.subhead} variant="h6" color="primary">
206+
Residential Information
207+
</Typography>
208+
209+
<Typography variant="caption">College</Typography>
210+
<TextValidator
211+
key="college"
212+
className={classes.textField}
213+
variant="outlined"
214+
value={formData.college}
215+
fullWidth
216+
name="college"
217+
onChange={handleChange}
218+
validators={['required']}
219+
errorMessages={['This is a required field']}
220+
/>
221+
<Typography variant="caption">District</Typography>
222+
<TextValidator
223+
key="district"
224+
className={classes.textField}
225+
variant="outlined"
226+
value={formData.district}
227+
fullWidth
228+
name="district"
229+
onChange={handleChange}
230+
validators={['required']}
231+
errorMessages={['This is a required field']}
232+
/>
233+
<Typography variant="caption">State</Typography>
234+
<TextValidator
235+
key="state"
236+
className={classes.textField}
237+
variant="outlined"
238+
value={formData.state}
239+
fullWidth
240+
name="state"
241+
onChange={handleChange}
242+
validators={['required']}
243+
errorMessages={['This is a required field']}
244+
/>
245+
246+
<Divider
247+
variant="fullWidth"
248+
style={{ margin: '40px 0px 0px', padding: '0.5px' }}
249+
/>
250+
251+
<Typography className={classes.subhead} variant="h6" color="primary">
252+
Your Interests
253+
</Typography>
254+
<Typography variant="caption">Select Your Interests</Typography>
255+
<div>
256+
{/* <Button className={classes.btn} focusRipple={false} color >hdfialu</Button> */}
257+
{skills.map(({ skill, activated }) => {
258+
if (activated)
259+
return (
260+
<Button
261+
className={classes.actbtn}
262+
focusRipple={false}
263+
disableRipple={true}
264+
onClick={() => {
265+
handleSkillClick(skill);
266+
}}
267+
>
268+
{skill}
269+
</Button>
270+
);
271+
else
272+
return (
273+
<Button
274+
className={classes.unactbtn}
275+
focusRipple={false}
276+
disableRipple={true}
277+
onClick={() => {
278+
handleSkillClick(skill);
279+
}}
280+
>
281+
{skill}
282+
</Button>
283+
);
284+
})}
285+
</div>
286+
<div style={{ padding: '30px 0 15px' }}>
287+
<Typography style={{ margin: 0 }} variant="caption" color="initial">
288+
By continuing, you agree to the Code For Cause Terms of Use and
289+
Privacy Policy
290+
</Typography>
291+
</div>
292+
293+
{submitting === 0 ? (
294+
<ButtonComponent
295+
className={classes.btn}
296+
title="Submit Request"
297+
fullWidth
298+
type="submit"
299+
variant="contained"
300+
color="secondary"
301+
/>
302+
) : (
303+
<div className={classes.submissions}>
304+
<CircularProgress />
305+
</div>
306+
)}
307+
</ValidatorForm>
308+
</Container>
309+
</Paper>
310+
);
311+
}
312+
313+
export default Form;

‎src/views/pages/StudentDashboardView/EditProfile/index.js

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Grid, makeStyles, Typography } from '@material-ui/core';
2+
import React from 'react';
3+
import Form from './Form';
4+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5+
import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
6+
import { Link } from 'react-router-dom';
7+
8+
const useStyles = makeStyles(theme => ({
9+
rot: {},
10+
back: {
11+
padding: '6% 0px 5% 3%',
12+
[theme.breakpoints.up('sm')]: {
13+
padding: '6% 0px 0px 3%'
14+
}
15+
}
16+
}));
17+
18+
export default function EditProfile() {
19+
const classes = useStyles();
20+
return (
21+
<Grid container xs={12}>
22+
<Grid item className={classes.back} xs={12} sm={2} md={2}>
23+
<Link to="/student" style={{ textDecoration: 'none' }}>
24+
<FontAwesomeIcon icon={faChevronLeft} color="#CC2700" />
25+
<Typography display="inline" variant="h6" color="secondary">
26+
{' '} Back To Profile
27+
</Typography>
28+
</Link>
29+
</Grid>
30+
<Grid item xs={12} sm={8} md={8}>
31+
<Form />
32+
</Grid>
33+
<Grid xs={12} sm={2} md={2} className={classes.back} />
34+
</Grid>
35+
);
36+
}

0 commit comments

Comments
 (0)