Add latest training to Home page, make dates readable

webclient/src/Training.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
 import './light.css';
 import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Popup, Segment, Table } from 'semantic-ui-react';
-import moment from 'moment';
+import moment from 'moment-timezone';
 import { requester, getInstructor } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 
@@ -96,7 +96,7 @@ export function TrainingList(props) {
 					<Table.Row key={x.id}>
 						<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>
+							<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).tz('America/Edmonton').format('ll')}</Link>
 						</Table.Cell>
 						<Table.Cell>{x.attendance_status}</Table.Cell>
 						<Table.Cell>{getInstructor(x.session)}</Table.Cell>
@@ -113,12 +113,6 @@ export function Training(props) {
 
 	return (
 		<Container>
-			<Header size='large'>Your Certifications</Header>
-
-			<CertList member={user.member} />
-
-			<p>Certifications are based on the courses you've taken. If there's any errors, please email <a href='mailto:directors@protospace.ca'>directors@protospace.ca</a>.</p>
-
 			<Header size='large'>Your Training</Header>
 
 			{user.training.length ?
@@ -127,6 +121,11 @@ export function Training(props) {
 				<p>No training yet! Sign up for a course to take a class.</p>
 			}
 
+			<Header size='large'>Your Certifications</Header>
+
+			<CertList member={user.member} />
+
+			<p>Certifications are based on the courses you've taken. If there's any errors, please email <a href='mailto:directors@protospace.ca'>directors@protospace.ca</a>.</p>
 		</Container>
 	);
 };