Skip to content

Commit f70d279

Browse files
Shaurya MagoShaurya Mago
Shaurya Mago
authored and
Shaurya Mago
committed
style
1 parent 7b1de20 commit f70d279

File tree

1 file changed

+109
-99
lines changed

1 file changed

+109
-99
lines changed

‎src/Components/CreateCourseDialog/CreateCourseDialog.tsx‎

Lines changed: 109 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import {
88
} from '@material-ui/core';
99
import { useState } from 'react';
1010
import styled from 'styled-components';
11-
import { Formik } from 'formik';
11+
import { Formik, Form } from 'formik';
1212
import { useMutation } from '@apollo/client';
1313
import { withAuthenticator } from '@aws-amplify/ui-react';
1414
import { SAVE_COURSE } from '../../queries/course-queries';
@@ -25,9 +25,11 @@ const SmallTextField = styled(TextField)`
2525
font-size: 20px;
2626
}
2727
`;
28-
function refreshPage() {
29-
window.location.reload(false);
30-
}
28+
29+
const Container = styled.div`
30+
text-align: center;
31+
fontfamily: 'Poppins', sans-serif;
32+
`;
3133

3234
function CreateCourseDialog() {
3335
const [open, setOpen] = useState(false);
@@ -42,103 +44,111 @@ function CreateCourseDialog() {
4244
};
4345

4446
return (
45-
<div>
46-
<Button
47-
variant="contained"
48-
color="primary"
49-
onClick={handleClickOpen}
50-
data-testid="create-btn"
51-
>
52-
Create New Course
53-
</Button>
54-
<Dialog
55-
open={open}
56-
fullWidth
57-
onClose={handleClose}
58-
aria-labelledby="form-dialog-title"
59-
maxWidth="sm"
60-
data-testid="create-dialog"
61-
>
62-
<DialogTitle id="form-dialog-title">New Course</DialogTitle>
63-
<DialogContent>
64-
<Formik
65-
initialValues={{
66-
courseTitle: '',
67-
courseDescription: '',
68-
courseInstructor: '',
69-
}}
70-
onSubmit={(values, { setSubmitting }) => {
71-
setTimeout(() => {
72-
setSubmitting(false);
73-
handleClose();
74-
addCourse({
75-
variables: {
76-
course: {
77-
course: values.courseTitle,
78-
description: values.courseDescription,
79-
instructor: values.courseInstructor,
80-
// missions: [],
81-
},
82-
},
83-
}).catch((error) => console.log(error));
84-
}, 400);
85-
}}
47+
<Container>
48+
<div>
49+
<Button
50+
style={{
51+
width: 200,
52+
marginTop: 20,
53+
backgroundColor: '#4274F3',
54+
color: 'white',
55+
}}
56+
onClick={handleClickOpen}
57+
data-testid="create-btn"
58+
>
59+
Create New Course
60+
</Button>
61+
<Dialog
62+
open={open}
63+
fullWidth
64+
onClose={handleClose}
65+
aria-labelledby="form-dialog-title"
66+
maxWidth="sm"
67+
data-testid="create-dialog"
68+
>
69+
<DialogTitle
70+
style={{ backgroundColor: '#4274F3', color: 'white' }}
71+
id="form-dialog-title"
8672
>
87-
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
88-
<form onSubmit={handleSubmit}>
89-
<SmallTextField
90-
id="courseTitle"
91-
label="Course Title"
92-
type="text"
93-
fullWidth
94-
variant="outlined"
95-
margin="dense"
96-
value={values.courseTitle}
97-
onChange={handleChange}
98-
onBlur={handleBlur}
99-
/>
73+
New Course
74+
</DialogTitle>
75+
<DialogContent>
76+
<Formik
77+
initialValues={{
78+
courseTitle: '',
79+
courseDescription: '',
80+
courseInstructor: 'Mr. Butcher', // stay hardcoded since dashboard uses this
81+
}}
82+
onSubmit={(values, { setSubmitting }) => {
83+
setTimeout(() => {
84+
setSubmitting(false);
85+
handleClose();
86+
addCourse({
87+
variables: {
88+
course: {
89+
course: values.courseTitle,
90+
description: values.courseDescription,
91+
instructor: values.courseInstructor,
92+
},
93+
},
94+
}).catch((error) => console.log(error));
95+
}, 400);
96+
}}
97+
>
98+
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
99+
<Form onSubmit={handleSubmit}>
100+
<LargeTextField
101+
required
102+
id="courseTitle"
103+
label="Course Title"
104+
type="text"
105+
fullWidth
106+
variant="outlined"
107+
margin="dense"
108+
value={values.courseTitle}
109+
onChange={handleChange}
110+
onBlur={handleBlur}
111+
/>
100112

101-
<LargeTextField
102-
id="courseDescription"
103-
label="Description"
104-
type="text"
105-
fullWidth
106-
variant="outlined"
107-
margin="dense"
108-
value={values.courseDescription}
109-
onChange={handleChange}
110-
onBlur={handleBlur}
111-
/>
112-
<SmallTextField
113-
id="instructor"
114-
label="Instructor"
115-
type="text"
116-
fullWidth
117-
variant="outlined"
118-
margin="dense"
119-
value={values.courseInstructor}
120-
onChange={handleChange}
121-
onBlur={handleBlur}
122-
/>
123-
<DialogActions>
124-
<Button onClick={handleClose} color="primary">
125-
Cancel
126-
</Button>
127-
<Button
128-
type="submit"
129-
onClick={refreshPage}
130-
disabled={isSubmitting}
131-
color="primary"
132-
>
133-
Create
134-
</Button>
135-
</DialogActions>
136-
</form>
137-
)}
138-
</Formik>
139-
</DialogContent>
140-
</Dialog>
141-
</div>
113+
<LargeTextField
114+
required
115+
id="courseDescription"
116+
label="Description"
117+
type="text"
118+
fullWidth
119+
variant="outlined"
120+
margin="dense"
121+
value={values.courseDescription}
122+
onChange={handleChange}
123+
onBlur={handleBlur}
124+
/>
125+
<SmallTextField
126+
required
127+
id="courseInstructor"
128+
label="Instructor"
129+
type="text"
130+
fullWidth
131+
variant="outlined"
132+
margin="dense"
133+
value={values.courseInstructor}
134+
onChange={handleChange}
135+
onBlur={handleBlur}
136+
/>
137+
<DialogActions>
138+
<Button onClick={handleClose} color="primary">
139+
Cancel
140+
</Button>
141+
<Button type="submit" disabled={isSubmitting} color="primary">
142+
Create
143+
</Button>
144+
</DialogActions>
145+
</Form>
146+
)}
147+
</Formik>
148+
</DialogContent>
149+
</Dialog>
150+
</div>
151+
</Container>
142152
);
143153
}
144154

0 commit comments

Comments
 (0)