Add course description to class page

webclient/src/Classes.js

@@ -28,7 +28,7 @@ function ClassTable(props) {
 				{classes.length ?
 					classes.map(x =>
 						<Table.Row key={x.id}>
-							<Table.Cell>{x.course_name}</Table.Cell>
+							<Table.Cell>{x.course_data.name}</Table.Cell>
 							<Table.Cell>
 								<Link to={'/classes/'+x.id}>
 									{moment.utc(x.datetime).tz('America/Edmonton').format('ll')}
@@ -170,7 +170,7 @@ export function ClassDetail(props) {
 									<Table.Cell>Name:</Table.Cell>
 									<Table.Cell>
 										<Link to={'/courses/'+clazz.course}>
-											{clazz.course_name}
+											{clazz.course_data.name}
 										</Link>
 									</Table.Cell>
 								</Table.Row>
@@ -201,6 +201,15 @@ export function ClassDetail(props) {
 							</Table.Body>
 						</BasicTable>
 
+						<Header size='medium'>Course Description</Header>
+						{clazz.course_data.is_old ?
+							clazz.course_data.description.split('\n').map((x, i) =>
+								<p key={i}>{x}</p>
+							)
+						:
+							<div dangerouslySetInnerHTML={{__html: clazz.course_data.description}} />
+						}
+
 						<Header size='medium'>Attendance</Header>
 
 						{(isAdmin(user) || clazz.instructor === user.id) &&
@@ -230,7 +239,7 @@ export function ClassDetail(props) {
 											<p>Please pay the course fee of ${clazz.cost} to confirm your attendance.</p>
 											<PayPalPayNow
 												amount={clazz.cost}
-												name={clazz.course_name}
+												name={clazz.course_data.name}
 												custom={JSON.stringify({ training: userTraining.id })}
 											/>
 										</div>

webclient/src/InstructorClasses.js

@@ -16,7 +16,7 @@ class AttendanceSheet extends React.Component {
 
 		return (
 			<div style={{ padding: '3rem' }}>
-				<Header size='medium'>{clazz.course_name} Attendance</Header>
+				<Header size='medium'>{clazz.course_data.name} Attendance</Header>
 				<p>
 					{moment.utc(clazz.datetime).tz('America/Edmonton').format('llll')}
 					{num >= 2 ? ', '+num+' students sorted by registration time.' : '.'}
@@ -406,7 +406,7 @@ export function InstructorClassList(props) {
 								{sameClasses.length ?
 									sameClasses.map(x =>
 										<p>
-											{moment.utc(x.datetime).tz('America/Edmonton').format('LT')} — {x.course_name}
+											{moment.utc(x.datetime).tz('America/Edmonton').format('LT')} — {x.course_data.name}
 										</p>
 									)
 								:

webclient/src/InstructorCourses.js

@@ -173,7 +173,10 @@ export function InstructorCourseList(props) {
 		<div>
 			<Header size='medium'>Instructor Panel</Header>
 
-			{!open && success && <p>Added to bottom of course list! <Link to={'/courses/'+success}>View the course.</Link></p>}
+			{!open && success && <>
+				<p>Added to bottom of course list!</p>
+				<p><Link to={'/courses/'+success}>View the course.</Link></p>
+			</>}
 
 			{open ?
 				<Form onSubmit={handleSubmit}>

webclient/src/Training.js

@@ -94,7 +94,7 @@ export function TrainingList(props) {
 			<Table.Body>
 				{training.slice().sort((a, b) => a.session.datetime < b.session.datetime ? 1 : -1).map(x =>
 					<Table.Row key={x.id}>
-						<Table.Cell>{x.session.course_name}</Table.Cell>
+						<Table.Cell>{x.session.course_data.name}</Table.Cell>
 						<Table.Cell>
 							<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
 						</Table.Cell>