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

Commit 3144714

Browse files
KeenWarriorKeenWarrior
committed
CL form and sumission
1 parent d4ad2c5 commit 3144714

File tree

1 file changed

+179
-60
lines changed

1 file changed

+179
-60
lines changed

‎src/views/pages/CLView/ApplyNowModal.js‎

Lines changed: 179 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,192 @@
1-
import React from 'react';
2-
import { Button, makeStyles } from '@material-ui/core';
3-
import TextField from '@material-ui/core/TextField';
4-
import Dialog from '@material-ui/core/Dialog';
5-
import DialogActions from '@material-ui/core/DialogActions';
6-
import DialogContent from '@material-ui/core/DialogContent';
7-
import DialogContentText from '@material-ui/core/DialogContentText';
8-
import DialogTitle from '@material-ui/core/DialogTitle';
1+
import React, { useState } from 'react';
2+
import {
3+
TextField,
4+
Dialog,
5+
DialogActions,
6+
DialogContent,
7+
DialogContentText,
8+
DialogTitle,
9+
Button,
10+
Typography
11+
} from '@material-ui/core';
12+
import { makeStyles } from '@material-ui/core/styles';
13+
import CircularProgress from '@material-ui/core/CircularProgress';
914

10-
const useStyles = makeStyles(theme => ({
15+
import axios from 'axios';
1116

12-
btn: {
13-
backgroundColor: '#A60000',
14-
color: '#ffffff',
15-
textTransform: 'capitalize',
16-
[theme.breakpoints.down('sm')]: {
17-
width: '100%'
18-
},
19-
'&:hover': {
20-
backgroundColor: 'rgba(166, 0, 0, 0.8)'
21-
}
17+
const useStyles = makeStyles(theme => ({
18+
btn: {
19+
backgroundColor: '#A60000',
20+
color: '#ffffff',
21+
textTransform: 'capitalize',
22+
[theme.breakpoints.down('sm')]: {
23+
width: '100%'
2224
},
23-
25+
'&:hover': {
26+
backgroundColor: 'rgba(166, 0, 0, 0.8)'
27+
}
28+
},
29+
textField: {
30+
marginBottom: '16px'
31+
},
32+
submissions: {
33+
width: "80px",
34+
height: "50px"
35+
}
2436
}));
2537

2638
export default function ApplyNowModal() {
27-
const classes = useStyles();
28-
const [open, setOpen] = React.useState(false);
39+
const classes = useStyles();
40+
const [open, setOpen] = useState(false);
41+
const [formData, updateFormData] = useState({});
42+
const [submitting, setSubmitting] = useState(0);
43+
44+
const handleClickOpen = () => {
45+
setOpen(true);
46+
};
2947

30-
const handleClickOpen = () => {
31-
setOpen(true);
32-
};
48+
const handleClose = () => {
49+
setOpen(false);
50+
};
3351

34-
const handleClose = () => {
35-
setOpen(false);
36-
};
52+
const handleChange = event => {
53+
updateFormData({
54+
...formData,
55+
[event.target.name]: event.target.value
56+
});
57+
};
3758

38-
return (
39-
<div>
40-
<Button className={classes.btn}
41-
size="large"
42-
variant="contained"
43-
onClick={handleClickOpen}>
44-
Apply now
59+
60+
const handleSubmit = e => {
61+
setSubmitting(1);
62+
e.preventDefault();
63+
axios({
64+
method: 'post',
65+
url:
66+
'https://us-central1-codeforcauseorg.cloudfunctions.net/widgets/leads',
67+
data: formData
68+
})
69+
.then(response => {
70+
setSubmitting(0);
71+
handleClose();
72+
})
73+
.catch(error => {});
74+
};
75+
76+
return (
77+
<div>
78+
<Button
79+
className={classes.btn}
80+
size="large"
81+
variant="contained"
82+
onClick={handleClickOpen}
83+
>
84+
Apply now
4585
</Button>
46-
<Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
47-
<DialogTitle id="form-dialog-title">Subscribe</DialogTitle>
48-
<DialogContent>
49-
<DialogContentText>
50-
To subscribe to this website, please enter your email address here. We will send updates
51-
occasionally.
86+
<Dialog
87+
open={open}
88+
onClose={handleClose}
89+
aria-labelledby="form-dialog-title"
90+
>
91+
<DialogTitle id="form-dialog-title">
92+
Apply for Campus Leaders Program
93+
</DialogTitle>
94+
<DialogContent>
95+
<DialogContentText>
96+
<Typography>Please provide your details below.</Typography>
5297
</DialogContentText>
53-
<TextField
54-
autoFocus
55-
margin="dense"
56-
id="name"
57-
label="Email Address"
58-
type="email"
59-
fullWidth
60-
/>
61-
</DialogContent>
62-
<DialogActions>
63-
<Button onClick={handleClose} color="primary">
64-
Cancel
65-
</Button>
66-
<Button onClick={handleClose} color="primary">
67-
Subscribe
98+
<form noValidate autoComplete="off">
99+
<TextField
100+
key="name"
101+
className={classes.textField}
102+
label="Full Name"
103+
variant="outlined"
104+
value={formData.name}
105+
fullWidth
106+
name="name"
107+
onChange={handleChange}
108+
/>
109+
110+
<TextField
111+
key="email"
112+
className={classes.textField}
113+
label="Email"
114+
variant="outlined"
115+
value={formData.email}
116+
fullWidth
117+
name="email"
118+
onChange={handleChange}
119+
/>
120+
121+
<TextField
122+
key="contact"
123+
className={classes.textField}
124+
label="WhatsApp / Contact Number "
125+
variant="outlined"
126+
value={formData.phone}
127+
fullWidth
128+
name="phone"
129+
onChange={handleChange}
130+
/>
131+
132+
<TextField
133+
key="linkedIn"
134+
className={classes.textField}
135+
label="LinkedIn URL"
136+
variant="outlined"
137+
value={formData.linkedIn}
138+
fullWidth
139+
name="linkedIn"
140+
onChange={handleChange}
141+
/>
142+
143+
<TextField
144+
key="course"
145+
className={classes.textField}
146+
label="Course & Branch"
147+
variant="outlined"
148+
value={formData.course}
149+
fullWidth
150+
name="course"
151+
onChange={handleChange}
152+
/>
153+
154+
<TextField
155+
key="year"
156+
className={classes.textField}
157+
label="year"
158+
variant="outlined"
159+
value={formData.year}
160+
fullWidth
161+
name="year"
162+
onChange={handleChange}
163+
/>
164+
165+
<TextField
166+
key="college"
167+
className={classes.textField}
168+
label="College Name"
169+
variant="outlined"
170+
value={formData.college}
171+
fullWidth
172+
name="college"
173+
onChange={handleChange}
174+
/>
175+
</form>
176+
</DialogContent>
177+
<DialogActions>
178+
<Button className={classes.submissions} onClick={handleClose} color="primary">
179+
Cancel
68180
</Button>
69-
</DialogActions>
70-
</Dialog>
71-
</div>
72-
);
181+
{submitting === 0 ? (
182+
<Button className={classes.submissions} onClick={handleSubmit} color="primary">
183+
Apply
184+
</Button>
185+
) : (
186+
<div className={classes.submissions}><CircularProgress /></div>
187+
)}
188+
</DialogActions>
189+
</Dialog>
190+
</div>
191+
);
73192
}

0 commit comments

Comments
 (0)