Show scheduling issues again (#850)

* update the course element when conflicts change

closes #820

* tighten up a style in course-list

* fix centering of the icon in the course warnings

* replace a mutable defaultProp with a es6 default destructuring

* the other half of the missing course warnings

part of #820, as well

* rename a variable to avoid shadowing

src/components/inline-course.js

@@ -29,9 +29,6 @@ class InlineCourse extends Component {
 		studentId: PropTypes.string,
 	};
 
-	static defaultProps = {
-		conflicts: [],
-	};
 	props: {
 		className?: string,
 		conflicts?: Object[],
@@ -50,6 +47,7 @@ class InlineCourse extends Component {
 	shouldComponentUpdate(nextProps, nextState) {
 		return (
 			this.props.course !== nextProps.course ||
+			this.props.conflicts !== nextProps.conflicts ||
 			this.state.isOpen !== nextState.isOpen ||
 			this.props.isDragging !== nextProps.isDragging
 		)
@@ -64,13 +62,13 @@ class InlineCourse extends Component {
 	};
 
 	render() {
-		const { course, conflicts, index, scheduleId, studentId } = this.props
+		const { course, conflicts=[], index, scheduleId, studentId } = this.props
 		const warnings = conflicts[index || 0]
 		const hasWarnings = compact(warnings).length
 
 		const validWarnings = filter(warnings, w => !isNull(w) && w.warning === true)
-		const warningEls = map(validWarnings, (w, index) =>
-			<li key={index}><Icon>{w.icon}</Icon> {w.msg}</li>)
+		const warningEls = map(validWarnings, (w, idx) =>
+			<li key={idx}><Icon>{w.icon}</Icon> {w.msg}</li>)
 
 		let classSet = cx(this.props.className, 'course', {
 			'expanded': this.state.isOpen,

src/components/inline-course.scss

@@ -54,12 +54,17 @@
 	padding-bottom: 2px;
 
 	.list-item {
+		display: flex;
+		flex-flow: row wrap;
+		align-items: center;
+
 		padding: 0.125em 0.35em;
 		border-radius: 0.25em;
-		background-color: $amber-500;
-	}
-	.list-item::before {
-		margin-right: 0.35em;
+		background-color: $amber-200;
+
+		.icon {
+			margin-right: 0.35em;
+		}
 	}
 }
 

src/routes/student_content_course-table/components/course-list.scss

@@ -14,7 +14,7 @@
 		outline: 0;
 	}
 
-	.list-item:last-child {
+	& > .list-item:last-child {
 		border-bottom: 0;
 	}
 }

src/routes/student_content_course-table/components/semester.js

@@ -21,7 +21,7 @@ function Semester(props) {
 	let courseList = null
 
 	const { studentId, semester, year, canDrop, schedule } = props
-	const { courses, validation } = schedule
+	const { courses, conflicts, hasConflict } = schedule
 
 	// `recommendedCredits` is 4 for fall/spring and 1 for everything else
 	const recommendedCredits = (semester === 1 || semester === 3) ? 4 : 1
@@ -42,12 +42,12 @@ function Semester(props) {
 			availableCredits={recommendedCredits}
 			studentId={studentId}
 			schedule={schedule}
-			conflicts={validation ? validation.conflicts : []}
+			conflicts={conflicts || []}
 		/>
 	}
 
 	const className = cx('semester', {
-		invalid: validation ? validation.hasConflict : false,
+		invalid: hasConflict,
 		'can-drop': canDrop,
 	})