Course details #41
Course details #41
Conversation
…U-client into course_details
| </header> | ||
| {userCourse && | ||
| <div> | ||
| <Link className={styles.button} to={`${courseId}/assignments`}><Button>Gradebook</Button></Link> |
There was a problem hiding this comment.
I'm not entirely sure this is the correct link, but I was having issues finding a grade book page
|
Run |
| <ListItemWrapper | ||
| to={`/courses/${courseId}/assignments/${assignment.id}`} | ||
| tag={`${courseId}-${assignment.id}`}> | ||
| <h3 className={styles.name}>{assignment.name}</h3> |
There was a problem hiding this comment.
Under normal circumstances I don't think you'd want to use a header in a list item, even if the sizing is correct. It make screen readers go wonky when you're misusing "headers"
| to={`/courses/${courseId}/assignments/${assignment.id}`} | ||
| tag={`${courseId}-${assignment.id}`}> | ||
| <h3 className={styles.name}>{assignment.name}</h3> | ||
| <p className={styles.dueDate}>Due At: {prettyPrintDate(assignment.dueDate)}</p> |
There was a problem hiding this comment.
Might we want to include an assignments description here? Maybe make it ellipse out after 1 line? At that point it might not even be useful
Maybe 3 or so lines?
|
|
||
| // Find the users relationship to the course by calling all user-course objects, and seeing if any have the user/course id. | ||
| const userCourses = await RequestService.get<UserCourse[]>(`/api/user-courses`); | ||
| const uCourse = userCourses.filter(u => u.courseId === parseInt(courseId) && u.userId === userId).shift() |
There was a problem hiding this comment.
Firstly, you don't actually need the
u.userId === userId part since this endpoint only returns the current user's user-courses.
Secondly, I think this would be a good opportunity to add a query parameter to just look up the one we want rather than grabbing the whole list and shrunking it down
/api/user-courses?courseId=123
| <header> | ||
| <h1>{course.name}</h1> | ||
| <div className={styles.subtitle}> | ||
| <h3>{course.number} | {course.semester} ({prettyPrintDate(course.startDate)}-{prettyPrintDate(course.endDate)})</h3> |
There was a problem hiding this comment.
This is a proper use of a header.
And with this you might be able to see why having a bunch of these would make using a screen reader a bit harder to use
Proposed changes
Describe the big picture of your changes here to communicate to the maintainers why we should accept this pull request. If it fixes a bug or resolves a feature request, be sure to link to that issue.
Types of changes
What types of changes does your code introduce?
Put an
xin the boxes that applyChecklist
Put an
xin the boxes that apply. You can also fill these out after creating the PR. If you're unsure about any of them, don't hesitate to ask. This is simply a reminder of what we are going to look for before merging your code.Further comments
I'm not entirely sure if I implemented the filter described in the issue correctly (I made it a "group by" dropdown, with the elements being the category described).
If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did and what alternatives you considered, etc...
This page shows the general info of the course, alongside some buttons which direct to specific actions a user can take (view the roster/gradebook if a user-course object exists for the user, and edit course if the user is an instructor). The page also shows all of the assignments associated with the course.