Skip to content

Commit 2ed2044

Browse files
rmfay1rmfay1
authored
Merge pull request #35 from CPSECapstone/feat-createcourse
Feat create course
2 parents 4e2ddc2 + f70d279 commit 2ed2044

File tree

3 files changed

+119
-86
lines changed

3 files changed

+119
-86
lines changed

‎src/Components/CreateCourseDialog/CreateCourseDialog.tsx‎

Lines changed: 115 additions & 81 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';
@@ -19,6 +19,17 @@ const LargeTextField = styled(TextField)`
1919
font-size: 20px;
2020
}
2121
`;
22+
const SmallTextField = styled(TextField)`
23+
input {
24+
height: 30px;
25+
font-size: 20px;
26+
}
27+
`;
28+
29+
const Container = styled.div`
30+
text-align: center;
31+
fontfamily: 'Poppins', sans-serif;
32+
`;
2233

2334
function CreateCourseDialog() {
2435
const [open, setOpen] = useState(false);
@@ -33,88 +44,111 @@ function CreateCourseDialog() {
3344
};
3445

3546
return (
36-
<div>
37-
<Button
38-
variant="contained"
39-
color="primary"
40-
onClick={handleClickOpen}
41-
data-testid="create-btn"
42-
>
43-
Create New Course
44-
</Button>
45-
<Dialog
46-
open={open}
47-
fullWidth
48-
onClose={handleClose}
49-
aria-labelledby="form-dialog-title"
50-
maxWidth="sm"
51-
data-testid="create-dialog"
52-
>
53-
<DialogTitle id="form-dialog-title">New Course</DialogTitle>
54-
<DialogContent>
55-
<Formik
56-
initialValues={{
57-
courseTitle: '',
58-
courseDescription: '',
59-
instructor: 'currentUser',
60-
}}
61-
onSubmit={(values, { setSubmitting }) => {
62-
setTimeout(() => {
63-
setSubmitting(false);
64-
handleClose();
65-
addCourse({
66-
variables: {
67-
course: {
68-
name: values.courseTitle,
69-
description: values.courseDescription,
70-
instructor: 'Mr. Butcher',
71-
missions: [],
72-
},
73-
},
74-
}).catch((error) => console.log(error));
75-
}, 400);
76-
}}
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"
7772
>
78-
{({ values, handleChange, handleBlur, handleSubmit, isSubmitting }) => (
79-
<form onSubmit={handleSubmit}>
80-
<LargeTextField
81-
id="courseTitle"
82-
label="Course Title"
83-
type="text"
84-
fullWidth
85-
variant="outlined"
86-
margin="dense"
87-
value={values.courseTitle}
88-
onChange={handleChange}
89-
onBlur={handleBlur}
90-
/>
91-
92-
<LargeTextField
93-
id="courseDescription"
94-
label="Description"
95-
type="text"
96-
fullWidth
97-
variant="outlined"
98-
margin="dense"
99-
value={values.courseDescription}
100-
onChange={handleChange}
101-
onBlur={handleBlur}
102-
/>
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+
/>
103112

104-
<DialogActions>
105-
<Button onClick={handleClose} color="primary">
106-
Cancel
107-
</Button>
108-
<Button type="submit" disabled={isSubmitting} color="primary">
109-
Create
110-
</Button>
111-
</DialogActions>
112-
</form>
113-
)}
114-
</Formik>
115-
</DialogContent>
116-
</Dialog>
117-
</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>
118152
);
119153
}
120154

‎src/Components/Dashboard/Dashboard.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { CourseInfoFieldsFragment, useGetCoursesQuery } from '../../__generated__/types';
22
import CourseCard from './CourseCard';
3+
import CreateCourseDialog from '../CreateCourseDialog/CreateCourseDialog';
34
import './DashBoard.css';
45

56
function Dashboard() {
@@ -17,7 +18,8 @@ function Dashboard() {
1718
const { courseInfos } = data;
1819

1920
return (
20-
<div className="dashboard-container">
21+
<div>
22+
<CreateCourseDialog />
2123
{courseInfos.map((courseInfo: CourseInfoFieldsFragment) => (
2224
<CourseCard key={courseInfo.courseId} courseInfo={courseInfo} />
2325
))}

‎src/queries/course-queries.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,6 @@ import { gql } from '@apollo/client';
22

33
export const SAVE_COURSE = gql`
44
mutation AddCourse($course: CourseInput!) {
5-
addCourse(course: $course) {
6-
id
7-
name
8-
}
5+
addCourse(course: $course)
96
}
107
`;

0 commit comments

Comments
 (0)