Add user's training to webclient

webclient/package.json

@@ -6,6 +6,7 @@
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.3.2",
 		"@testing-library/user-event": "^7.1.2",
+		"moment": "^2.24.0",
 		"react": "^16.12.0",
 		"react-dom": "^16.12.0",
 		"react-router-dom": "^5.1.2",

webclient/src/App.js

@@ -7,6 +7,7 @@ import { requester } from './utils.js';
 import { Home } from './Home.js';
 import { Transactions, TransactionDetail } from './Transactions.js';
 import { Cards } from './Cards.js';
+import { Training } from './Training.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 
 function App() {
@@ -41,9 +42,6 @@ function App() {
 		setUserCache(false);
 	}
 
-	let menuName = user && user.member && user.member.preferred_name || 'Profile';
-	menuName = menuName.length > 7 ? 'Profile' : menuName;
-
 	return (
 		<Router>
 			<Container>
@@ -60,13 +58,18 @@ function App() {
 						to='/'
 					/>
 
-					<Dropdown item text={menuName} id='ps-menu'>
+					<Dropdown item text='Profile' id='ps-menu'>
 						<Dropdown.Menu>
 							<Dropdown.Item
 								content='Transactions'
 								as={Link}
 								to='/transactions'
 							/>
+							<Dropdown.Item
+								content='Training'
+								as={Link}
+								to='/training'
+							/>
 							<Dropdown.Item
 								content='Cards'
 								as={Link}
@@ -115,6 +118,10 @@ function App() {
 							<Cards user={user} />
 						</Route>
 
+						<Route path='/training'>
+							<Training user={user} />
+						</Route>
+
 						<Route path='/:page'>
 							<NotFound />
 						</Route>

webclient/src/Home.js

@@ -142,7 +142,9 @@ function MemberInfo(props) {
 					{lastTrans.length ?
 						lastTrans.map((x, i) =>
 							<Table.Row key={i}>
-								<Table.Cell>{x.date}</Table.Cell>
+								<Table.Cell>
+									<Link to={'/transactions/'+x.id}>{x.date}</Link>
+								</Table.Cell>
 								<Table.Cell>{x.account_type}</Table.Cell>
 								<Table.Cell>${x.amount}</Table.Cell>
 							</Table.Row>

webclient/src/Training.js

@@ -0,0 +1,49 @@
+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, Segment, Table } from 'semantic-ui-react';
+import moment from 'moment';
+import { requester } from './utils.js';
+import { NotFound, PleaseLogin } from './Misc.js';
+
+export function Training(props) {
+	const { user } = props;
+
+	return (
+		<Container>
+			<Header size='large'>Training</Header>
+
+			{user.training.length ?
+				<Table basic='very'>
+					<Table.Header>
+						<Table.Row>
+							<Table.HeaderCell>Course / Event Name</Table.HeaderCell>
+							<Table.HeaderCell>Class Date</Table.HeaderCell>
+							<Table.HeaderCell>Status</Table.HeaderCell>
+							<Table.HeaderCell>Instructor</Table.HeaderCell>
+						</Table.Row>
+					</Table.Header>
+
+					<Table.Body>
+						{user.training.map((x, i) =>
+							<Table.Row key={i}>
+								<Table.Cell>
+									<Link to={'/courses/'+x.session.course.id}>{x.session.course.name}</Link>
+								</Table.Cell>
+								<Table.Cell>
+									<Link to={'/classes/'+x.session.id}>{moment(x.session.datetime).format('MMMM Do YYYY')}</Link>
+								</Table.Cell>
+								<Table.Cell>{x.attendance_status}</Table.Cell>
+								<Table.Cell>{x.session.old_instructor}</Table.Cell>
+							</Table.Row>
+						)}
+					</Table.Body>
+				</Table>
+			:
+				<p>No training yet! Sign up for a course to take a class.</p>
+			}
+
+		</Container>
+	);
+};
+

webclient/src/Transactions.js

@@ -17,7 +17,6 @@ export function Transactions(props) {
 				<Table.Header>
 					<Table.Row>
 						<Table.HeaderCell>Date</Table.HeaderCell>
-						<Table.HeaderCell>ID</Table.HeaderCell>
 						<Table.HeaderCell>Amount</Table.HeaderCell>
 						<Table.HeaderCell>Account</Table.HeaderCell>
 						<Table.HeaderCell>Memo</Table.HeaderCell>
@@ -28,8 +27,9 @@ export function Transactions(props) {
 					{user.transactions.length ?
 						user.transactions.slice().reverse().map((x, i) =>
 							<Table.Row key={i}>
-								<Table.Cell>{x.date}</Table.Cell>
-								<Table.Cell><Link to={'/transactions/'+x.id}>{x.id}</Link></Table.Cell>
+								<Table.Cell>
+									<Link to={'/transactions/'+x.id}>{x.date}</Link>
+								</Table.Cell>
 								<Table.Cell>${x.amount}</Table.Cell>
 								<Table.Cell>{x.account_type}</Table.Cell>
 								<Table.Cell>{x.memo}</Table.Cell>

webclient/yarn.lock

@@ -6618,6 +6618,11 @@ mkdirp@0.5.1, mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp@~0.5.1:
   dependencies:
     minimist "0.0.8"
 
+moment@^2.24.0:
+  version "2.24.0"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
+  integrity sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"