From faf506c3362db70557ce99955f5d21b96c8f2240 Mon Sep 17 00:00:00 2001
From: Elijah Lucian <elijahlucian@gmail.com>
Date: Sun, 2 May 2021 21:31:04 -0600
Subject: [PATCH 1/3] unused vars

---
 webclient/src/App.js               | 445 ++++++++++++++++-------------
 webclient/src/Auth.js              | 154 ++++++----
 webclient/src/Cards.js             | 121 ++++----
 webclient/src/Charts.js            | 318 +++++++++++++--------
 webclient/src/InstructorCourses.js | 176 +++++++-----
 webclient/src/LoginSignup.js       | 132 +++++----
 webclient/src/ManageScroll.js      |  12 +-
 webclient/src/Misc.js              |  31 +-
 webclient/src/PasswordReset.js     |  95 +++---
 webclient/src/Paste.js             |  73 +++--
 webclient/src/PayPal.js            | 176 ++++++++----
 webclient/src/Paymaster.js         | 105 ++++---
 webclient/src/Training.js          | 207 ++++++++++----
 webclient/src/utils.js             | 100 +++----
 14 files changed, 1264 insertions(+), 881 deletions(-)

diff --git a/webclient/src/App.js b/webclient/src/App.js
index c3d52e92..c8a0fa27 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useReducer, useContext } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import React, { useState, useEffect, useReducer } from 'react';
+import { Switch, Route, Link, useHistory } from 'react-router-dom';
 import './semantic-ui/semantic.min.css';
 import './light.css';
 import './dark.css';
-import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { Container, Dropdown, Menu } from 'semantic-ui-react';
 import Darkmode from 'darkmode-js';
 import { isAdmin, requester } from './utils.js';
 import { ManageScroll } from './ManageScroll.js';
@@ -27,8 +27,10 @@ import { Footer } from './Footer.js';
 
 function App() {
 	const [token, setToken] = useState(localStorage.getItem('token', ''));
-	const [user, setUser] = useState(JSON.parse(localStorage.getItem('user', 'false')));
-	const [refreshCount, refreshUser] = useReducer(x => x + 1, 0);
+	const [user, setUser] = useState(
+		JSON.parse(localStorage.getItem('user', 'false'))
+	);
+	const [refreshCount, refreshUser] = useReducer((x) => x + 1, 0);
 	const [yousure, setYousure] = useState(false);
 	const history = useHistory();
 
@@ -44,13 +46,13 @@ function App() {
 
 	useEffect(() => {
 		requester('/user/', 'GET', token)
-		.then(res => {
-			setUserCache(res);
-		})
-		.catch(err => {
-			console.log(err);
-			setUserCache(null);
-		});
+			.then((res) => {
+				setUserCache(res);
+			})
+			.catch((err) => {
+				console.log(err);
+				setUserCache(null);
+			});
 	}, [token, refreshCount]);
 
 	function logout() {
@@ -73,14 +75,14 @@ function App() {
 				path: history.location.pathname,
 			};
 			requester('/ping/', 'POST', token, data)
-			.then()
-			.catch(err => {
-				console.log(err);
-				if (err.data && err.data.detail === 'Invalid token.') {
-					logout(); // You Sure?
-					logout();
-				}
-			});
+				.then()
+				.catch((err) => {
+					console.log(err);
+					if (err.data && err.data.detail === 'Invalid token.') {
+						logout(); // You Sure?
+						logout();
+					}
+				});
 		}
 	}, [history.location]);
 
@@ -91,7 +93,7 @@ function App() {
 			buttonColorDark: '#666',
 			buttonColorLight: '#aaa',
 			label: '🌙',
-		}
+		};
 		const darkmode = new Darkmode(options);
 		darkmode.showWidget();
 	}, []);
@@ -100,208 +102,241 @@ function App() {
 		<div>
 			<ManageScroll />
 
-			<div className='content-wrap'>
-			<div className='content-wrap-inside'>
-
-			<Container>
-				<div className='hero'>
-					<Link to='/'>
-						<img src='/logo-long.svg' className='logo-long' />
-					</Link>
-				</div>
-
-				{window.location.hostname !== 'my.protospace.ca' &&
-					<p style={{ background: 'yellow' }}>~~~~~ Development site ~~~~~</p>
-				}
-			</Container>
-
-			<Menu>
-				<Container>
-					<Menu.Item
-						content='Home'
-						as={Link}
-						to='/'
-					/>
-
-					<Dropdown item text='Member' id='ps-menu'>
-						<Dropdown.Menu>
-							<Dropdown.Item
-								content='Account'
-								as={Link}
-								to='/account'
-							/>
-							<Dropdown.Item
-								content='Transactions'
-								as={Link}
-								to='/transactions'
-							/>
-							<Dropdown.Item
-								content='Paymaster'
-								as={Link}
-								to='/paymaster'
-							/>
-							<Dropdown.Item
-								content='Training'
-								as={Link}
-								to='/training'
-							/>
-							<Dropdown.Item
-								content='Cards / Access'
-								as={Link}
-								to='/cards'
-							/>
-						</Dropdown.Menu>
-					</Dropdown>
-
-					<Dropdown item text='Space' id='ps-menu'>
-						<Dropdown.Menu>
-							<Dropdown.Item
-								content='Member List'
-								as={Link}
-								to='/members'
-							/>
-							<Dropdown.Item
-								content='Courses'
-								as={Link}
-								to='/courses'
-							/>
-							<Dropdown.Item
-								content='Classes'
-								as={Link}
-								to='/classes'
-							/>
-							<Dropdown.Item
-								content='Transporter'
-								as={Link}
-								to='/paste'
-							/>
-
-							{user && isAdmin(user) && <Dropdown.Item
-								content='Admin'
-								as={Link}
-								to='/admin'
-							/>}
-
-							{user && isAdmin(user) && <Dropdown.Item
-								content='Admin Txs'
-								as={Link}
-								to='/admintrans'
-							/>}
-						</Dropdown.Menu>
-					</Dropdown>
-
-					{user && <Menu.Menu position='right'>
-						<Menu.Item
-							content={yousure ? 'You Sure?' : 'Log Out'}
-							onClick={logout}
-							icon='cancel'
+			<div className="content-wrap">
+				<div className="content-wrap-inside">
+					<Container>
+						<div className="hero">
+							<Link to="/">
+								<img
+									src="/logo-long.svg"
+									className="logo-long"
+								/>
+							</Link>
+						</div>
+
+						{window.location.hostname !== 'my.protospace.ca' && (
+							<p style={{ background: 'yellow' }}>
+								~~~~~ Development site ~~~~~
+							</p>
+						)}
+					</Container>
+
+					<Menu>
+						<Container>
+							<Menu.Item content="Home" as={Link} to="/" />
+
+							<Dropdown item text="Member" id="ps-menu">
+								<Dropdown.Menu>
+									<Dropdown.Item
+										content="Account"
+										as={Link}
+										to="/account"
+									/>
+									<Dropdown.Item
+										content="Transactions"
+										as={Link}
+										to="/transactions"
+									/>
+									<Dropdown.Item
+										content="Paymaster"
+										as={Link}
+										to="/paymaster"
+									/>
+									<Dropdown.Item
+										content="Training"
+										as={Link}
+										to="/training"
+									/>
+									<Dropdown.Item
+										content="Cards / Access"
+										as={Link}
+										to="/cards"
+									/>
+								</Dropdown.Menu>
+							</Dropdown>
+
+							<Dropdown item text="Space" id="ps-menu">
+								<Dropdown.Menu>
+									<Dropdown.Item
+										content="Member List"
+										as={Link}
+										to="/members"
+									/>
+									<Dropdown.Item
+										content="Courses"
+										as={Link}
+										to="/courses"
+									/>
+									<Dropdown.Item
+										content="Classes"
+										as={Link}
+										to="/classes"
+									/>
+									<Dropdown.Item
+										content="Transporter"
+										as={Link}
+										to="/paste"
+									/>
+
+									{user && isAdmin(user) && (
+										<Dropdown.Item
+											content="Admin"
+											as={Link}
+											to="/admin"
+										/>
+									)}
+
+									{user && isAdmin(user) && (
+										<Dropdown.Item
+											content="Admin Txs"
+											as={Link}
+											to="/admintrans"
+										/>
+									)}
+								</Dropdown.Menu>
+							</Dropdown>
+
+							{user && (
+								<Menu.Menu position="right">
+									<Menu.Item
+										content={
+											yousure ? 'You Sure?' : 'Log Out'
+										}
+										onClick={logout}
+										icon="cancel"
+									/>
+									<Menu.Item fitted content="" />
+								</Menu.Menu>
+							)}
+						</Container>
+					</Menu>
+
+					<Route exact path="/">
+						<Home
+							token={token}
+							setTokenCache={setTokenCache}
+							user={user}
+							refreshUser={refreshUser}
 						/>
-						<Menu.Item fitted content='' />
-					</Menu.Menu>}
-				</Container>
-			</Menu>
-
-			<Route exact path='/'>
-				<Home token={token} setTokenCache={setTokenCache} user={user} refreshUser={refreshUser} />
-			</Route>
-
-			<div className='topPadding'>
-				<Switch>
-					<Route path='/password/reset/confirm/:uid/:token'>
-						<ConfirmReset />
-					</Route>
-					<Route path='/password/reset'>
-						<PasswordReset />
-					</Route>
-
-					<Route path='/paste'>
-						<Paste token={token} />
-					</Route>
-
-					<Route path='/charts'>
-						<Charts />
 					</Route>
 
-					<Route path='/auth'>
-						<Auth user={user} />
-					</Route>
-
-					{user && user.member.set_details ?
+					<div className="topPadding">
 						<Switch>
-							<Route path='/account'>
-								<Account token={token} user={user} refreshUser={refreshUser} />
-							</Route>
-
-							<Route path='/transactions/:id'>
-								<TransactionDetail token={token} user={user} refreshUser={refreshUser} />
+							<Route path="/password/reset/confirm/:uid/:token">
+								<ConfirmReset />
 							</Route>
-							<Route path='/transactions'>
-								<Transactions user={user} />
+							<Route path="/password/reset">
+								<PasswordReset />
 							</Route>
 
-							<Route path='/paymaster'>
-								<Paymaster user={user} />
+							<Route path="/paste">
+								<Paste token={token} />
 							</Route>
 
-							<Route path='/cards'>
-								<Cards token={token} user={user} />
+							<Route path="/charts">
+								<Charts />
 							</Route>
 
-							<Route path='/training'>
-								<Training user={user} />
+							<Route path="/auth">
+								<Auth user={user} />
 							</Route>
 
-							<Route path='/courses/:id'>
-								<CourseDetail token={token} user={user} />
-							</Route>
-							<Route path='/courses'>
-								<Courses token={token} user={user} />
-							</Route>
-
-							<Route path='/classes/:id'>
-								<ClassDetail token={token} user={user} refreshUser={refreshUser} />
-							</Route>
-							<Route path='/classes'>
-								<Classes token={token} />
-							</Route>
-
-							<Route path='/members/:id'>
-								<MemberDetail token={token} user={user} />
-							</Route>
-							<Route path='/members'>
-								<Members token={token} />
-							</Route>
-
-							{user && isAdmin(user) &&
-								<Route path='/admin'>
-									<Admin token={token} user={user} />
+							{user && user.member.set_details ? (
+								<Switch>
+									<Route path="/account">
+										<Account
+											token={token}
+											user={user}
+											refreshUser={refreshUser}
+										/>
+									</Route>
+
+									<Route path="/transactions/:id">
+										<TransactionDetail
+											token={token}
+											user={user}
+											refreshUser={refreshUser}
+										/>
+									</Route>
+									<Route path="/transactions">
+										<Transactions user={user} />
+									</Route>
+
+									<Route path="/paymaster">
+										<Paymaster user={user} />
+									</Route>
+
+									<Route path="/cards">
+										<Cards token={token} user={user} />
+									</Route>
+
+									<Route path="/training">
+										<Training user={user} />
+									</Route>
+
+									<Route path="/courses/:id">
+										<CourseDetail
+											token={token}
+											user={user}
+										/>
+									</Route>
+									<Route path="/courses">
+										<Courses token={token} user={user} />
+									</Route>
+
+									<Route path="/classes/:id">
+										<ClassDetail
+											token={token}
+											user={user}
+											refreshUser={refreshUser}
+										/>
+									</Route>
+									<Route path="/classes">
+										<Classes token={token} />
+									</Route>
+
+									<Route path="/members/:id">
+										<MemberDetail
+											token={token}
+											user={user}
+										/>
+									</Route>
+									<Route path="/members">
+										<Members token={token} />
+									</Route>
+
+									{user && isAdmin(user) && (
+										<Route path="/admin">
+											<Admin token={token} user={user} />
+										</Route>
+									)}
+
+									{user && isAdmin(user) && (
+										<Route path="/admintrans">
+											<AdminTransactions
+												token={token}
+												user={user}
+											/>
+										</Route>
+									)}
+
+									<Route path="/:page">
+										<NotFound />
+									</Route>
+								</Switch>
+							) : (
+								<Route path="/:page">
+									<PleaseLogin />
 								</Route>
-							}
-
-							{user && isAdmin(user) &&
-								<Route path='/admintrans'>
-									<AdminTransactions token={token} user={user} />
-								</Route>
-							}
-
-							<Route path='/:page'>
-								<NotFound />
-							</Route>
+							)}
 						</Switch>
-					:
-						<Route path='/:page'>
-							<PleaseLogin />
-						</Route>
-					}
-				</Switch>
-			</div>
-
-			</div>
+					</div>
+				</div>
 			</div>
 
 			<Footer />
 		</div>
-	)
-};
+	);
+}
 
 export default App;
diff --git a/webclient/src/Auth.js b/webclient/src/Auth.js
index dabeecc4..3fa4345e 100644
--- a/webclient/src/Auth.js
+++ b/webclient/src/Auth.js
@@ -1,9 +1,15 @@
-import React, { useState, useEffect, useReducer } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation } from 'react-router-dom';
-import moment from 'moment-timezone';
+import React, { useState } from 'react';
+import { Route, Link } 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 { statusColor, BasicTable, staticUrl, requester, isAdmin } from './utils.js';
+import {
+	Container,
+	Form,
+	Header,
+	Image,
+	Message,
+	Segment,
+} from 'semantic-ui-react';
+import { requester } from './utils.js';
 
 export function AuthForm(props) {
 	const { user } = props;
@@ -24,92 +30,117 @@ export function AuthForm(props) {
 			setLoading(true);
 			const data = { ...input, username: input.username.toLowerCase() };
 			requester('/spaceport-auth/login/', 'POST', '', data)
-			.then(res => {
-				setSuccess(true);
-				setError({});
-			})
-			.catch(err => {
-				setLoading(false);
-				console.log(err);
-				setError(err.data);
-			});
+				.then((res) => {
+					setSuccess(true);
+					setError({});
+				})
+				.catch((err) => {
+					setLoading(false);
+					console.log(err);
+					setError(err.data);
+				});
 		}
 	};
 
-	return (
-		success ?
-			props.children
-		:
-			<Form
-				onSubmit={handleSubmit}
-				warning={error.non_field_errors && error.non_field_errors[0] === 'Unable to log in with provided credentials.'}
-			>
-				<Header size='medium'>Log In to Spaceport</Header>
-
-				{user ?
-					<><Form.Input
-						label='Spaceport Username'
-						name='username'
+	return success ? (
+		props.children
+	) : (
+		<Form
+			onSubmit={handleSubmit}
+			warning={
+				error.non_field_errors &&
+				error.non_field_errors[0] ===
+					'Unable to log in with provided credentials.'
+			}
+		>
+			<Header size="medium">Log In to Spaceport</Header>
+
+			{user ? (
+				<>
+					<Form.Input
+						label="Spaceport Username"
+						name="username"
 						value={user.username}
 						onChange={handleChange}
 						error={error.username}
 					/>
 					<Form.Input
-						label='Spaceport Password'
-						name='password'
-						type='password'
+						label="Spaceport Password"
+						name="password"
+						type="password"
 						onChange={handleChange}
 						error={error.password}
 						autoFocus
-					/></>
-				:
-					<><Form.Input
-						label='Spaceport Username'
-						name='username'
-						placeholder='first.last'
+					/>
+				</>
+			) : (
+				<>
+					<Form.Input
+						label="Spaceport Username"
+						name="username"
+						placeholder="first.last"
 						onChange={handleChange}
 						error={error.username}
 						autoFocus
 					/>
 					<Form.Input
-						label='Spaceport Password'
-						name='password'
-						type='password'
+						label="Spaceport Password"
+						name="password"
+						type="password"
 						onChange={handleChange}
 						error={error.password}
-					/></>
-				}
-
-				<Form.Button loading={loading} error={error.non_field_errors}>
-					Authorize
-				</Form.Button>
-
-				<Message warning>
-					<Message.Header>Forgot your password?</Message.Header>
-					<p><Link to='/password/reset/'>Click here</Link> to reset it.</p>
-				</Message>
-			</Form>
+					/>
+				</>
+			)}
+
+			<Form.Button loading={loading} error={error.non_field_errors}>
+				Authorize
+			</Form.Button>
+
+			<Message warning>
+				<Message.Header>Forgot your password?</Message.Header>
+				<p>
+					<Link to="/password/reset/">Click here</Link> to reset it.
+				</p>
+			</Message>
+		</Form>
 	);
-};
+}
 
 export function AuthWiki(props) {
 	const { user } = props;
 
 	return (
 		<Segment compact padded>
-			<Header size='medium'>
+			<Header size="medium">
 				<Image src={'/wikilogo.png'} />
 				Protospace Wiki
 			</Header>
 
 			<p>would like to request Spaceport authentication.</p>
 
-			<p>URL: <a href='http://wiki.protospace.ca/Welcome_to_Protospace' target='_blank' rel='noopener noreferrer'>wiki.protospace.ca</a></p>
+			<p>
+				URL:{' '}
+				<a
+					href="http://wiki.protospace.ca/Welcome_to_Protospace"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					wiki.protospace.ca
+				</a>
+			</p>
 
 			<AuthForm user={user}>
-				<Header size='small'>Success!</Header>
+				<Header size="small">Success!</Header>
 				<p>You can now log into the wiki:</p>
-				<p><a href='http://wiki.protospace.ca/index.php?title=Special:UserLogin&returnto=Welcome+to+Protospace' rel='noopener noreferrer'>Protospace Wiki</a></p>
+				<p>
+					<a
+						href="http://wiki.protospace.ca/index.php?title=Special:UserLogin&returnto=Welcome+to+Protospace"
+						rel="noopener noreferrer"
+					>
+						Protospace Wiki
+					</a>
+				</p>
 			</AuthForm>
 		</Segment>
 	);
@@ -120,11 +151,14 @@ export function Auth(props) {
 
 	return (
 		<Container>
-			<Header size='large'>Spaceport Auth</Header>
+			<Header size="large">Spaceport Auth</Header>
 
-			<p>Use this page to link different applications to your Spaceport account.</p>
+			<p>
+				Use this page to link different applications to your Spaceport
+				account.
+			</p>
 
-			<Route path='/auth/wiki'>
+			<Route path="/auth/wiki">
 				<AuthWiki user={user} />
 			</Route>
 		</Container>
diff --git a/webclient/src/Cards.js b/webclient/src/Cards.js
index e73b3e2c..bb56bec5 100644
--- a/webclient/src/Cards.js
+++ b/webclient/src/Cards.js
@@ -1,36 +1,39 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import React, { useState } from 'react';
 import './light.css';
-import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { BasicTable, requester, staticUrl } from './utils.js';
-import { NotFound, PleaseLogin } from './Misc.js';
+import { Button, Container, Header, Table } from 'semantic-ui-react';
+import { BasicTable, staticUrl } from './utils.js';
 
 export function Cards(props) {
 	const { user, token } = props;
 	const [open, setOpen] = useState(false);
 
-	const cardStatus = (c) => c.active_status === 'card_active' ? 'Yes' : 'No';
+	const cardStatus = (c) =>
+		c.active_status === 'card_active' ? 'Yes' : 'No';
 	const card = user.cards[0];
 
 	return (
 		<Container>
-			<Header size='large'>Cards / Access</Header>
+			<Header size="large">Cards / Access</Header>
 
-			<Header size='medium'>Member Cards</Header>
+			<Header size="medium">Member Cards</Header>
 
-			{user.member.card_photo ?
+			{user.member.card_photo ? (
 				<p>
-					<a href={staticUrl + '/' + user.member.card_photo} target='_blank'>
+					<a
+						href={staticUrl + '/' + user.member.card_photo}
+						target="_blank"
+					>
 						Click here
-					</a> to view your card image.
+					</a>{' '}
+					to view your card image.
 				</p>
-			:
+			) : (
 				<p>Upload a photo to generate a card image.</p>
-			}
+			)}
 
-			{user.cards.length ?
-				user.cards.length > 1 ?
-					<Table basic='very'>
+			{user.cards.length ? (
+				user.cards.length > 1 ? (
+					<Table basic="very">
 						<Table.Header>
 							<Table.Row>
 								<Table.HeaderCell>Number</Table.HeaderCell>
@@ -41,17 +44,17 @@ export function Cards(props) {
 						</Table.Header>
 
 						<Table.Body>
-							{user.cards.map(x =>
+							{user.cards.map((x) => (
 								<Table.Row key={x.id}>
 									<Table.Cell>{x.card_number}</Table.Cell>
 									<Table.Cell>{x.notes}</Table.Cell>
 									<Table.Cell>{x.last_seen_at}</Table.Cell>
 									<Table.Cell>{cardStatus(x)}</Table.Cell>
 								</Table.Row>
-							)}
+							))}
 						</Table.Body>
 					</Table>
-				:
+				) : (
 					<BasicTable>
 						<Table.Body>
 							<Table.Row>
@@ -72,71 +75,91 @@ export function Cards(props) {
 							</Table.Row>
 						</Table.Body>
 					</BasicTable>
-			:
-				<p>No cards yet! Ask a director for one after you are vetted.</p>
-			}
+				)
+			) : (
+				<p>
+					No cards yet! Ask a director for one after you are vetted.
+				</p>
+			)}
 
-			{!!user.door_code && <React.Fragment>
-				<Header size='medium'>Door Alarm Code</Header>
+			{!!user.door_code && (
+				<React.Fragment>
+					<Header size="medium">Door Alarm Code</Header>
 
-				<p>Only share this with vetted Protospace members:</p>
+					<p>Only share this with vetted Protospace members:</p>
 
-				<p>{user.door_code}</p>
-			</React.Fragment>}
+					<p>{user.door_code}</p>
+				</React.Fragment>
+			)}
 
-			{!!user.wifi_pass && <React.Fragment>
-				<Header size='medium'>Wi-Fi Password</Header>
+			{!!user.wifi_pass && (
+				<React.Fragment>
+					<Header size="medium">Wi-Fi Password</Header>
 
-				<p>Only share this with Protospace members and guests:</p>
+					<p>Only share this with Protospace members and guests:</p>
 
-				<p>{user.wifi_pass}</p>
-			</React.Fragment>}
+					<p>{user.wifi_pass}</p>
+				</React.Fragment>
+			)}
 
-			<Header size='medium'>API Key</Header>
+			<Header size="medium">API Key</Header>
 
 			<p>Don't share this with anyone! Treat it like your password:</p>
 
-			{open ?
+			{open ? (
 				<React.Fragment>
 					<p>{token}</p>
 
-					<Header size='small'>API Docs</Header>
+					<Header size="small">API Docs</Header>
 
 					<p>
 						To learn how to use this, refer to the API docs:
 						<br />
-						<a href='https://docs.my.protospace.ca/api.html' target='_blank' rel='noopener noreferrer' aria-label='link to our API docs'>
+						<a
+							href="https://docs.my.protospace.ca/api.html"
+							target="_blank"
+							rel="noopener noreferrer"
+							aria-label="link to our API docs"
+						>
 							https://docs.my.protospace.ca/api.html
 						</a>
 					</p>
 
-					<Header size='small'>API Examples</Header>
+					<Header size="small">API Examples</Header>
 
 					<p>Get your user info with Bash (curl):</p>
 
-					<p><code>$ curl -H "Authorization: Token {token}" https://api.my.protospace.ca/user/</code></p>
+					<p>
+						<code>
+							$ curl -H "Authorization: Token {token}"
+							https://api.my.protospace.ca/user/
+						</code>
+					</p>
 
 					<p>Get your user info with Python 3 (and requests):</p>
 
 					<code>
-						import json, requests<br/>
+						import json, requests
+						<br />
 						<br />
 						SECRET_API_KEY = '{token}'<br />
 						<br />
-						headers = {'{'}'Authorization': 'Token '+SECRET_API_KEY{'}'}<br />
-						r = requests.get('https://api.my.protospace.ca/user/', headers=headers)<br />
+						headers = {'{'}'Authorization': 'Token '+SECRET_API_KEY
+						{'}'}
+						<br />
+						r = requests.get('https://api.my.protospace.ca/user/',
+						headers=headers)
+						<br />
+						<br />
+						print(json.dumps(r.json(), indent=4))
 						<br />
-						print(json.dumps(r.json(), indent=4))<br />
 					</code>
 				</React.Fragment>
-			:
+			) : (
 				<p>
-					<Button onClick={() => setOpen(true)}>
-						Show Secret
-					</Button>
+					<Button onClick={() => setOpen(true)}>Show Secret</Button>
 				</p>
-			}
+			)}
 		</Container>
 	);
-};
-
+}
diff --git a/webclient/src/Charts.js b/webclient/src/Charts.js
index b39fa696..8a3bbcd6 100644
--- a/webclient/src/Charts.js
+++ b/webclient/src/Charts.js
@@ -1,9 +1,19 @@
-import React, { useState, useEffect, useReducer, useContext } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
-import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { BarChart, Bar, LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine } from 'recharts';
-import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
-import { NotFound } from './Misc.js';
+import React, { useState, useEffect } from 'react';
+import { Button, Container, Header } from 'semantic-ui-react';
+import {
+	BarChart,
+	Bar,
+	LineChart,
+	Line,
+	XAxis,
+	YAxis,
+	CartesianGrid,
+	Tooltip,
+	Legend,
+	ResponsiveContainer,
+	ReferenceLine,
+} from 'recharts';
+import { requester } from './utils.js';
 
 let memberCountCache = false;
 let signupCountCache = false;
@@ -17,105 +27,140 @@ export function Charts(props) {
 
 	useEffect(() => {
 		requester('/charts/membercount/', 'GET')
-		.then(res => {
-			setMemberCount(res);
-			memberCountCache = res;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setMemberCount(res);
+				memberCountCache = res;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 
 		requester('/charts/signupcount/', 'GET')
-		.then(res => {
-			setSignupCount(res);
-			signupCountCache = res;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setSignupCount(res);
+				signupCountCache = res;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 
 		requester('/charts/spaceactivity/', 'GET')
-		.then(res => {
-			setSpaceActivity(res);
-			spaceActivityCache = res;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setSpaceActivity(res);
+				spaceActivityCache = res;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, []);
 
 	return (
 		<Container>
-			<Header size='large'>Charts</Header>
+			<Header size="large">Charts</Header>
 
-			<Header size='medium'>Summary</Header>
+			<Header size="medium">Summary</Header>
 
-			{memberCount && signupCount &&
+			{memberCount && signupCount && (
 				<>
 					<p>
-						The total member count is {memberCount.slice().reverse()[0].member_count} members,
-						compared to {memberCount.slice().reverse()[30].member_count} members 30 days ago.
+						The total member count is{' '}
+						{memberCount.slice().reverse()[0].member_count} members,
+						compared to{' '}
+						{memberCount.slice().reverse()[30].member_count} members
+						30 days ago.
 					</p>
 					<p>
-						The green member count is {memberCount.slice().reverse()[0].green_count} members,
-						compared to {memberCount.slice().reverse()[30].green_count} members 30 days ago.
+						The green member count is{' '}
+						{memberCount.slice().reverse()[0].green_count} members,
+						compared to{' '}
+						{memberCount.slice().reverse()[30].green_count} members
+						30 days ago.
 					</p>
 					<p>
-						The older than six months member count is {memberCount.slice().reverse()[0].six_month_plus_count} members,
-						compared to {memberCount.slice().reverse()[30].six_month_plus_count} members 30 days ago.
+						The older than six months member count is{' '}
+						{memberCount.slice().reverse()[0].six_month_plus_count}{' '}
+						members, compared to{' '}
+						{memberCount.slice().reverse()[30].six_month_plus_count}{' '}
+						members 30 days ago.
 					</p>
 					<p>
-						The vetted member count is {memberCount.slice().reverse()[0].vetted_count} members,
-						compared to {memberCount.slice().reverse()[30].vetted_count} members 30 days ago.
+						The vetted member count is{' '}
+						{memberCount.slice().reverse()[0].vetted_count} members,
+						compared to{' '}
+						{memberCount.slice().reverse()[30].vetted_count} members
+						30 days ago.
 					</p>
 					<p>
-						There were {signupCount.slice().reverse()[0].signup_count} signups so far this month,
-						and {signupCount.slice().reverse()[1].signup_count} signups last month.
+						There were{' '}
+						{signupCount.slice().reverse()[0].signup_count} signups
+						so far this month, and{' '}
+						{signupCount.slice().reverse()[1].signup_count} signups
+						last month.
 					</p>
 				</>
-			}
+			)}
 
-			<Header size='medium'>Member Counts</Header>
+			<Header size="medium">Member Counts</Header>
 
 			<p>Daily since March 2nd, 2020.</p>
 
 			<p>
-				{memberCount &&
-					<ResponsiveContainer width='100%' height={300}>
+				{memberCount && (
+					<ResponsiveContainer width="100%" height={300}>
 						<LineChart data={memberCount}>
-							<XAxis dataKey='date' minTickGap={10} />
+							<XAxis dataKey="date" minTickGap={10} />
 							<YAxis />
-							<CartesianGrid strokeDasharray='3 3'/>
+							<CartesianGrid strokeDasharray="3 3" />
 							<Tooltip />
 							<Legend />
 
-							<ReferenceLine x='2020-03-25' stroke='red' label='Locked' strokeDasharray='3 3' />
-							<ReferenceLine x='2020-06-01' stroke='red' label='Opened' strokeDasharray='3 3' />
+							<ReferenceLine
+								x="2020-03-25"
+								stroke="red"
+								label="Locked"
+								strokeDasharray="3 3"
+							/>
+							<ReferenceLine
+								x="2020-06-01"
+								stroke="red"
+								label="Opened"
+								strokeDasharray="3 3"
+							/>
 
-							<ReferenceLine x='2020-11-27' stroke='red' label='Locked' strokeDasharray='3 3' />
-							<ReferenceLine x='2021-03-20' stroke='red' label='Opened' strokeDasharray='3 3' />
+							<ReferenceLine
+								x="2020-11-27"
+								stroke="red"
+								label="Locked"
+								strokeDasharray="3 3"
+							/>
+							<ReferenceLine
+								x="2021-03-20"
+								stroke="red"
+								label="Opened"
+								strokeDasharray="3 3"
+							/>
 
 							<Line
-								type='monotone'
-								dataKey='member_count'
-								name='Member Count'
-								stroke='#8884d8'
+								type="monotone"
+								dataKey="member_count"
+								name="Member Count"
+								stroke="#8884d8"
 								strokeWidth={2}
 								dot={false}
 								animationDuration={1000}
 							/>
 							<Line
-								type='monotone'
-								dataKey='green_count'
-								name='Green Count'
-								stroke='#82ca9d'
+								type="monotone"
+								dataKey="green_count"
+								name="Green Count"
+								stroke="#82ca9d"
 								strokeWidth={2}
 								dot={false}
 								animationDuration={1500}
 							/>
 						</LineChart>
 					</ResponsiveContainer>
-				}
+				)}
 			</p>
 
 			<p>Member Count: number of active paying members on Spaceport.</p>
@@ -123,164 +168,185 @@ export function Charts(props) {
 			<p>Green Count: number of Prepaid and Current members.</p>
 
 			<p>
-				{memberCount &&
-					<ResponsiveContainer width='100%' height={300}>
+				{memberCount && (
+					<ResponsiveContainer width="100%" height={300}>
 						<LineChart data={memberCount}>
-							<XAxis dataKey='date' minTickGap={10} />
+							<XAxis dataKey="date" minTickGap={10} />
 							<YAxis />
-							<CartesianGrid strokeDasharray='3 3'/>
+							<CartesianGrid strokeDasharray="3 3" />
 							<Tooltip />
 							<Legend />
 
 							<Line
-								type='monotone'
-								dataKey='member_count'
-								name='Member Count'
-								stroke='#8884d8'
+								type="monotone"
+								dataKey="member_count"
+								name="Member Count"
+								stroke="#8884d8"
 								strokeWidth={2}
 								dot={false}
 								animationDuration={1000}
 							/>
 							<Line
-								type='monotone'
-								dataKey='six_month_plus_count'
-								name='Six Months+'
-								stroke='red'
+								type="monotone"
+								dataKey="six_month_plus_count"
+								name="Six Months+"
+								stroke="red"
 								strokeWidth={2}
 								dot={false}
 								animationDuration={1500}
 							/>
 						</LineChart>
 					</ResponsiveContainer>
-				}
+				)}
 			</p>
 
 			<p>Member Count: same as above.</p>
 
-			<p>Six Months+: number of active memberships older than six months.</p>
+			<p>
+				Six Months+: number of active memberships older than six months.
+			</p>
 
 			<p>
-				{memberCount &&
-					<ResponsiveContainer width='100%' height={300}>
+				{memberCount && (
+					<ResponsiveContainer width="100%" height={300}>
 						<LineChart data={memberCount}>
-							<XAxis dataKey='date' minTickGap={10} />
+							<XAxis dataKey="date" minTickGap={10} />
 							<YAxis />
-							<CartesianGrid strokeDasharray='3 3'/>
+							<CartesianGrid strokeDasharray="3 3" />
 							<Tooltip />
 							<Legend />
 
 							<Line
-								type='monotone'
-								dataKey='member_count'
-								name='Member Count'
-								stroke='#8884d8'
+								type="monotone"
+								dataKey="member_count"
+								name="Member Count"
+								stroke="#8884d8"
 								strokeWidth={2}
 								dot={false}
 								animationDuration={1000}
 							/>
 							<Line
-								type='monotone'
-								dataKey='vetted_count'
-								name='Vetted Count'
-								stroke='purple'
+								type="monotone"
+								dataKey="vetted_count"
+								name="Vetted Count"
+								stroke="purple"
 								strokeWidth={2}
 								dot={false}
 								animationDuration={1500}
 							/>
 						</LineChart>
 					</ResponsiveContainer>
-				}
+				)}
 			</p>
 
 			<p>Member Count: same as above.</p>
 
 			<p>Vetted Count: number of active vetted members.</p>
 
-			<Header size='medium'>Space Activity</Header>
+			<Header size="medium">Space Activity</Header>
 
-			{fullActivity ?
+			{fullActivity ? (
 				<p>Daily since March 7th, 2020, updates hourly.</p>
-			:
+			) : (
 				<p>
-					Last four weeks, updates hourly.
-					{' '}<Button size='tiny' onClick={() => setFullActivity(true)} >View All</Button>
+					Last four weeks, updates hourly.{' '}
+					<Button size="tiny" onClick={() => setFullActivity(true)}>
+						View All
+					</Button>
 				</p>
-			}
+			)}
 
 			<p>
-				{spaceActivity &&
-					<ResponsiveContainer width='100%' height={300}>
-						<BarChart data={fullActivity ? spaceActivity : spaceActivity.slice(-28)}>
-							<XAxis dataKey='date' minTickGap={10} />
+				{spaceActivity && (
+					<ResponsiveContainer width="100%" height={300}>
+						<BarChart
+							data={
+								fullActivity
+									? spaceActivity
+									: spaceActivity.slice(-28)
+							}
+						>
+							<XAxis dataKey="date" minTickGap={10} />
 							<YAxis />
-							<CartesianGrid strokeDasharray='3 3'/>
+							<CartesianGrid strokeDasharray="3 3" />
 							<Tooltip />
 							<Legend />
 
 							<Bar
-								type='monotone'
-								dataKey='card_scans'
-								name='Card Scans'
-								fill='#8884d8'
+								type="monotone"
+								dataKey="card_scans"
+								name="Card Scans"
+								fill="#8884d8"
 								maxBarSize={20}
 								isAnimationActive={false}
 							/>
 						</BarChart>
 					</ResponsiveContainer>
-				}
+				)}
 			</p>
 
-			<p>Cards Scans: number of individual members who have scanned to enter the space.</p>
+			<p>
+				Cards Scans: number of individual members who have scanned to
+				enter the space.
+			</p>
 
-			<Header size='medium'>Signup Count</Header>
+			<Header size="medium">Signup Count</Header>
 
 			<p>Monthly for the last sixteen months, updates daily.</p>
 
 			<p>
-				{signupCount &&
-					<ResponsiveContainer width='100%' height={300}>
+				{signupCount && (
+					<ResponsiveContainer width="100%" height={300}>
 						<BarChart data={signupCount}>
-							<XAxis dataKey='month' minTickGap={10} />
+							<XAxis dataKey="month" minTickGap={10} />
 							<YAxis />
-							<CartesianGrid strokeDasharray='3 3'/>
+							<CartesianGrid strokeDasharray="3 3" />
 							<Tooltip />
 							<Legend />
 
 							<Bar
-								type='monotone'
-								dataKey='signup_count'
-								name='Signup Count'
-								fill='#8884d8'
+								type="monotone"
+								dataKey="signup_count"
+								name="Signup Count"
+								fill="#8884d8"
 								maxBarSize={20}
 								animationDuration={1000}
 							/>
 							<Bar
-								type='monotone'
-								dataKey='vetted_count'
-								fill='#80b3d3'
-								name='Later Vetted Count'
+								type="monotone"
+								dataKey="vetted_count"
+								fill="#80b3d3"
+								name="Later Vetted Count"
 								maxBarSize={20}
 								animationDuration={1200}
 							/>
 							<Bar
-								type='monotone'
-								dataKey='retain_count'
-								name='Retained Count'
-								fill='#82ca9d'
+								type="monotone"
+								dataKey="retain_count"
+								name="Retained Count"
+								fill="#82ca9d"
 								maxBarSize={20}
 								animationDuration={1400}
 							/>
 						</BarChart>
 					</ResponsiveContainer>
-				}
+				)}
 			</p>
 
-			<p>Signup Count: number of brand new account registrations that month.</p>
-
-			<p>Later Vetted Count: number of those signups who eventually got vetted (at a later date).</p>
+			<p>
+				Signup Count: number of brand new account registrations that
+				month.
+			</p>
 
-			<p>Retained Count: number of those signups who are still a member currently.</p>
+			<p>
+				Later Vetted Count: number of those signups who eventually got
+				vetted (at a later date).
+			</p>
 
+			<p>
+				Retained Count: number of those signups who are still a member
+				currently.
+			</p>
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/InstructorCourses.js b/webclient/src/InstructorCourses.js
index 24d0fe1e..bc9cc99c 100644
--- a/webclient/src/InstructorCourses.js
+++ b/webclient/src/InstructorCourses.js
@@ -1,22 +1,25 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
 import './light.css';
-import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Label, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { BasicTable, staticUrl, requester } from './utils.js';
+import { Button, Form, Header, Label } from 'semantic-ui-react';
+import { requester } from './utils.js';
 
 function InstructorCourseEditor(props) {
 	const { input, setInput, error } = props;
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleUpload = (e, v) =>
+		setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
-	const handleQuill = (v, d, s, e) => s === 'user' && setInput({
-		...input,
-		description: v === '<p><br></p>' ? '' : v,
-	});
+	const handleQuill = (v, d, s, e) =>
+		s === 'user' &&
+		setInput({
+			...input,
+			description: v === '<p><br></p>' ? '' : v,
+		});
 
 	const makeProps = (name) => ({
 		name: name,
@@ -27,39 +30,35 @@ function InstructorCourseEditor(props) {
 
 	const modules = {
 		toolbar: [
-			[{ 'header': [3, false] }],
+			[{ header: [3, false] }],
 			['bold', 'italic', 'underline', 'code'],
-			[{'list': 'ordered'}, {'list': 'bullet'}],
+			[{ list: 'ordered' }, { list: 'bullet' }],
 			['link'],
-			['clean']
+			['clean'],
 		],
 	};
 
 	return (
-		<div className='course-editor'>
-			<Form.Input
-				label='Course Name'
-				fluid
-				{...makeProps('name')}
-			/>
+		<div className="course-editor">
+			<Form.Input label="Course Name" fluid {...makeProps('name')} />
 
 			<Form.Field>
 				<label>
 					Description
-					{input.description && input.description.length > 3000 && (
-						' — ' + (input.description.length+' / 6000')
-					)}
+					{input.description &&
+						input.description.length > 3000 &&
+						' — ' + (input.description.length + ' / 6000')}
 				</label>
 				<ReactQuill
 					value={input.description || ''}
 					modules={modules}
 					onChange={handleQuill}
 				/>
-				{error.description &&
+				{error.description && (
 					<Label pointing prompt>
 						{error.description}
 					</Label>
-				}
+				)}
 			</Form.Field>
 		</div>
 	);
@@ -68,10 +67,16 @@ function InstructorCourseEditor(props) {
 export function InstructorCourseDetail(props) {
 	const { course, setCourse, token } = props;
 	const [open, setOpen] = useState(false);
-	const convertNewlineToPara = (t) => t.split('\n').map(x => '<p>'+x+'</p>').join('')
+	const convertNewlineToPara = (t) =>
+		t
+			.split('\n')
+			.map((x) => '<p>' + x + '</p>')
+			.join('');
 	const [input, setInput] = useState({
 		...course,
-		description: course.is_old ? convertNewlineToPara(course.description) : course.description,
+		description: course.is_old
+			? convertNewlineToPara(course.description)
+			: course.description,
 	});
 	const [error, setError] = useState(false);
 	const [loading, setLoading] = useState(false);
@@ -83,45 +88,50 @@ export function InstructorCourseDetail(props) {
 		setLoading(true);
 		setSuccess(false);
 		const data = { ...input, is_old: false };
-		requester('/courses/'+id+'/', 'PUT', token, data)
-		.then(res => {
-			setSuccess(true);
-			setLoading(false);
-			setError(false);
-			setOpen(false);
-			setCourse({...course, ...res});
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+		requester('/courses/' + id + '/', 'PUT', token, data)
+			.then((res) => {
+				setSuccess(true);
+				setLoading(false);
+				setError(false);
+				setOpen(false);
+				setCourse({ ...course, ...res });
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	return (
 		<div>
-			<Header size='medium'>Instructor Panel</Header>
+			<Header size="medium">Instructor Panel</Header>
 
 			{!open && success && <p>Saved!</p>}
 
-			{open ?
+			{open ? (
 				<Form onSubmit={handleSubmit}>
-					<Header size='small'>Edit Course</Header>
-
-					<InstructorCourseEditor input={input} setInput={setInput} error={error} />
-
-					<Form.Button loading={loading} error={error.non_field_errors}>
+					<Header size="small">Edit Course</Header>
+
+					<InstructorCourseEditor
+						input={input}
+						setInput={setInput}
+						error={error}
+					/>
+
+					<Form.Button
+						loading={loading}
+						error={error.non_field_errors}
+					>
 						Submit
 					</Form.Button>
 				</Form>
-			:
-				<Button onClick={() => setOpen(true)}>
-					Edit Course
-				</Button>
-			}
+			) : (
+				<Button onClick={() => setOpen(true)}>Edit Course</Button>
+			)}
 		</div>
 	);
-};
+}
 
 export function InstructorCourseList(props) {
 	const { courses, setCourses, token } = props;
@@ -137,42 +147,52 @@ export function InstructorCourseList(props) {
 		setSuccess(false);
 		const data = { ...input, is_old: false };
 		requester('/courses/', 'POST', token, data)
-		.then(res => {
-			setSuccess(res.id);
-			setInput({});
-			setLoading(false);
-			setError(false);
-			setOpen(false);
-			setCourses([ ...courses, res ]);
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setSuccess(res.id);
+				setInput({});
+				setLoading(false);
+				setError(false);
+				setOpen(false);
+				setCourses([...courses, res]);
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	return (
 		<div>
-			<Header size='medium'>Instructor Panel</Header>
+			<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!{' '}
+					<Link to={'/courses/' + success}>View the course.</Link>
+				</p>
+			)}
 
-			{open ?
+			{open ? (
 				<Form onSubmit={handleSubmit}>
-					<Header size='small'>Add a Course</Header>
-
-					<InstructorCourseEditor input={input} setInput={setInput} error={error} />
-
-					<Form.Button loading={loading} error={error.non_field_errors}>
+					<Header size="small">Add a Course</Header>
+
+					<InstructorCourseEditor
+						input={input}
+						setInput={setInput}
+						error={error}
+					/>
+
+					<Form.Button
+						loading={loading}
+						error={error.non_field_errors}
+					>
 						Submit
 					</Form.Button>
 				</Form>
-			:
-				<Button onClick={() => setOpen(true)}>
-					Add a Course
-				</Button>
-			}
+			) : (
+				<Button onClick={() => setOpen(true)}>Add a Course</Button>
+			)}
 		</div>
 	);
-};
+}
diff --git a/webclient/src/LoginSignup.js b/webclient/src/LoginSignup.js
index ec8634dc..3caa46dd 100644
--- a/webclient/src/LoginSignup.js
+++ b/webclient/src/LoginSignup.js
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link, useLocation } 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 { Form, Header, Message } from 'semantic-ui-react';
 import { requester } from './utils.js';
 
 export function LoginForm(props) {
@@ -20,25 +20,29 @@ export function LoginForm(props) {
 			setLoading(true);
 			const data = { ...input, username: input.username.toLowerCase() };
 			requester('/rest-auth/login/', 'POST', '', data)
-			.then(res => {
-				setError({});
-				props.setTokenCache(res.key);
-				window.scrollTo(0, 0);
-			})
-			.catch(err => {
-				setLoading(false);
-				console.log(err);
-				setError(err.data);
-			});
+				.then((res) => {
+					setError({});
+					props.setTokenCache(res.key);
+					window.scrollTo(0, 0);
+				})
+				.catch((err) => {
+					setLoading(false);
+					console.log(err);
+					setError(err.data);
+				});
 		}
 	};
 
 	return (
 		<Form
 			onSubmit={handleSubmit}
-			warning={error.non_field_errors && error.non_field_errors[0] === 'Unable to log in with provided credentials.'}
+			warning={
+				error.non_field_errors &&
+				error.non_field_errors[0] ===
+					'Unable to log in with provided credentials.'
+			}
 		>
-			<Header size='medium'>Log In to Spaceport</Header>
+			<Header size="medium">Log In to Spaceport</Header>
 
 			<Message warning>
 				<Message.Header>First time at the new portal?</Message.Header>
@@ -46,17 +50,17 @@ export function LoginForm(props) {
 			</Message>
 
 			<Form.Input
-				label='Username'
-				name='username'
-				placeholder='first.last'
+				label="Username"
+				name="username"
+				placeholder="first.last"
 				onChange={handleChange}
 				error={error.username}
 				autoFocus
 			/>
 			<Form.Input
-				label='Password'
-				name='password'
-				type='password'
+				label="Password"
+				name="password"
+				type="password"
 				onChange={handleChange}
 				error={error.password}
 			/>
@@ -66,11 +70,13 @@ export function LoginForm(props) {
 
 			<Message warning>
 				<Message.Header>Forgot your password?</Message.Header>
-				<p><Link to='/password/reset/'>Click here</Link> to reset it.</p>
+				<p>
+					<Link to="/password/reset/">Click here</Link> to reset it.
+				</p>
 			</Message>
 		</Form>
 	);
-};
+}
 
 export function SignupForm(props) {
 	const [input, setInput] = useState({ email: '' });
@@ -83,46 +89,50 @@ export function SignupForm(props) {
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 
-	const genUsername = () => (
-		input.first_name && input.last_name ?
-			(input.first_name + '.' + input.last_name).toLowerCase().replace(/ /g, '.')
-		:
-			''
-	);
+	const genUsername = () =>
+		input.first_name && input.last_name
+			? (input.first_name + '.' + input.last_name)
+					.toLowerCase()
+					.replace(/ /g, '.')
+			: '';
 
 	const handleSubmit = (e) => {
 		if (loading) return;
 		setLoading(true);
 		input.username = genUsername();
-		const data = { ...input, email: input.email.toLowerCase(), bypass_code: bypass_code };
+		const data = {
+			...input,
+			email: input.email.toLowerCase(),
+			bypass_code: bypass_code,
+		};
 		requester('/registration/', 'POST', '', data)
-		.then(res => {
-			setError({});
-			props.setTokenCache(res.key);
-			window.scrollTo(0, 0);
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setError({});
+				props.setTokenCache(res.key);
+				window.scrollTo(0, 0);
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	return (
 		<Form onSubmit={handleSubmit}>
-			<Header size='medium'>Sign Up to Spaceport</Header>
+			<Header size="medium">Sign Up to Spaceport</Header>
 
-			<Form.Group widths='equal'>
+			<Form.Group widths="equal">
 				<Form.Input
-					label='First Name'
-					name='first_name'
+					label="First Name"
+					name="first_name"
 					fluid
 					onChange={handleChange}
 					error={error.first_name}
 				/>
 				<Form.Input
-					label='Last Name'
-					name='last_name'
+					label="Last Name"
+					name="last_name"
 					fluid
 					onChange={handleChange}
 					error={error.last_name}
@@ -130,31 +140,31 @@ export function SignupForm(props) {
 			</Form.Group>
 
 			<Form.Input
-				label='Username'
-				name='username'
+				label="Username"
+				name="username"
 				value={genUsername()}
 				error={error.username}
 				readOnly
 			/>
 			<Form.Input
-				label='Email'
-				name='email'
+				label="Email"
+				name="email"
 				onChange={handleChange}
 				error={error.email}
 			/>
 
 			<Form.Group grouped>
 				<Form.Radio
-					label='I have an account on the old portal'
-					name='existing_member'
+					label="I have an account on the old portal"
+					name="existing_member"
 					value={'true'}
 					checked={input.existing_member === 'true'}
 					onChange={handleValues}
 					error={!!error.existing_member}
 				/>
 				<Form.Radio
-					label='I am new to Protospace'
-					name='existing_member'
+					label="I am new to Protospace"
+					name="existing_member"
 					value={'false'}
 					checked={input.existing_member === 'false'}
 					onChange={handleValues}
@@ -163,16 +173,16 @@ export function SignupForm(props) {
 			</Form.Group>
 
 			<Form.Input
-				label='Password'
-				name='password1'
-				type='password'
+				label="Password"
+				name="password1"
+				type="password"
 				onChange={handleChange}
 				error={error.password1}
 			/>
 			<Form.Input
-				label='Confirm Password'
-				name='password2'
-				type='password'
+				label="Confirm Password"
+				name="password2"
+				type="password"
 				onChange={handleChange}
 				error={error.password2}
 			/>
@@ -182,4 +192,4 @@ export function SignupForm(props) {
 			</Form.Button>
 		</Form>
 	);
-};
+}
diff --git a/webclient/src/ManageScroll.js b/webclient/src/ManageScroll.js
index ded7bec9..1f8af349 100644
--- a/webclient/src/ManageScroll.js
+++ b/webclient/src/ManageScroll.js
@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useReducer, useContext } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
 
 let scrollPositions = {};
 let timeout = null;
@@ -24,7 +24,7 @@ export function ManageScroll() {
 		window.addEventListener('scroll', scrollListener);
 		return () => {
 			window.removeEventListener('scroll', scrollListener);
-		}
+		};
 	}, []);
 
 	useEffect(() => {
@@ -38,7 +38,5 @@ export function ManageScroll() {
 		}
 	}, [history.location]);
 
-	return (
-		null
-	);
-};
+	return null;
+}
diff --git a/webclient/src/Misc.js b/webclient/src/Misc.js
index cf1a4f70..fced5a1b 100644
--- a/webclient/src/Misc.js
+++ b/webclient/src/Misc.js
@@ -1,37 +1,44 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import React from 'react';
+import { Link } 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 { Container, Message } from 'semantic-ui-react';
 
 export function PleaseLogin() {
 	return (
 		<Container text>
 			<Message warning>
-				<Message.Header>You must login before you can do that!</Message.Header>
-				<p>Visit our <Link to='/'>login page</Link>, then try again.</p>
+				<Message.Header>
+					You must login before you can do that!
+				</Message.Header>
+				<p>
+					Visit our <Link to="/">login page</Link>, then try again.
+				</p>
 			</Message>
 
-			<img className='photo-404' src='/404.jpg' />
+			<img className="photo-404" src="/404.jpg" />
 			<p style={{ textAlign: 'right' }}>
 				<i>Space shuttle Endeavour, NASA (2011)</i>
 			</p>
 		</Container>
 	);
-};
+}
 
 export function NotFound() {
 	return (
 		<Container text>
 			<Message warning>
-				<Message.Header>The page you requested can't be found!</Message.Header>
-				<p>Visit our <Link to='/'>home page</Link> if you are lost.</p>
+				<Message.Header>
+					The page you requested can't be found!
+				</Message.Header>
+				<p>
+					Visit our <Link to="/">home page</Link> if you are lost.
+				</p>
 			</Message>
 
-			<img className='photo-404' src='/404.jpg' />
+			<img className="photo-404" src="/404.jpg" />
 			<p style={{ textAlign: 'right' }}>
 				<i>Space shuttle Endeavour, NASA (2011)</i>
 			</p>
 		</Container>
 	);
-};
-
+}
diff --git a/webclient/src/PasswordReset.js b/webclient/src/PasswordReset.js
index 5f8e76ad..3aa09f7f 100644
--- a/webclient/src/PasswordReset.js
+++ b/webclient/src/PasswordReset.js
@@ -1,8 +1,7 @@
-import React, { useState, useEffect, useReducer, useContext } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
-import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
-import { NotFound } from './Misc.js';
+import React, { useState } from 'react';
+import { useParams, useHistory } from 'react-router-dom';
+import { Container, Form, Grid, Header, Message } from 'semantic-ui-react';
+import { requester } from './utils.js';
 
 function ResetForm() {
 	const [input, setInput] = useState({});
@@ -17,16 +16,16 @@ function ResetForm() {
 		if (loading) return;
 		setLoading(true);
 		requester('/password/reset/', 'POST', '', input)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError({});
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError({});
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -39,16 +38,16 @@ function ResetForm() {
 	return (
 		<Form onSubmit={handleSubmit} error={error.email == 'Not found.'}>
 			<Form.Input
-				label='Email'
-				name='email'
+				label="Email"
+				name="email"
 				onChange={handleChange}
 				error={error.email}
 			/>
 
 			<Message
 				error
-				header='Email not found in Spaceport'
-				content='You can only use this form if you have an account with this new member portal.'
+				header="Email not found in Spaceport"
+				content="You can only use this form if you have an account with this new member portal."
 			/>
 
 			<Form.Button loading={loading} error={error.non_field_errors}>
@@ -57,7 +56,7 @@ function ResetForm() {
 			{success && <div>Success! Be sure to check your spam folder.</div>}
 		</Form>
 	);
-};
+}
 
 function ConfirmForm() {
 	const { uid, token } = useParams();
@@ -74,18 +73,18 @@ function ConfirmForm() {
 		if (loading) return;
 		setLoading(true);
 		requester('/password/reset/confirm/', 'POST', '', input)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError({});
-			history.push('/');
-			window.scrollTo(0, 0);
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError({});
+				history.push('/');
+				window.scrollTo(0, 0);
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -98,17 +97,21 @@ function ConfirmForm() {
 	return (
 		<Form onSubmit={handleSubmit}>
 			<Form.Input
-				label='New Password'
-				type='password'
+				label="New Password"
+				type="password"
 				{...makeProps('new_password1')}
 			/>
 			<Form.Input
-				label='Confirm Password'
-				type='password'
+				label="Confirm Password"
+				type="password"
 				{...makeProps('new_password2')}
 			/>
 
-			{(error.token || error.uid) && <p>Error: Invalid password reset URL! Try doing another reset.</p>}
+			{(error.token || error.uid) && (
+				<p>
+					Error: Invalid password reset URL! Try doing another reset.
+				</p>
+			)}
 
 			<Form.Button loading={loading} error={error.non_field_errors}>
 				Submit
@@ -116,17 +119,17 @@ function ConfirmForm() {
 			{success && <div>Success!</div>}
 		</Form>
 	);
-};
-
+}
 
 export function PasswordReset() {
 	return (
 		<Container>
-			<Header size='large'>Password Reset</Header>
+			<Header size="large">Password Reset</Header>
 			<Grid stackable columns={2}>
 				<Grid.Column>
 					<p>
-						Enter your email and we will send you a password reset link.
+						Enter your email and we will send you a password reset
+						link.
 					</p>
 
 					<ResetForm />
@@ -134,21 +137,19 @@ export function PasswordReset() {
 			</Grid>
 		</Container>
 	);
-};
+}
 
 export function ConfirmReset() {
 	return (
 		<Container>
-			<Header size='large'>Password Reset</Header>
+			<Header size="large">Password Reset</Header>
 			<Grid stackable columns={2}>
 				<Grid.Column>
-					<p>
-						Choose a new password.
-					</p>
+					<p>Choose a new password.</p>
 
 					<ConfirmForm />
 				</Grid.Column>
 			</Grid>
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/Paste.js b/webclient/src/Paste.js
index f8ba1180..8dbd2785 100644
--- a/webclient/src/Paste.js
+++ b/webclient/src/Paste.js
@@ -1,8 +1,6 @@
-import React, { useState, useEffect, useReducer, useContext } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
-import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
-import { NotFound } from './Misc.js';
+import React, { useState, useEffect, useReducer } from 'react';
+import { Button, Container, Form, Header } from 'semantic-ui-react';
+import { requester } from './utils.js';
 
 function PasteForm(props) {
 	const { token, input, setInput } = props;
@@ -17,17 +15,17 @@ function PasteForm(props) {
 		if (loading) return;
 		setLoading(true);
 		requester('/paste/', 'POST', token, input)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError({});
-			setInput(res);
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError({});
+				setInput(res);
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -45,53 +43,54 @@ function PasteForm(props) {
 				{...makeProps('paste')}
 			/>
 
-			{!!token &&<Form.Button loading={loading} error={error.non_field_errors}>
-				Submit
-			</Form.Button>}
+			{!!token && (
+				<Form.Button loading={loading} error={error.non_field_errors}>
+					Submit
+				</Form.Button>
+			)}
 			{success && <div>Success!</div>}
 		</Form>
 	);
-};
+}
 
 let pasteCache = 'Loading...';
 
 export function Paste(props) {
 	const { token } = props;
 	const [input, setInput] = useState({ paste: pasteCache });
-	const [refreshCount, refreshPaste] = useReducer(x => x + 1, 0);
+	const [refreshCount, refreshPaste] = useReducer((x) => x + 1, 0);
 
 	useEffect(() => {
 		requester('/paste/', 'GET', token)
-		.then(res => {
-			setInput({ paste: res.paste });
-			pasteCache = res.paste;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setInput({ paste: res.paste });
+				pasteCache = res.paste;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, [refreshCount]);
 
 	return (
 		<Container>
-			<Header size='large'>Transporter</Header>
+			<Header size="large">Transporter</Header>
 
 			<p>
-				Use this to quickly share info with people across devices.
-				For example: your LAN party server IP address, a config file,
-				a public key, an Arduino sketch, or a URL.
+				Use this to quickly share info with people across devices. For
+				example: your LAN party server IP address, a config file, a
+				public key, an Arduino sketch, or a URL.
 			</p>
 
 			<p>
-				Members can write, anyone can read. Everyone shares what's below.
+				Members can write, anyone can read. Everyone shares what's
+				below.
 			</p>
 
 			<p>
-				<Button onClick={refreshPaste}>
-					Refresh
-				</Button>
+				<Button onClick={refreshPaste}>Refresh</Button>
 			</p>
 
 			<PasteForm {...props} input={input} setInput={setInput} />
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/PayPal.js b/webclient/src/PayPal.js
index db58e448..5ea9cf2f 100644
--- a/webclient/src/PayPal.js
+++ b/webclient/src/PayPal.js
@@ -1,25 +1,49 @@
-import React, { useState, useEffect, useReducer } from 'react';
+import React from 'react';
 
 export function PayPalPayNow(props) {
 	const { amount, custom, name } = props;
 
 	return (
-		<div className='paypal-container'>
-			<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
-				<input type='hidden' name='cmd' value='_xclick' />
-				<input type='hidden' name='business' value='info@protospace.ca' />
-				<input type='hidden' name='lc' value='CA' />
-				<input type='hidden' name='item_name' value={name} />
-				<input type='hidden' name='amount' value={amount} />
-				<input type='hidden' name='custom' value={custom} />
-				<input type='hidden' name='currency_code' value='CAD' />
-				<input type='hidden' name='button_subtype' value='services' />
-				<input type='hidden' name='no_note' value='0' />
-				<input type='hidden' name='tax_rate' value='0.000' />
-				<input type='hidden' name='shipping' value='0.00' />
-				<input type='hidden' name='bn' value='PP-BuyNowBF:btn_paynowCC_LG.gif:NonHostedGuest' />
-				<input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!' />
-				<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1' />
+		<div className="paypal-container">
+			<form
+				action="https://www.paypal.com/cgi-bin/webscr"
+				method="post"
+				target="_top"
+			>
+				<input type="hidden" name="cmd" value="_xclick" />
+				<input
+					type="hidden"
+					name="business"
+					value="info@protospace.ca"
+				/>
+				<input type="hidden" name="lc" value="CA" />
+				<input type="hidden" name="item_name" value={name} />
+				<input type="hidden" name="amount" value={amount} />
+				<input type="hidden" name="custom" value={custom} />
+				<input type="hidden" name="currency_code" value="CAD" />
+				<input type="hidden" name="button_subtype" value="services" />
+				<input type="hidden" name="no_note" value="0" />
+				<input type="hidden" name="tax_rate" value="0.000" />
+				<input type="hidden" name="shipping" value="0.00" />
+				<input
+					type="hidden"
+					name="bn"
+					value="PP-BuyNowBF:btn_paynowCC_LG.gif:NonHostedGuest"
+				/>
+				<input
+					type="image"
+					src="https://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif"
+					border="0"
+					name="submit"
+					alt="PayPal - The safer, easier way to pay online!"
+				/>
+				<img
+					alt=""
+					border="0"
+					src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"
+					width="1"
+					height="1"
+				/>
 			</form>
 		</div>
 	);
@@ -29,22 +53,46 @@ export function PayPalSubscribe(props) {
 	const { amount, custom, name } = props;
 
 	return (
-		<div className='paypal-container'>
-			<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
-				<input type='hidden' name='cmd' value='_xclick-subscriptions' />
-				<input type='hidden' name='business' value='info@protospace.ca' />
-				<input type='hidden' name='lc' value='US' />
-				<input type='hidden' name='item_name' value={name} />
-				<input type='hidden' name='no_note' value='1' />
-				<input type='hidden' name='src' value='1' />
-				<input type='hidden' name='a3' value={amount} />
-				<input type='hidden' name='custom' value={custom} />
-				<input type='hidden' name='p3' value='1' />
-				<input type='hidden' name='t3' value='M' />
-				<input type='hidden' name='currency_code' value='CAD' />
-				<input type='hidden' name='bn' value='PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHostedGuest' />
-				<input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!' />
-				<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1' />
+		<div className="paypal-container">
+			<form
+				action="https://www.paypal.com/cgi-bin/webscr"
+				method="post"
+				target="_top"
+			>
+				<input type="hidden" name="cmd" value="_xclick-subscriptions" />
+				<input
+					type="hidden"
+					name="business"
+					value="info@protospace.ca"
+				/>
+				<input type="hidden" name="lc" value="US" />
+				<input type="hidden" name="item_name" value={name} />
+				<input type="hidden" name="no_note" value="1" />
+				<input type="hidden" name="src" value="1" />
+				<input type="hidden" name="a3" value={amount} />
+				<input type="hidden" name="custom" value={custom} />
+				<input type="hidden" name="p3" value="1" />
+				<input type="hidden" name="t3" value="M" />
+				<input type="hidden" name="currency_code" value="CAD" />
+				<input
+					type="hidden"
+					name="bn"
+					value="PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHostedGuest"
+				/>
+				<input
+					type="image"
+					src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif"
+					border="0"
+					name="submit"
+					alt="PayPal - The safer, easier way to pay online!"
+				/>
+				<img
+					alt=""
+					border="0"
+					src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"
+					width="1"
+					height="1"
+				/>
 			</form>
 		</div>
 	);
@@ -54,25 +102,49 @@ export function PayPalSubscribeDeal(props) {
 	const { amount, custom, name } = props;
 
 	return (
-		<div className='paypal-container'>
-			<form action='https://www.paypal.com/cgi-bin/webscr' method='post' target='_top'>
-				<input type='hidden' name='cmd' value='_xclick-subscriptions' />
-				<input type='hidden' name='business' value='info@protospace.ca' />
-				<input type='hidden' name='lc' value='US' />
-				<input type='hidden' name='item_name' value={name}/>
-				<input type='hidden' name='no_note' value='1' />
-				<input type='hidden' name='a1' value={amount * 2} />
-				<input type='hidden' name='p1' value='3' />
-				<input type='hidden' name='t1' value='M' />
-				<input type='hidden' name='src' value='1' />
-				<input type='hidden' name='a3' value={amount} />
-				<input type='hidden' name='custom' value={custom} />
-				<input type='hidden' name='p3' value='1' />
-				<input type='hidden' name='t3' value='M' />
-				<input type='hidden' name='currency_code' value='CAD' />
-				<input type='hidden' name='bn' value='PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHostedGuest' />
-				<input type='image' src='https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif' border='0' name='submit' alt='PayPal - The safer, easier way to pay online!' />
-				<img alt='' border='0' src='https://www.paypalobjects.com/en_US/i/scr/pixel.gif' width='1' height='1' />
+		<div className="paypal-container">
+			<form
+				action="https://www.paypal.com/cgi-bin/webscr"
+				method="post"
+				target="_top"
+			>
+				<input type="hidden" name="cmd" value="_xclick-subscriptions" />
+				<input
+					type="hidden"
+					name="business"
+					value="info@protospace.ca"
+				/>
+				<input type="hidden" name="lc" value="US" />
+				<input type="hidden" name="item_name" value={name} />
+				<input type="hidden" name="no_note" value="1" />
+				<input type="hidden" name="a1" value={amount * 2} />
+				<input type="hidden" name="p1" value="3" />
+				<input type="hidden" name="t1" value="M" />
+				<input type="hidden" name="src" value="1" />
+				<input type="hidden" name="a3" value={amount} />
+				<input type="hidden" name="custom" value={custom} />
+				<input type="hidden" name="p3" value="1" />
+				<input type="hidden" name="t3" value="M" />
+				<input type="hidden" name="currency_code" value="CAD" />
+				<input
+					type="hidden"
+					name="bn"
+					value="PP-SubscriptionsBF:btn_subscribeCC_LG.gif:NonHostedGuest"
+				/>
+				<input
+					type="image"
+					src="https://www.paypalobjects.com/en_US/i/btn/btn_subscribeCC_LG.gif"
+					border="0"
+					name="submit"
+					alt="PayPal - The safer, easier way to pay online!"
+				/>
+				<img
+					alt=""
+					border="0"
+					src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"
+					width="1"
+					height="1"
+				/>
 			</form>
 		</div>
 	);
diff --git a/webclient/src/Paymaster.js b/webclient/src/Paymaster.js
index 1e344cdc..1a640fab 100644
--- a/webclient/src/Paymaster.js
+++ b/webclient/src/Paymaster.js
@@ -1,10 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import './light.css';
-import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import moment from 'moment';
-import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
-import { NotFound } from './Misc.js';
+import { Container, Grid, Header, Input } from 'semantic-ui-react';
 import { PayPalPayNow, PayPalSubscribe } from './PayPal.js';
 
 export function Paymaster(props) {
@@ -17,17 +14,20 @@ export function Paymaster(props) {
 
 	return (
 		<Container>
-			<Header size='large'>Paymaster</Header>
+			<Header size="large">Paymaster</Header>
 			<p>Use these buttons to send money to Protospace.</p>
 
-			<Header size='medium'>Snacks, Pop, Coffee</Header>
+			<Header size="medium">Snacks, Pop, Coffee</Header>
 			<Grid stackable padded columns={3}>
 				<Grid.Column>
 					<p>Pay $5.00:</p>
 					<PayPalPayNow
 						amount={5}
-						name='Protospace Snacks / Pop'
-						custom={JSON.stringify({ category: 'Snacks', member: user.member.id })}
+						name="Protospace Snacks / Pop"
+						custom={JSON.stringify({
+							category: 'Snacks',
+							member: user.member.id,
+						})}
 					/>
 				</Grid.Column>
 
@@ -35,39 +35,43 @@ export function Paymaster(props) {
 					<p>Pay $10.00:</p>
 					<PayPalPayNow
 						amount={10}
-						name='Protospace Snacks / Pop'
-						custom={JSON.stringify({ category: 'Snacks', member: user.member.id })}
+						name="Protospace Snacks / Pop"
+						custom={JSON.stringify({
+							category: 'Snacks',
+							member: user.member.id,
+						})}
 					/>
 				</Grid.Column>
 
 				<Grid.Column>
 					Custom amount:
-
-					<div className='pay-custom'>
+					<div className="pay-custom">
 						<Input
 							fluid
 							label={{ basic: true, content: '$' }}
-							labelPosition='left'
+							labelPosition="left"
 							value={pop}
 							onChange={(e, v) => setPop(v.value)}
 						/>
 					</div>
-
 					<PayPalPayNow
 						amount={pop}
-						name='Protospace Donation'
-						custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
+						name="Protospace Donation"
+						custom={JSON.stringify({
+							category: 'Donation',
+							member: user.member.id,
+						})}
 					/>
 				</Grid.Column>
 			</Grid>
 
-			<Header size='medium'>Member Dues</Header>
+			<Header size="medium">Member Dues</Header>
 			<Grid stackable padded columns={3}>
 				<Grid.Column>
 					<p>Pay ${monthly_fees}.00 once:</p>
 					<PayPalPayNow
 						amount={monthly_fees}
-						name='Protospace Membership'
+						name="Protospace Membership"
 						custom={JSON.stringify({ member: user.member.id })}
 					/>
 				</Grid.Column>
@@ -76,7 +80,7 @@ export function Paymaster(props) {
 					<p>Subscribe ${monthly_fees}.00 / month:</p>
 					<PayPalSubscribe
 						amount={monthly_fees}
-						name='Protospace Membership'
+						name="Protospace Membership"
 						custom={JSON.stringify({ member: user.member.id })}
 					/>
 				</Grid.Column>
@@ -85,21 +89,27 @@ export function Paymaster(props) {
 					<p>Pay ${monthly_fees * 11}.00 for a year:</p>
 					<PayPalPayNow
 						amount={monthly_fees * 11}
-						name='Protospace Membership'
-						custom={JSON.stringify({ deal: 12, member: user.member.id })}
+						name="Protospace Membership"
+						custom={JSON.stringify({
+							deal: 12,
+							member: user.member.id,
+						})}
 					/>
 					<p>...get one month for free!</p>
 				</Grid.Column>
 			</Grid>
 
-			<Header size='medium'>Donate</Header>
+			<Header size="medium">Donate</Header>
 			<Grid stackable padded columns={3}>
 				<Grid.Column>
 					<p>Donate $5.00:</p>
 					<PayPalPayNow
 						amount={5}
-						name='Protospace Donation'
-						custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
+						name="Protospace Donation"
+						custom={JSON.stringify({
+							category: 'Donation',
+							member: user.member.id,
+						})}
 					/>
 				</Grid.Column>
 
@@ -107,57 +117,66 @@ export function Paymaster(props) {
 					<p>Donate $10.00:</p>
 					<PayPalPayNow
 						amount={10}
-						name='Protospace Donation'
-						custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
+						name="Protospace Donation"
+						custom={JSON.stringify({
+							category: 'Donation',
+							member: user.member.id,
+						})}
 					/>
 				</Grid.Column>
 
 				<Grid.Column>
 					Custom amount:
-
-					<div className='pay-custom'>
+					<div className="pay-custom">
 						<Input
 							fluid
 							label={{ basic: true, content: '$' }}
-							labelPosition='left'
+							labelPosition="left"
 							value={donate}
 							onChange={(e, v) => setDonate(v.value)}
 						/>
 					</div>
-
 					<PayPalPayNow
 						amount={donate}
-						name='Protospace Donation'
-						custom={JSON.stringify({ category: 'Donation', member: user.member.id })}
+						name="Protospace Donation"
+						custom={JSON.stringify({
+							category: 'Donation',
+							member: user.member.id,
+						})}
 					/>
 				</Grid.Column>
 			</Grid>
 
-			<Header size='medium'>Locker Storage</Header>
+			<Header size="medium">Locker Storage</Header>
 
-			<p>Confirm location and availability with <Link to='/members/392'>Scott Young</Link> before subscribing.</p>
+			<p>
+				Confirm location and availability with{' '}
+				<Link to="/members/392">Scott Young</Link> before subscribing.
+			</p>
 
 			<Grid stackable padded columns={1}>
 				<Grid.Column>
 					Custom amount:
-
-					<div className='pay-custom'>
+					<div className="pay-custom">
 						<Input
 							fluid
 							label={{ basic: true, content: '$' }}
-							labelPosition='left'
+							labelPosition="left"
 							value={locker}
 							onChange={(e, v) => setLocker(v.value)}
 						/>
 					</div>
-
 					<PayPalSubscribe
 						amount={locker}
-						name='Protospace Locker'
-						custom={JSON.stringify({ memo: 'Locker Rental', category: 'OnAcct', member: user.member.id })}
+						name="Protospace Locker"
+						custom={JSON.stringify({
+							memo: 'Locker Rental',
+							category: 'OnAcct',
+							member: user.member.id,
+						})}
 					/>
 				</Grid.Column>
 			</Grid>
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/Training.js b/webclient/src/Training.js
index b099c023..c555256e 100644
--- a/webclient/src/Training.js
+++ b/webclient/src/Training.js
@@ -1,23 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import React from 'react';
+import { Link } 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 { Container, Header, Popup, Table } from 'semantic-ui-react';
 import moment from 'moment';
-import { requester, getInstructor } from './utils.js';
-import { NotFound, PleaseLogin } from './Misc.js';
+import { getInstructor } from './utils.js';
 
 export function CertList(props) {
 	const { member } = props;
 
-	const MoreCert = (tools) => (<Popup content={
-		<>
-			<p>Allows access to:</p>
-			<p>{tools}</p>
-		</>
-	} trigger={<a>[more]</a>} />);
+	const MoreCert = (tools) => (
+		<Popup
+			content={
+				<>
+					<p>Allows access to:</p>
+					<p>{tools}</p>
+				</>
+			}
+			trigger={<a>[more]</a>}
+		/>
+	);
 
 	return (
-		<Table basic='very'>
+		<Table basic="very">
 			<Table.Header>
 				<Table.Row>
 					<Table.HeaderCell>Name</Table.HeaderCell>
@@ -28,55 +32,132 @@ export function CertList(props) {
 
 			<Table.Body>
 				<Table.Row>
-					<Table.Cell>Common {MoreCert('Anything larger than a screwdriver.')}</Table.Cell>
-					<Table.Cell>{member.vetted_date || member.orientation_date ? 'Yes' : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/249'>New Members: Orientation and Basic Safety</Link></Table.Cell>
+					<Table.Cell>
+						Common {MoreCert('Anything larger than a screwdriver.')}
+					</Table.Cell>
+					<Table.Cell>
+						{member.vetted_date || member.orientation_date
+							? 'Yes'
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/249">
+							New Members: Orientation and Basic Safety
+						</Link>
+					</Table.Cell>
 				</Table.Row>
 				<Table.Row>
-					<Table.Cell>Wood 1 {MoreCert('Table saw, band saw, chop saw, router.')}</Table.Cell>
-					<Table.Cell>{member.wood_cert_date ? 'Yes, ' + member.wood_cert_date : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/261'>Woodworking Tools 1: Intro to Saws</Link></Table.Cell>
+					<Table.Cell>
+						Wood 1{' '}
+						{MoreCert('Table saw, band saw, chop saw, router.')}
+					</Table.Cell>
+					<Table.Cell>
+						{member.wood_cert_date
+							? 'Yes, ' + member.wood_cert_date
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/261">
+							Woodworking Tools 1: Intro to Saws
+						</Link>
+					</Table.Cell>
 				</Table.Row>
 				<Table.Row>
-					<Table.Cell>Wood 2 {MoreCert('Jointer, thickness planer, drum sander.')}</Table.Cell>
-					<Table.Cell>{member.wood2_cert_date ? 'Yes, ' + member.wood2_cert_date : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/401'>Woodworking Tools 2: Jointer, Thickness Planer, Drum Sander</Link></Table.Cell>
+					<Table.Cell>
+						Wood 2{' '}
+						{MoreCert('Jointer, thickness planer, drum sander.')}
+					</Table.Cell>
+					<Table.Cell>
+						{member.wood2_cert_date
+							? 'Yes, ' + member.wood2_cert_date
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/401">
+							Woodworking Tools 2: Jointer, Thickness Planer, Drum
+							Sander
+						</Link>
+					</Table.Cell>
 				</Table.Row>
 				<Table.Row>
-					<Table.Cell>Lathe {MoreCert('Manual metal lathe.')}</Table.Cell>
-					<Table.Cell>{member.lathe_cert_date ? 'Yes, ' + member.lathe_cert_date : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/281'>Metal: Metal Cutting & Manual Lathe</Link></Table.Cell>
+					<Table.Cell>
+						Lathe {MoreCert('Manual metal lathe.')}
+					</Table.Cell>
+					<Table.Cell>
+						{member.lathe_cert_date
+							? 'Yes, ' + member.lathe_cert_date
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/281">
+							Metal: Metal Cutting & Manual Lathe
+						</Link>
+					</Table.Cell>
 				</Table.Row>
 				<Table.Row>
-					<Table.Cell>Mill {MoreCert('Manual metal mill.')}</Table.Cell>
-					<Table.Cell>{member.mill_cert_date ? 'Yes, ' + member.mill_cert_date : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/283'>Metal: Manual Mill & Advanced Lathe</Link></Table.Cell>
+					<Table.Cell>
+						Mill {MoreCert('Manual metal mill.')}
+					</Table.Cell>
+					<Table.Cell>
+						{member.mill_cert_date
+							? 'Yes, ' + member.mill_cert_date
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/283">
+							Metal: Manual Mill & Advanced Lathe
+						</Link>
+					</Table.Cell>
 				</Table.Row>
 				<Table.Row>
-					<Table.Cell>CNC {MoreCert('Tormach metal CNC, CNC wood router.')}</Table.Cell>
-					<Table.Cell>{member.cnc_cert_date ? 'Yes, ' + member.cnc_cert_date : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/259'>Tormach: CAM and Tormach Intro</Link></Table.Cell>
+					<Table.Cell>
+						CNC {MoreCert('Tormach metal CNC, CNC wood router.')}
+					</Table.Cell>
+					<Table.Cell>
+						{member.cnc_cert_date
+							? 'Yes, ' + member.cnc_cert_date
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/259">
+							Tormach: CAM and Tormach Intro
+						</Link>
+					</Table.Cell>
 				</Table.Row>
 				<Table.Row>
 					<Table.Cell>Rabbit Laser</Table.Cell>
-					<Table.Cell>{member.rabbit_cert_date ? 'Yes, ' + member.rabbit_cert_date : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/247'>Laser: Cutting and Engraving</Link></Table.Cell>
+					<Table.Cell>
+						{member.rabbit_cert_date
+							? 'Yes, ' + member.rabbit_cert_date
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/247">
+							Laser: Cutting and Engraving
+						</Link>
+					</Table.Cell>
 				</Table.Row>
 				<Table.Row>
 					<Table.Cell>Trotec Laser</Table.Cell>
-					<Table.Cell>{member.trotec_cert_date ? 'Yes, ' + member.trotec_cert_date : 'No'}</Table.Cell>
-					<Table.Cell><Link to='/courses/321'>Laser: Trotec Course</Link></Table.Cell>
+					<Table.Cell>
+						{member.trotec_cert_date
+							? 'Yes, ' + member.trotec_cert_date
+							: 'No'}
+					</Table.Cell>
+					<Table.Cell>
+						<Link to="/courses/321">Laser: Trotec Course</Link>
+					</Table.Cell>
 				</Table.Row>
 			</Table.Body>
 		</Table>
 	);
-};
+}
 
 export function TrainingList(props) {
 	const { training } = props;
 
 	return (
-		<Table basic='very'>
+		<Table basic="very">
 			<Table.Header>
 				<Table.Row>
 					<Table.HeaderCell>Course / Event Name</Table.HeaderCell>
@@ -87,41 +168,55 @@ export function TrainingList(props) {
 			</Table.Header>
 
 			<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>
-							<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>{getInstructor(x.session)}</Table.Cell>
-					</Table.Row>
-				)}
+				{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>
+								<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>{getInstructor(x.session)}</Table.Cell>
+						</Table.Row>
+					))}
 			</Table.Body>
 		</Table>
 	);
-};
-
+}
 
 export function Training(props) {
 	const { user } = props;
 
 	return (
 		<Container>
-			<Header size='large'>Certifications</Header>
+			<Header size="large">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>
+			<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'>Training</Header>
+			<Header size="large">Training</Header>
 
-			{user.training.length ?
+			{user.training.length ? (
 				<TrainingList training={user.training} />
-			:
+			) : (
 				<p>No training yet! Sign up for a course to take a class.</p>
-			}
-
+			)}
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/utils.js b/webclient/src/utils.js
index 5585257b..299584c9 100644
--- a/webclient/src/utils.js
+++ b/webclient/src/utils.js
@@ -1,12 +1,17 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import { Table } from 'semantic-ui-react';
 
-export const siteUrl = window.location.protocol + '//' + window.location.hostname;
-export const apiUrl = window.location.protocol + '//api.' + window.location.hostname;
-export const staticUrl = window.location.protocol + '//static.' + window.location.hostname;
+export const siteUrl =
+	window.location.protocol + '//' + window.location.hostname;
+export const apiUrl =
+	window.location.protocol + '//api.' + window.location.hostname;
+export const staticUrl =
+	window.location.protocol + '//static.' + window.location.hostname;
 
-export const isAdmin = (user) => user.is_staff || user.member.is_director || user.member.is_staff;
-export const isInstructor = (user) => isAdmin(user) || user.member.is_instructor;
+export const isAdmin = (user) =>
+	user.is_staff || user.member.is_director || user.member.is_staff;
+export const isInstructor = (user) =>
+	isAdmin(user) || user.member.is_instructor;
 
 export const getInstructor = (x) => {
 	if (x.course === 413 || x.course === 317 || x.course === 273) {
@@ -17,21 +22,21 @@ export const getInstructor = (x) => {
 };
 
 export const statusColor = {
-	'Prepaid': 'green',
-	'Current': 'green',
-	'Due': 'yellow',
-	'Overdue': 'red',
+	Prepaid: 'green',
+	Current: 'green',
+	Due: 'yellow',
+	Overdue: 'red',
 	'Former Member': 'black',
 };
 
 export const BasicTable = (props) => (
-	<Table collapsing padded unstackable basic='very'>
+	<Table collapsing padded unstackable basic="very">
 		{props.children}
 	</Table>
 );
 
 export const requester = (route, method, token, data) => {
-	let options = {headers: {}};
+	let options = { headers: {} };
 
 	if (token) {
 		options.headers.Authorization = 'Token ' + token;
@@ -41,7 +46,7 @@ export const requester = (route, method, token, data) => {
 		// pass
 	} else if (['POST', 'PUT', 'PATCH'].includes(method)) {
 		const formData = new FormData();
-		Object.keys(data).forEach(key =>
+		Object.keys(data).forEach((key) =>
 			formData.append(key, data[key] === null ? '' : data[key])
 		);
 
@@ -63,42 +68,41 @@ export const requester = (route, method, token, data) => {
 		const error = new Error(JSON.stringify(data));
 		error.data = data;
 		return error;
-	}
+	};
 
 	return fetch(apiUrl + route, options)
-	.then(response => {
-		if (!response.ok) {
-			throw customError(response);
-		}
+		.then((response) => {
+			if (!response.ok) {
+				throw customError(response);
+			}
 
-		if (method === 'DELETE') {
-			return {};
-		}
+			if (method === 'DELETE') {
+				return {};
+			}
 
-		const contentType = response.headers.get('content-type');
-		if (contentType && contentType.indexOf('application/json') !== -1) {
-			return response.json();
-		} else {
-			return response;
-		}
-	})
-	.catch(error => {
-		const code = error.data ? error.data.status : null;
-		if (code == 413) {
-			throw customError({non_field_errors: ['File too big']});
-		} else if (code >= 400 && code < 500) {
-			return error.data.json()
-			.then(result => {
-				if (result.detail == 'Invalid token.') {
-					localStorage.clear();
-					window.location = '/';
-				}
-				throw customError(result);
-			});
-		} else if (code >= 500 && code < 600) {
-			throw customError({non_field_errors: ['Server Error']});
-		} else {
-			throw customError({non_field_errors: ['Network Error']});
-		}
-	});
-}
+			const contentType = response.headers.get('content-type');
+			if (contentType && contentType.indexOf('application/json') !== -1) {
+				return response.json();
+			} else {
+				return response;
+			}
+		})
+		.catch((error) => {
+			const code = error.data ? error.data.status : null;
+			if (code == 413) {
+				throw customError({ non_field_errors: ['File too big'] });
+			} else if (code >= 400 && code < 500) {
+				return error.data.json().then((result) => {
+					if (result.detail == 'Invalid token.') {
+						localStorage.clear();
+						window.location = '/';
+					}
+					throw customError(result);
+				});
+			} else if (code >= 500 && code < 600) {
+				throw customError({ non_field_errors: ['Server Error'] });
+			} else {
+				throw customError({ non_field_errors: ['Network Error'] });
+			}
+		});
+};

From 6bd1a49d22eeb47c5b82580bfd8fd9f5dd20467a Mon Sep 17 00:00:00 2001
From: Elijah Lucian <elijahlucian@gmail.com>
Date: Sun, 2 May 2021 21:41:44 -0600
Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webclient/src/AdminMembers.js      | 675 +++++++++++++++++------------
 webclient/src/AdminTransactions.js | 190 ++++----
 webclient/src/Classes.js           | 289 +++++++-----
 webclient/src/Home.js              | 530 +++++++++++++++-------
 webclient/src/InstructorCourses.js |   3 -
 webclient/src/Misc.js              |   6 +-
 webclient/src/Transactions.js      | 431 ++++++++++--------
 7 files changed, 1326 insertions(+), 798 deletions(-)

diff --git a/webclient/src/AdminMembers.js b/webclient/src/AdminMembers.js
index 79411a16..459ea548 100644
--- a/webclient/src/AdminMembers.js
+++ b/webclient/src/AdminMembers.js
@@ -1,11 +1,20 @@
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import './light.css';
-import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import {
+	Button,
+	Checkbox,
+	Dimmer,
+	Form,
+	Header,
+	Icon,
+	Image,
+	Segment,
+	Table,
+} from 'semantic-ui-react';
 import moment from 'moment-timezone';
 import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
 import { TrainingList } from './Training.js';
-import { NotFound } from './Misc.js';
 
 function AdminCardDetail(props) {
 	const { token, result, card } = props;
@@ -17,40 +26,38 @@ function AdminCardDetail(props) {
 	const id = card.id;
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
-	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
 	const handleSubmit = (e) => {
 		if (loading) return;
 		setLoading(true);
 		setSuccess(false);
 		const data = { ...input, member_id: result.member.id };
-		requester('/cards/'+id+'/', 'PUT', token, data)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError(false);
-			setInput(res);
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+		requester('/cards/' + id + '/', 'PUT', token, data)
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError(false);
+				setInput(res);
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const handleDelete = (e) => {
 		e.preventDefault();
 
 		if (yousure) {
-			requester('/cards/'+id+'/', 'DELETE', token)
-			.then(res => {
-				setInput(false);
-			})
-			.catch(err => {
-				console.log(err);
-			});
+			requester('/cards/' + id + '/', 'DELETE', token)
+				.then((res) => {
+					setInput(false);
+				})
+				.catch((err) => {
+					console.log(err);
+				});
 		} else {
 			setYousure(true);
 		}
@@ -70,49 +77,44 @@ function AdminCardDetail(props) {
 		{ key: '3', text: 'Card Member Blocked', value: 'card_member_blocked' },
 	];
 
-	return (
-		input ?
-			<Segment raised color={input.active_status === 'card_active' ? 'green' : 'red'}>
-				<Form onSubmit={handleSubmit}>
-					<Form.Group widths='equal'>
-						<Form.Input
-							fluid
-							{...makeProps('card_number')}
-						/>
-						<Form.Select
-							fluid
-							options={statusOptions}
-							{...makeProps('active_status')}
-							onChange={handleValues}
-						/>
-
-						<Form.Group widths='equal'>
-							<Form.Button
-								loading={loading}
-								error={error.non_field_errors}
-							>
-								{success ? 'Saved.' : 'Save'}
-							</Form.Button>
-
-							<Form.Button
-								color='red'
-								onClick={handleDelete}
-							>
-								{yousure ? 'You Sure?' : 'Delete'}
-							</Form.Button>
-						</Form.Group>
-					</Form.Group>
+	return input ? (
+		<Segment
+			raised
+			color={input.active_status === 'card_active' ? 'green' : 'red'}
+		>
+			<Form onSubmit={handleSubmit}>
+				<Form.Group widths="equal">
+					<Form.Input fluid {...makeProps('card_number')} />
+					<Form.Select
+						fluid
+						options={statusOptions}
+						{...makeProps('active_status')}
+						onChange={handleValues}
+					/>
 
-					Notes: {input.notes || 'None'},
-					Last Seen: {input.last_seen_at || 'Unknown'}
-				</Form>
-			</Segment>
-		:
-			<Segment raised color='black'>
-				Deleted card: {card.card_number}
-			</Segment>
+					<Form.Group widths="equal">
+						<Form.Button
+							loading={loading}
+							error={error.non_field_errors}
+						>
+							{success ? 'Saved.' : 'Save'}
+						</Form.Button>
+
+						<Form.Button color="red" onClick={handleDelete}>
+							{yousure ? 'You Sure?' : 'Delete'}
+						</Form.Button>
+					</Form.Group>
+				</Form.Group>
+				Notes: {input.notes || 'None'}, Last Seen:{' '}
+				{input.last_seen_at || 'Unknown'}
+			</Form>
+		</Segment>
+	) : (
+		<Segment raised color="black">
+			Deleted card: {card.card_number}
+		</Segment>
 	);
-};
+}
 
 export function AdminMemberCards(props) {
 	const { token, result, refreshResult } = props;
@@ -132,7 +134,6 @@ export function AdminMemberCards(props) {
 	}, [result.member]);
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
@@ -142,29 +143,29 @@ export function AdminMemberCards(props) {
 		setSuccess(false);
 		const data = { ...input, member_id: result.member.id };
 		requester('/cards/', 'POST', token, data)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError(false);
-			refreshResult();
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError(false);
+				refreshResult();
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const getCardPhoto = (e) => {
 		e.preventDefault();
 		requester('/members/' + id + '/card_photo/', 'GET', token)
-		.then(res => res.blob())
-		.then(res => {
-			setCardPhoto(URL.createObjectURL(res));
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => res.blob())
+			.then((res) => {
+				setCardPhoto(URL.createObjectURL(res));
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -183,94 +184,106 @@ export function AdminMemberCards(props) {
 
 	return (
 		<div>
-			<Header size='medium'>Edit Member Cards</Header>
+			<Header size="medium">Edit Member Cards</Header>
 
 			<Form onSubmit={handleSubmit}>
-				<Header size='small'>Add a Card</Header>
+				<Header size="small">Add a Card</Header>
 
-				{result.member.photo_large ?
+				{result.member.photo_large ? (
 					<p>
-						<Button onClick={(e) => getCardPhoto(e)}>View card image</Button>
+						<Button onClick={(e) => getCardPhoto(e)}>
+							View card image
+						</Button>
 					</p>
-				:
+				) : (
 					<p>No card image, member photo missing!</p>
-				}
-
-				{cardPhoto && <>
-					<p>
-						<Image rounded size='medium' src={cardPhoto} />
-					</p>
-
-					<Header size='small'>How to Print a Card</Header>
-					<ol>
-						<li>Right click on image > Save image as...</li>
-						<li>Right click on file > Print</li>
-						<li>Select Datacard Printer, Print</li>
-						<li>Plug card scanner in</li>
-						<li>Open "RfidReader" on desktop</li>
-						<li>Scan card, add the number</li>
-						<li><b>Have them test their card</b></li>
-					</ol>
-				</>}
-
-				<Form.Group widths='equal'>
+				)}
+
+				{cardPhoto && (
+					<>
+						<p>
+							<Image rounded size="medium" src={cardPhoto} />
+						</p>
+
+						<Header size="small">How to Print a Card</Header>
+						<ol>
+							<li>Right click on image > Save image as...</li>
+							<li>Right click on file > Print</li>
+							<li>Select Datacard Printer, Print</li>
+							<li>Plug card scanner in</li>
+							<li>Open "RfidReader" on desktop</li>
+							<li>Scan card, add the number</li>
+							<li>
+								<b>Have them test their card</b>
+							</li>
+						</ol>
+					</>
+				)}
+
+				<Form.Group widths="equal">
 					<Form.Input
-						label='Card Number'
+						label="Card Number"
 						fluid
 						{...makeProps('card_number')}
 					/>
 					<Form.Select
-						label='Card Status'
+						label="Card Status"
 						options={statusOptions}
 						fluid
 						{...makeProps('active_status')}
 						onChange={handleValues}
 					/>
 					<Form.Input
-						label='Optional Note'
+						label="Optional Note"
 						fluid
 						{...makeProps('notes')}
 					/>
 				</Form.Group>
 
 				<Form.Checkbox
-					label='Confirmed that the member has been given a tour and knows the alarm code'
+					label="Confirmed that the member has been given a tour and knows the alarm code"
 					required
 					{...makeProps('given_tour')}
 					onChange={handleCheck}
 					checked={input.given_tour}
 				/>
 
-				<Form.Button disabled={!input.given_tour} loading={loading} error={error.non_field_errors}>
+				<Form.Button
+					disabled={!input.given_tour}
+					loading={loading}
+					error={error.non_field_errors}
+				>
 					Submit
 				</Form.Button>
 				{success && <div>Success!</div>}
 			</Form>
 
-			<Header size='small'>Current Cards</Header>
+			<Header size="small">Current Cards</Header>
 
 			<Dimmer.Dimmable dimmed={dimmed}>
-				{cards.length ?
-					cards.map(x =>
+				{cards.length ? (
+					cards.map((x) => (
 						<AdminCardDetail key={x.id} card={x} {...props} />
-					)
-				:
+					))
+				) : (
 					<p>None</p>
-				}
+				)}
 
 				<Dimmer active={dimmed}>
 					<p>
-						Member paused, {cards.length} card{cards.length === 1 ? '' : 's'} ignored anyway.
+						Member paused, {cards.length} card
+						{cards.length === 1 ? '' : 's'} ignored anyway.
 					</p>
 					<p>
-						<Button size='tiny' onClick={() => setDimmed(false)}>Close</Button>
+						<Button size="tiny" onClick={() => setDimmed(false)}>
+							Close
+						</Button>
 					</p>
 				</Dimmer>
 			</Dimmer.Dimmable>
-
 		</div>
 	);
-};
+}
 
 export function AdminMemberPause(props) {
 	const { token, result, refreshResult } = props;
@@ -290,17 +303,17 @@ export function AdminMemberPause(props) {
 			setLoading(true);
 			setSuccess(false);
 			requester('/members/' + id + '/pause/', 'POST', token, {})
-			.then(res => {
-				setYousure(false);
-				setSuccess(true);
-				setError(false);
-				refreshResult();
-			})
-			.catch(err => {
-				setLoading(false);
-				console.log(err);
-				setError(true);
-			});
+				.then((res) => {
+					setYousure(false);
+					setSuccess(true);
+					setError(false);
+					refreshResult();
+				})
+				.catch((err) => {
+					setLoading(false);
+					console.log(err);
+					setError(true);
+				});
 		} else {
 			setYousure(true);
 		}
@@ -311,41 +324,41 @@ export function AdminMemberPause(props) {
 		setLoading(true);
 		setSuccess(false);
 		requester('/members/' + id + '/unpause/', 'POST', token, {})
-		.then(res => {
-			setSuccess(true);
-			setError(false);
-			refreshResult();
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(true);
-		});
+			.then((res) => {
+				setSuccess(true);
+				setError(false);
+				refreshResult();
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(true);
+			});
 	};
 
 	return (
 		<div>
-			<Header size='medium'>Pause / Unpause Membership</Header>
+			<Header size="medium">Pause / Unpause Membership</Header>
 
 			<p>Pause members who are inactive, former, or on vacation.</p>
 
 			<p>
-				{result.member.paused_date ?
+				{result.member.paused_date ? (
 					<Button onClick={handleUnpause} loading={loading}>
 						Unpause
 					</Button>
-				:
+				) : (
 					<Button onClick={handlePause} loading={loading}>
 						{yousure ? 'You Sure?' : 'Pause'}
 					</Button>
-				}
+				)}
 			</p>
 
 			{success && <div>Success!</div>}
 			{error && <p>Error, something went wrong.</p>}
 		</div>
 	);
-};
+}
 
 export function AdminMemberForm(props) {
 	const { token, result, refreshResult } = props;
@@ -360,7 +373,6 @@ export function AdminMemberForm(props) {
 	}, [result.member]);
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
@@ -370,17 +382,17 @@ export function AdminMemberForm(props) {
 		setSuccess(false);
 		const data = { ...input, email: input.email.toLowerCase() };
 		requester('/members/' + id + '/', 'PATCH', token, data)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError(false);
-			refreshResult();
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError(false);
+				refreshResult();
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -393,63 +405,61 @@ export function AdminMemberForm(props) {
 	return (
 		<div>
 			<Form onSubmit={handleSubmit}>
-				<Header size='medium'>Edit Member Details</Header>
+				<Header size="medium">Edit Member Details</Header>
 
-				<Form.Group widths='equal'>
+				<Form.Group widths="equal">
 					<Form.Input
-						label='First Name'
+						label="First Name"
 						fluid
 						{...makeProps('first_name')}
 					/>
 					<Form.Input
-						label='Last Name'
+						label="Last Name"
 						fluid
 						{...makeProps('last_name')}
 					/>
 				</Form.Group>
 
 				<Form.Input
-					label='Preferred Name'
+					label="Preferred Name"
 					{...makeProps('preferred_name')}
 				/>
 
-				<Form.Input
-					label='Email'
-					{...makeProps('email')}
-				/>
+				<Form.Input label="Email" {...makeProps('email')} />
 
 				<Form.Input
-					label='Application Date'
+					label="Application Date"
 					{...makeProps('application_date')}
 				/>
 
 				<Form.Input
-					label='Current Start Date'
+					label="Current Start Date"
 					{...makeProps('current_start_date')}
 				/>
 
-				<Form.Input
-					label='Vetted Date'
-					{...makeProps('vetted_date')}
-				/>
+				<Form.Input label="Vetted Date" {...makeProps('vetted_date')} />
 
 				<Form.Input
-					label='Membership Fee'
+					label="Membership Fee"
 					{...makeProps('monthly_fees')}
 				/>
 
 				<Form.Field>
 					<label>Is the member an instructor?</label>
 					<Checkbox
-						label='Yes'
-						name='is_instructor'
+						label="Yes"
+						name="is_instructor"
 						onChange={handleCheck}
 						checked={input.is_instructor}
 					/>
 				</Form.Field>
 
 				<Form.TextArea
-					label={'Private Notes (shared with ' + input.preferred_name + ')'}
+					label={
+						'Private Notes (shared with ' +
+						input.preferred_name +
+						')'
+					}
 					{...makeProps('private_notes')}
 				/>
 
@@ -460,25 +470,30 @@ export function AdminMemberForm(props) {
 			</Form>
 		</div>
 	);
-};
+}
 
 export function AdminMemberInfo(props) {
 	const member = props.result.member;
 
 	return (
 		<div>
-			<Header size='medium'>Admin Details</Header>
+			<Header size="medium">Admin Details</Header>
 
 			<BasicTable>
 				<Table.Body>
 					<Table.Row>
 						<Table.Cell>Name:</Table.Cell>
-						<Table.Cell>{member.first_name} {member.last_name}</Table.Cell>
+						<Table.Cell>
+							{member.first_name} {member.last_name}
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Status:</Table.Cell>
 						<Table.Cell>
-							<Icon name='circle' color={statusColor[member.status]} />
+							<Icon
+								name="circle"
+								color={statusColor[member.status]}
+							/>
 							{member.status || 'Unknown'}
 						</Table.Cell>
 					</Table.Row>
@@ -487,10 +502,12 @@ export function AdminMemberInfo(props) {
 						<Table.Cell>Expire Date:</Table.Cell>
 						<Table.Cell>{member.expire_date}</Table.Cell>
 					</Table.Row>
-					{member.paused_date && <Table.Row>
-						<Table.Cell>Paused Date:</Table.Cell>
-						<Table.Cell>{member.paused_date}</Table.Cell>
-					</Table.Row>}
+					{member.paused_date && (
+						<Table.Row>
+							<Table.Cell>Paused Date:</Table.Cell>
+							<Table.Cell>{member.paused_date}</Table.Cell>
+						</Table.Row>
+					)}
 
 					<Table.Row>
 						<Table.Cell>Phone:</Table.Cell>
@@ -499,24 +516,34 @@ export function AdminMemberInfo(props) {
 
 					<Table.Row>
 						<Table.Cell>Minor:</Table.Cell>
-						<Table.Cell>{member.is_minor ? 'Yes' : 'No'}</Table.Cell>
+						<Table.Cell>
+							{member.is_minor ? 'Yes' : 'No'}
+						</Table.Cell>
 					</Table.Row>
-					{member.is_minor && <Table.Row>
-						<Table.Cell>Birthdate:</Table.Cell>
-						<Table.Cell>{member.birthdate}</Table.Cell>
-					</Table.Row>}
-					{member.is_minor && <Table.Row>
-						<Table.Cell>Guardian:</Table.Cell>
-						<Table.Cell>{member.guardian_name}</Table.Cell>
-					</Table.Row>}
+					{member.is_minor && (
+						<Table.Row>
+							<Table.Cell>Birthdate:</Table.Cell>
+							<Table.Cell>{member.birthdate}</Table.Cell>
+						</Table.Row>
+					)}
+					{member.is_minor && (
+						<Table.Row>
+							<Table.Cell>Guardian:</Table.Cell>
+							<Table.Cell>{member.guardian_name}</Table.Cell>
+						</Table.Row>
+					)}
 
 					<Table.Row>
 						<Table.Cell>Emergency Contact Name:</Table.Cell>
-						<Table.Cell>{member.emergency_contact_name || 'None'}</Table.Cell>
+						<Table.Cell>
+							{member.emergency_contact_name || 'None'}
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Emergency Contact Phone:</Table.Cell>
-						<Table.Cell>{member.emergency_contact_phone || 'None'}</Table.Cell>
+						<Table.Cell>
+							{member.emergency_contact_phone || 'None'}
+						</Table.Cell>
 					</Table.Row>
 
 					<Table.Row>
@@ -530,35 +557,37 @@ export function AdminMemberInfo(props) {
 				</Table.Body>
 			</BasicTable>
 
-			<p className='bio-paragraph'>
-				{member.public_bio || 'None yet.'}
-			</p>
-
-			{member.member_forms && <p>
-				<a href={staticUrl + '/' + member.member_forms} target='_blank'>
-					View application forms
-				</a>
-			</p>}
+			<p className="bio-paragraph">{member.public_bio || 'None yet.'}</p>
+
+			{member.member_forms && (
+				<p>
+					<a
+						href={staticUrl + '/' + member.member_forms}
+						target="_blank"
+					>
+						View application forms
+					</a>
+				</p>
+			)}
 		</div>
 	);
-};
+}
 
 export function AdminMemberTraining(props) {
 	const training = props.result.training;
 
 	return (
 		<div>
-			<Header size='medium'>Member Training</Header>
+			<Header size="medium">Member Training</Header>
 
-			{training.length ?
+			{training.length ? (
 				<TrainingList training={training} />
-			:
+			) : (
 				<p>None</p>
-			}
-
+			)}
 		</div>
 	);
-};
+}
 
 export function AdminCert(props) {
 	const { token, result, name, field, refreshResult } = props;
@@ -572,12 +601,12 @@ export function AdminCert(props) {
 		let data = Object();
 		data[field] = moment.utc().tz('America/Edmonton').format('YYYY-MM-DD');
 		requester('/members/' + member.id + '/', 'PATCH', token, data)
-		.then(res => {
-			refreshResult();
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				refreshResult();
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	};
 
 	const handleUncert = (e) => {
@@ -587,34 +616,26 @@ export function AdminCert(props) {
 		let data = Object();
 		data[field] = null;
 		requester('/members/' + member.id + '/', 'PATCH', token, data)
-		.then(res => {
-			refreshResult();
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				refreshResult();
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	};
 
 	useEffect(() => {
 		setLoading(false);
 	}, [member[field]]);
 
-	return (
-		member[field] ?
-			<Button
-				onClick={handleUncert}
-				loading={loading}
-			>
-				Uncertify
-			</Button>
-		:
-			<Button
-				color='green'
-				onClick={handleCert}
-				loading={loading}
-			>
-				Certify {name}
-			</Button>
+	return member[field] ? (
+		<Button onClick={handleUncert} loading={loading}>
+			Uncertify
+		</Button>
+	) : (
+		<Button color="green" onClick={handleCert} loading={loading}>
+			Certify {name}
+		</Button>
 	);
 }
 
@@ -623,11 +644,11 @@ export function AdminMemberCertifications(props) {
 
 	return (
 		<div>
-			<Header size='medium'>Member Certifications</Header>
+			<Header size="medium">Member Certifications</Header>
 
 			<p>These certifications control access to the lockouts.</p>
 
-			<Table basic='very'>
+			<Table basic="very">
 				<Table.Header>
 					<Table.Row>
 						<Table.HeaderCell>Name</Table.HeaderCell>
@@ -640,55 +661,165 @@ export function AdminMemberCertifications(props) {
 				<Table.Body>
 					<Table.Row>
 						<Table.Cell>Common</Table.Cell>
-						<Table.Cell>{member.vetted_date || member.orientation_date ? 'Yes' : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/249'>New Members: Orientation and Basic Safety</Link></Table.Cell>
-						<Table.Cell><AdminCert name='Common' field='orientation_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.vetted_date || member.orientation_date
+								? 'Yes'
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/249">
+								New Members: Orientation and Basic Safety
+							</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="Common"
+								field="orientation_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Wood 1</Table.Cell>
-						<Table.Cell>{member.wood_cert_date ? 'Yes, ' + member.wood_cert_date : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/261'>Woodworking Tools 1: Intro to Saws</Link></Table.Cell>
-						<Table.Cell><AdminCert name='Wood 1' field='wood_cert_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.wood_cert_date
+								? 'Yes, ' + member.wood_cert_date
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/261">
+								Woodworking Tools 1: Intro to Saws
+							</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="Wood 1"
+								field="wood_cert_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Wood 2</Table.Cell>
-						<Table.Cell>{member.wood2_cert_date ? 'Yes, ' + member.wood2_cert_date : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/401'>Woodworking Tools 2: Jointer, Thickness Planer, Drum Sander</Link></Table.Cell>
-						<Table.Cell><AdminCert name='Wood 2' field='wood2_cert_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.wood2_cert_date
+								? 'Yes, ' + member.wood2_cert_date
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/401">
+								Woodworking Tools 2: Jointer, Thickness Planer,
+								Drum Sander
+							</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="Wood 2"
+								field="wood2_cert_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Lathe</Table.Cell>
-						<Table.Cell>{member.lathe_cert_date ? 'Yes, ' + member.lathe_cert_date : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/281'>Metal: Metal Cutting & Manual Lathe</Link></Table.Cell>
-						<Table.Cell><AdminCert name='Lathe' field='lathe_cert_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.lathe_cert_date
+								? 'Yes, ' + member.lathe_cert_date
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/281">
+								Metal: Metal Cutting & Manual Lathe
+							</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="Lathe"
+								field="lathe_cert_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Mill</Table.Cell>
-						<Table.Cell>{member.mill_cert_date ? 'Yes, ' + member.mill_cert_date : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/283'>Metal: Manual Mill & Advanced Lathe</Link></Table.Cell>
-						<Table.Cell><AdminCert name='Mill' field='mill_cert_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.mill_cert_date
+								? 'Yes, ' + member.mill_cert_date
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/283">
+								Metal: Manual Mill & Advanced Lathe
+							</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="Mill"
+								field="mill_cert_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>CNC</Table.Cell>
-						<Table.Cell>{member.cnc_cert_date ? 'Yes, ' + member.cnc_cert_date : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/259'>Tormach: CAM and Tormach Intro</Link></Table.Cell>
-						<Table.Cell><AdminCert name='CNC' field='cnc_cert_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.cnc_cert_date
+								? 'Yes, ' + member.cnc_cert_date
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/259">
+								Tormach: CAM and Tormach Intro
+							</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="CNC"
+								field="cnc_cert_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Rabbit Laser</Table.Cell>
-						<Table.Cell>{member.rabbit_cert_date ? 'Yes, ' + member.rabbit_cert_date : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/247'>Laser: Cutting and Engraving</Link></Table.Cell>
-						<Table.Cell><AdminCert name='Rabbit' field='rabbit_cert_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.rabbit_cert_date
+								? 'Yes, ' + member.rabbit_cert_date
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/247">
+								Laser: Cutting and Engraving
+							</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="Rabbit"
+								field="rabbit_cert_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Trotec Laser</Table.Cell>
-						<Table.Cell>{member.trotec_cert_date ? 'Yes, ' + member.trotec_cert_date : 'No'}</Table.Cell>
-						<Table.Cell><Link to='/courses/321'>Laser: Trotec Course</Link></Table.Cell>
-						<Table.Cell><AdminCert name='Trotec' field='trotec_cert_date' {...props} /></Table.Cell>
+						<Table.Cell>
+							{member.trotec_cert_date
+								? 'Yes, ' + member.trotec_cert_date
+								: 'No'}
+						</Table.Cell>
+						<Table.Cell>
+							<Link to="/courses/321">Laser: Trotec Course</Link>
+						</Table.Cell>
+						<Table.Cell>
+							<AdminCert
+								name="Trotec"
+								field="trotec_cert_date"
+								{...props}
+							/>
+						</Table.Cell>
 					</Table.Row>
 				</Table.Body>
 			</Table>
-
 		</div>
 	);
-};
+}
diff --git a/webclient/src/AdminTransactions.js b/webclient/src/AdminTransactions.js
index 0ef6fd50..9e1e47be 100644
--- a/webclient/src/AdminTransactions.js
+++ b/webclient/src/AdminTransactions.js
@@ -1,52 +1,52 @@
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import './light.css';
-import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { Container, Checkbox, Form, Header, Segment } from 'semantic-ui-react';
 import * as Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
-import { statusColor, BasicTable, staticUrl, requester } from './utils.js';
+import { requester } from './utils.js';
 import { TransactionList, TransactionEditor } from './Transactions.js';
-import { NotFound } from './Misc.js';
 
 export function AdminReportedTransactions(props) {
-	const { token, user } = props;
+	const { token } = props;
 	const [transactions, setTransactions] = useState(false);
 	const [error, setError] = useState(false);
 
 	useEffect(() => {
 		requester('/transactions/', 'GET', token)
-		.then(res => {
-			setTransactions(res.results);
-			setError(false);
-		})
-		.catch(err => {
-			console.log(err);
-			setError(true);
-		});
+			.then((res) => {
+				setTransactions(res.results);
+				setError(false);
+			})
+			.catch((err) => {
+				console.log(err);
+				setError(true);
+			});
 	}, []);
 
 	return (
 		<div>
-			{!error ?
-				transactions ?
+			{!error ? (
+				transactions ? (
 					<div>
 						<TransactionList transactions={transactions} />
 					</div>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<p>Error loading.</p>
-			}
+			)}
 		</div>
 	);
-};
+}
 
 let transactionsCache = false;
 let excludePayPalCache = false;
 
 export function AdminHistoricalTransactions(props) {
-	const { token, user } = props;
+	const { token } = props;
 	const [input, setInput] = useState({ month: moment() });
 	const [transactions, setTransactions] = useState(transactionsCache);
 	const [excludePayPal, setExcludePayPal] = useState(excludePayPalCache);
@@ -65,17 +65,17 @@ export function AdminHistoricalTransactions(props) {
 		setLoading(true);
 		const month = input.month.format('YYYY-MM');
 		requester('/transactions/?month=' + month, 'GET', token)
-		.then(res => {
-			setLoading(false);
-			setError(false);
-			setTransactions(res.results);
-			transactionsCache = res.results;
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(true);
-		});
+			.then((res) => {
+				setLoading(false);
+				setError(false);
+				setTransactions(res.results);
+				transactionsCache = res.results;
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(true);
+			});
 	};
 
 	return (
@@ -85,45 +85,59 @@ export function AdminHistoricalTransactions(props) {
 				<Form.Group>
 					<Form.Field>
 						<Datetime
-							dateFormat='YYYY-MM'
+							dateFormat="YYYY-MM"
 							timeFormat={false}
 							value={input.month}
 							onChange={handleDatetime}
 						/>
 					</Form.Field>
 
-					<Form.Button loading={loading}>
-						Submit
-					</Form.Button>
+					<Form.Button loading={loading}>Submit</Form.Button>
 				</Form.Group>
 			</Form>
 
-			{!error ?
-				transactions && <div>
-					<p>Found {transactions.length} transactions.</p>
-					{!!transactions.length &&
-						<Header size='small'>{moment(transactions[0].date, 'YYYY-MM-DD').format('MMMM YYYY')} Transactions</Header>
-					}
-
-					<Checkbox
-						label='Exclude PayPal'
-						onChange={handleExcludePayPal}
-						checked={excludePayPal}
-					/>
-
-					<TransactionList transactions={transactions.filter(x => !excludePayPal || x.account_type !== 'PayPal')} />
-				</div>
-			:
+			{!error ? (
+				transactions && (
+					<div>
+						<p>Found {transactions.length} transactions.</p>
+						{!!transactions.length && (
+							<Header size="small">
+								{moment(
+									transactions[0].date,
+									'YYYY-MM-DD'
+								).format('MMMM YYYY')}{' '}
+								Transactions
+							</Header>
+						)}
+
+						<Checkbox
+							label="Exclude PayPal"
+							onChange={handleExcludePayPal}
+							checked={excludePayPal}
+						/>
+
+						<TransactionList
+							transactions={transactions.filter(
+								(x) =>
+									!excludePayPal ||
+									x.account_type !== 'PayPal'
+							)}
+						/>
+					</div>
+				)
+			) : (
 				<p>Error loading transactions.</p>
-			}
+			)}
 		</div>
 	);
-};
+}
 
 export function AdminAddTransaction(props) {
 	const { token } = props;
-	const [open, setOpen] = useState(false);
-	const [input, setInput] = useState({ date: moment().format('YYYY-MM-DD'), info_source: 'Web' });
+	const [input, setInput] = useState({
+		date: moment().format('YYYY-MM-DD'),
+		info_source: 'Web',
+	});
 	const [error, setError] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const [success, setSuccess] = useState(false);
@@ -133,69 +147,79 @@ export function AdminAddTransaction(props) {
 		setLoading(true);
 		setSuccess(false);
 		requester('/transactions/', 'POST', token, input)
-		.then(res => {
-			setSuccess(res.id);
-			setInput({});
-			setLoading(false);
-			setError(false);
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setSuccess(res.id);
+				setInput({});
+				setLoading(false);
+				setError(false);
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	return (
 		<Form onSubmit={handleSubmit}>
-			<TransactionEditor {...props} input={input} setInput={setInput} error={error} />
+			<TransactionEditor
+				{...props}
+				input={input}
+				setInput={setInput}
+				error={error}
+			/>
 
 			<Form.Button loading={loading} error={error.non_field_errors}>
 				Submit
 			</Form.Button>
-			{success && <p>Added! <Link to={'/transactions/'+success}>View the transaction.</Link></p>}
+			{success && (
+				<p>
+					Added!{' '}
+					<Link to={'/transactions/' + success}>
+						View the transaction.
+					</Link>
+				</p>
+			)}
 		</Form>
 	);
-};
+}
 
 export function AdminTransactions(props) {
 	return (
 		<Container>
-			<Header size='large'>Admin Transactions</Header>
+			<Header size="large">Admin Transactions</Header>
 
 			<Segment padded>
-				<Header size='medium'>Add a Transaction</Header>
+				<Header size="medium">Add a Transaction</Header>
 				<AdminAddTransaction {...props} />
 			</Segment>
 
-			<Header size='medium'>Reported</Header>
+			<Header size="medium">Reported</Header>
 			<AdminReportedTransactions {...props} />
 
-			<Header size='medium'>Historical</Header>
+			<Header size="medium">Historical</Header>
 			<AdminHistoricalTransactions {...props} />
 		</Container>
 	);
 }
 
 export function AdminMemberTransactions(props) {
-	const { token, result, refreshResult } = props;
+	const { result } = props;
 	const transactions = result.transactions;
-	const { id } = useParams();
 
 	return (
 		<div>
-			<Header size='medium'>Member Transactions</Header>
+			<Header size="medium">Member Transactions</Header>
 
-			<Link to='/admintrans'>Add a transaction</Link>
+			<Link to="/admintrans">Add a transaction</Link>
 
-			<Header size='small'>Current Transactions</Header>
+			<Header size="small">Current Transactions</Header>
 
-			{transactions.length ?
+			{transactions.length ? (
 				<TransactionList noMember transactions={transactions} />
-			:
+			) : (
 				<p>None</p>
-			}
-
+			)}
 		</div>
 	);
-};
+}
diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js
index dc4a802f..e959e73f 100644
--- a/webclient/src/Classes.js
+++ b/webclient/src/Classes.js
@@ -1,18 +1,21 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import './light.css';
-import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import { Button, Container, Header, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment-timezone';
-import { isAdmin, isInstructor, getInstructor, BasicTable, requester } from './utils.js';
-import { NotFound, PleaseLogin } from './Misc.js';
-import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
+import { isAdmin, getInstructor, BasicTable, requester } from './utils.js';
+import { NotFound } from './Misc.js';
+import {
+	InstructorClassDetail,
+	InstructorClassAttendance,
+} from './InstructorClasses.js';
 import { PayPalPayNow } from './PayPal.js';
 
 function ClassTable(props) {
 	const { classes } = props;
 
 	return (
-		<Table basic='very'>
+		<Table basic="very">
 			<Table.Header>
 				<Table.Row>
 					<Table.HeaderCell>Name</Table.HeaderCell>
@@ -25,28 +28,45 @@ function ClassTable(props) {
 			</Table.Header>
 
 			<Table.Body>
-				{classes.length ?
-					classes.map(x =>
+				{classes.length ? (
+					classes.map((x) => (
 						<Table.Row key={x.id}>
 							<Table.Cell>{x.course_name}</Table.Cell>
 							<Table.Cell>
-								<Link to={'/classes/'+x.id}>
-									{moment.utc(x.datetime).tz('America/Edmonton').format('ll')}
+								<Link to={'/classes/' + x.id}>
+									{moment
+										.utc(x.datetime)
+										.tz('America/Edmonton')
+										.format('ll')}
 								</Link>
 							</Table.Cell>
-							<Table.Cell>{x.is_cancelled ? 'Cancelled' : moment.utc(x.datetime).tz('America/Edmonton').format('LT')}</Table.Cell>
+							<Table.Cell>
+								{x.is_cancelled
+									? 'Cancelled'
+									: moment
+											.utc(x.datetime)
+											.tz('America/Edmonton')
+											.format('LT')}
+							</Table.Cell>
 							<Table.Cell>{getInstructor(x)}</Table.Cell>
-							<Table.Cell>{x.cost === '0.00' ? 'Free' : '$'+x.cost}</Table.Cell>
-							<Table.Cell>{x.student_count} {!!x.max_students && '/ '+x.max_students}</Table.Cell>
+							<Table.Cell>
+								{x.cost === '0.00' ? 'Free' : '$' + x.cost}
+							</Table.Cell>
+							<Table.Cell>
+								{x.student_count}{' '}
+								{!!x.max_students && '/ ' + x.max_students}
+							</Table.Cell>
 						</Table.Row>
-					)
-				:
-					<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
-				}
+					))
+				) : (
+					<Table.Row>
+						<Table.Cell>None</Table.Cell>
+					</Table.Row>
+				)}
 			</Table.Body>
 		</Table>
 	);
-};
+}
 
 let classesCache = false;
 
@@ -56,62 +76,66 @@ export function Classes(props) {
 
 	useEffect(() => {
 		requester('/sessions/', 'GET', token)
-		.then(res => {
-			setClasses(res.results);
-			classesCache = res.results;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setClasses(res.results);
+				classesCache = res.results;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, []);
 
 	const now = new Date().toISOString();
 
 	return (
 		<Container>
-			<Header size='large'>Class List</Header>
+			<Header size="large">Class List</Header>
 
-			<Header size='medium'>Upcoming</Header>
+			<Header size="medium">Upcoming</Header>
 
 			<p>Ordered by nearest date.</p>
 
-			{classes ?
-				<ClassTable classes={classes.filter(x => x.datetime > now).sort((a, b) => a.datetime > b.datetime ? 1 : -1)} />
-			:
+			{classes ? (
+				<ClassTable
+					classes={classes
+						.filter((x) => x.datetime > now)
+						.sort((a, b) => (a.datetime > b.datetime ? 1 : -1))}
+				/>
+			) : (
 				<p>Loading...</p>
-			}
+			)}
 
-			<Header size='medium'>Recent</Header>
+			<Header size="medium">Recent</Header>
 
 			<p>Ordered by nearest date.</p>
 
-			{classes ?
-				<ClassTable classes={classes.filter(x => x.datetime < now)} />
-			:
+			{classes ? (
+				<ClassTable classes={classes.filter((x) => x.datetime < now)} />
+			) : (
 				<p>Loading...</p>
-			}
+			)}
 		</Container>
 	);
-};
+}
 
 export function ClassDetail(props) {
 	const [clazz, setClass] = useState(false);
-	const [refreshCount, refreshClass] = useReducer(x => x + 1, 0);
+	const [refreshCount, refreshClass] = useReducer((x) => x + 1, 0);
 	const [error, setError] = useState(false);
 	const [loading, setLoading] = useState(false);
 	const { token, user, refreshUser } = props;
 	const { id } = useParams();
-	const userTraining = clazz && clazz.students.find(x => x.user == user.id);
+	const userTraining = clazz && clazz.students.find((x) => x.user == user.id);
 
 	useEffect(() => {
-		requester('/sessions/'+id+'/', 'GET', token)
-		.then(res => {
-			setClass(res);
-		})
-		.catch(err => {
-			console.log(err);
-			setError(true);
-		});
+		requester('/sessions/' + id + '/', 'GET', token)
+			.then((res) => {
+				setClass(res);
+			})
+			.catch((err) => {
+				console.log(err);
+				setError(true);
+			});
 	}, [refreshCount]);
 
 	const handleSignup = () => {
@@ -119,28 +143,28 @@ export function ClassDetail(props) {
 		setLoading(true);
 		const data = { attendance_status: 'Waiting for payment', session: id };
 		requester('/training/', 'POST', token, data)
-		.then(res => {
-			refreshClass();
-			refreshUser();
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				refreshClass();
+				refreshUser();
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	};
 
 	const handleToggle = (newStatus) => {
 		if (loading) return;
 		setLoading(true);
 		const data = { attendance_status: newStatus, session: id };
-		requester('/training/'+userTraining.id+'/', 'PUT', token, data)
-		.then(res => {
-			refreshClass();
-			refreshUser();
-		})
-		.catch(err => {
-			console.log(err);
-			setError(true);
-		});
+		requester('/training/' + userTraining.id + '/', 'PUT', token, data)
+			.then((res) => {
+				refreshClass();
+				refreshUser();
+			})
+			.catch((err) => {
+				console.log(err);
+				setError(true);
+			});
 	};
 
 	useEffect(() => {
@@ -151,23 +175,27 @@ export function ClassDetail(props) {
 
 	return (
 		<Container>
-			{!error ?
-				clazz ?
+			{!error ? (
+				clazz ? (
 					<div>
-						<Header size='large'>Class Details</Header>
+						<Header size="large">Class Details</Header>
 
-						{(isAdmin(user) || clazz.instructor === user.id) &&
+						{(isAdmin(user) || clazz.instructor === user.id) && (
 							<Segment padded>
-								<InstructorClassDetail clazz={clazz} setClass={setClass} {...props} />
+								<InstructorClassDetail
+									clazz={clazz}
+									setClass={setClass}
+									{...props}
+								/>
 							</Segment>
-						}
+						)}
 
 						<BasicTable>
 							<Table.Body>
 								<Table.Row>
 									<Table.Cell>Name:</Table.Cell>
 									<Table.Cell>
-										<Link to={'/courses/'+clazz.course}>
+										<Link to={'/courses/' + clazz.course}>
 											{clazz.course_name}
 										</Link>
 									</Table.Cell>
@@ -175,86 +203,129 @@ export function ClassDetail(props) {
 								<Table.Row>
 									<Table.Cell>Date:</Table.Cell>
 									<Table.Cell>
-										{moment.utc(clazz.datetime).tz('America/Edmonton').format('ll')}
+										{moment
+											.utc(clazz.datetime)
+											.tz('America/Edmonton')
+											.format('ll')}
 									</Table.Cell>
 								</Table.Row>
 								<Table.Row>
 									<Table.Cell>Time:</Table.Cell>
 									<Table.Cell>
-										{clazz.is_cancelled ? 'Cancelled' : moment.utc(clazz.datetime).tz('America/Edmonton').format('LT')}
+										{clazz.is_cancelled
+											? 'Cancelled'
+											: moment
+													.utc(clazz.datetime)
+													.tz('America/Edmonton')
+													.format('LT')}
 									</Table.Cell>
 								</Table.Row>
 								<Table.Row>
 									<Table.Cell>Instructor:</Table.Cell>
-									<Table.Cell>{getInstructor(clazz)}</Table.Cell>
+									<Table.Cell>
+										{getInstructor(clazz)}
+									</Table.Cell>
 								</Table.Row>
 								<Table.Row>
 									<Table.Cell>Cost:</Table.Cell>
-									<Table.Cell>{clazz.cost === '0.00' ? 'Free' : '$'+clazz.cost}</Table.Cell>
+									<Table.Cell>
+										{clazz.cost === '0.00'
+											? 'Free'
+											: '$' + clazz.cost}
+									</Table.Cell>
 								</Table.Row>
 								<Table.Row>
 									<Table.Cell>Students:</Table.Cell>
-									<Table.Cell>{clazz.student_count} {!!clazz.max_students && '/ '+clazz.max_students}</Table.Cell>
+									<Table.Cell>
+										{clazz.student_count}{' '}
+										{!!clazz.max_students &&
+											'/ ' + clazz.max_students}
+									</Table.Cell>
 								</Table.Row>
 							</Table.Body>
 						</BasicTable>
 
-						<Header size='medium'>Attendance</Header>
+						<Header size="medium">Attendance</Header>
 
-						{(isAdmin(user) || clazz.instructor === user.id) &&
+						{(isAdmin(user) || clazz.instructor === user.id) && (
 							<Segment padded>
-								<InstructorClassAttendance clazz={clazz} refreshClass={refreshClass} {...props} />
+								<InstructorClassAttendance
+									clazz={clazz}
+									refreshClass={refreshClass}
+									{...props}
+								/>
 							</Segment>
-						}
+						)}
 
 						{clazz.instructor != user.id &&
-							(userTraining ?
+							(userTraining ? (
 								<div>
-									<p>Status: {userTraining.attendance_status}</p>
 									<p>
-										{userTraining.attendance_status === 'Withdrawn' ?
-											<Button loading={loading} onClick={() => handleToggle('Waiting for payment')}>
+										Status: {userTraining.attendance_status}
+									</p>
+									<p>
+										{userTraining.attendance_status ===
+										'Withdrawn' ? (
+											<Button
+												loading={loading}
+												onClick={() =>
+													handleToggle(
+														'Waiting for payment'
+													)
+												}
+											>
 												Sign back up
 											</Button>
-										:
-											<Button loading={loading} onClick={() => handleToggle('Withdrawn')}>
+										) : (
+											<Button
+												loading={loading}
+												onClick={() =>
+													handleToggle('Withdrawn')
+												}
+											>
 												Withdraw from Class
 											</Button>
-										}
+										)}
 									</p>
 
-									{userTraining.attendance_status === 'Waiting for payment' &&
+									{userTraining.attendance_status ===
+										'Waiting for payment' && (
 										<div>
-											<p>Please pay the course fee of ${clazz.cost} to confirm your attendance.</p>
+											<p>
+												Please pay the course fee of $
+												{clazz.cost} to confirm your
+												attendance.
+											</p>
 											<PayPalPayNow
 												amount={clazz.cost}
 												name={clazz.course_name}
-												custom={JSON.stringify({ training: userTraining.id })}
+												custom={JSON.stringify({
+													training: userTraining.id,
+												})}
 											/>
 										</div>
-									}
+									)}
 								</div>
-							:
-								(clazz.is_cancelled ?
-									<p>The class is cancelled.</p>
-								:
-									((clazz.max_students && clazz.student_count >= clazz.max_students) ?
-										<p>The class is full.</p>
-									:
-										<Button loading={loading} onClick={handleSignup}>
-											Sign me up!
-										</Button>
-									)
-								)
-							)
-						}
+							) : clazz.is_cancelled ? (
+								<p>The class is cancelled.</p>
+							) : clazz.max_students &&
+							  clazz.student_count >= clazz.max_students ? (
+								<p>The class is full.</p>
+							) : (
+								<Button
+									loading={loading}
+									onClick={handleSignup}
+								>
+									Sign me up!
+								</Button>
+							))}
 					</div>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<NotFound />
-			}
+			)}
 		</Container>
 	);
-};
-
+}
diff --git a/webclient/src/Home.js b/webclient/src/Home.js
index ec7706a8..c7827b1a 100644
--- a/webclient/src/Home.js
+++ b/webclient/src/Home.js
@@ -1,9 +1,26 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useLocation } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import moment from 'moment-timezone';
 import './light.css';
-import { Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Popup, Segment, Table } from 'semantic-ui-react';
-import { statusColor, BasicTable, staticUrl, requester, isAdmin } from './utils.js';
+import {
+	Container,
+	Divider,
+	Grid,
+	Header,
+	Icon,
+	Image,
+	Message,
+	Popup,
+	Segment,
+	Table,
+} from 'semantic-ui-react';
+import {
+	statusColor,
+	BasicTable,
+	staticUrl,
+	requester,
+	isAdmin,
+} from './utils.js';
 import { LoginForm, SignupForm } from './LoginSignup.js';
 import { AccountForm } from './Account.js';
 import { PayPalSubscribeDeal } from './PayPal.js';
@@ -12,28 +29,39 @@ function MemberInfo(props) {
 	const user = props.user;
 	const member = user.member;
 
-	const lastTrans = user.transactions && user.transactions.slice(0,3);
-	const lastCard = user.cards && user.cards.sort((a, b) => a.last_seen_at < b.last_seen_at)[0];
+	const lastTrans = user.transactions && user.transactions.slice(0, 3);
+	const lastCard =
+		user.cards &&
+		user.cards.sort((a, b) => a.last_seen_at < b.last_seen_at)[0];
 
 	return (
 		<div>
 			<Grid stackable>
 				<Grid.Column width={5}>
 					<Image
-						size='small'
-						src={member.photo_medium ? staticUrl + '/' + member.photo_medium : '/nophoto.png'}
+						size="small"
+						src={
+							member.photo_medium
+								? staticUrl + '/' + member.photo_medium
+								: '/nophoto.png'
+						}
 					/>
 				</Grid.Column>
 
 				<Grid.Column width={11}>
-					<Header size='large'>{member.preferred_name} {member.last_name}</Header>
+					<Header size="large">
+						{member.preferred_name} {member.last_name}
+					</Header>
 
 					<BasicTable>
 						<Table.Body>
 							<Table.Row>
 								<Table.Cell>Status:</Table.Cell>
 								<Table.Cell>
-									<Icon name='circle' color={statusColor[member.status]} />
+									<Icon
+										name="circle"
+										color={statusColor[member.status]}
+									/>
 									{member.status || 'Unknown'}
 								</Table.Cell>
 							</Table.Row>
@@ -46,242 +74,448 @@ function MemberInfo(props) {
 				</Grid.Column>
 			</Grid>
 
-			{!member.photo_medium && <Message>
-				<Message.Header>Welcome, new member!</Message.Header>
-				<p>
-					<a href={staticUrl + '/' + member.member_forms} target='_blank'>
-						Click here
-					</a> to view your application forms.
-				</p>
-			</Message>}
+			{!member.photo_medium && (
+				<Message>
+					<Message.Header>Welcome, new member!</Message.Header>
+					<p>
+						<a
+							href={staticUrl + '/' + member.member_forms}
+							target="_blank"
+						>
+							Click here
+						</a>{' '}
+						to view your application forms.
+					</p>
+				</Message>
+			)}
 
-			{!!lastTrans.length && !member.photo_medium && <Message warning>
-				<Message.Header>Please set a member photo!</Message.Header>
-				<p>Visit the <Link to='/account'>account settings</Link> page to set one.</p>
-			</Message>}
+			{!!lastTrans.length && !member.photo_medium && (
+				<Message warning>
+					<Message.Header>Please set a member photo!</Message.Header>
+					<p>
+						Visit the <Link to="/account">account settings</Link>{' '}
+						page to set one.
+					</p>
+				</Message>
+			)}
 
-			{!lastTrans.length && <React.Fragment>
-				<Header size='medium'>PayPal</Header>
-				<p>Create a ${user.member.monthly_fees} / month subscription, get your first three months for the price of two:</p>
-				<PayPalSubscribeDeal
-					amount={user.member.monthly_fees}
-					name='Protospace Membership'
-					custom={JSON.stringify({ deal: 3, member: user.member.id })}
-				/>
-			</React.Fragment>}
+			{!lastTrans.length && (
+				<React.Fragment>
+					<Header size="medium">PayPal</Header>
+					<p>
+						Create a ${user.member.monthly_fees} / month
+						subscription, get your first three months for the price
+						of two:
+					</p>
+					<PayPalSubscribeDeal
+						amount={user.member.monthly_fees}
+						name="Protospace Membership"
+						custom={JSON.stringify({
+							deal: 3,
+							member: user.member.id,
+						})}
+					/>
+				</React.Fragment>
+			)}
 
-			<Header size='medium'>Details</Header>
+			<Header size="medium">Details</Header>
 			<BasicTable>
 				<Table.Body>
 					<Table.Row>
 						<Table.Cell>Application:</Table.Cell>
-						<Table.Cell>{member.application_date || 'Unknown'}</Table.Cell>
+						<Table.Cell>
+							{member.application_date || 'Unknown'}
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Start:</Table.Cell>
-						<Table.Cell>{member.current_start_date || 'Unknown'}</Table.Cell>
+						<Table.Cell>
+							{member.current_start_date || 'Unknown'}
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Vetted:</Table.Cell>
-						<Table.Cell>{member.vetted_date || 'Not vetted'}</Table.Cell>
+						<Table.Cell>
+							{member.vetted_date || 'Not vetted'}
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Monthly:</Table.Cell>
-						<Table.Cell>${member.monthly_fees || 'Unknown'}</Table.Cell>
+						<Table.Cell>
+							${member.monthly_fees || 'Unknown'}
+						</Table.Cell>
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Card Number:</Table.Cell>
 						<Table.Cell>
-							{lastCard && lastCard.card_number || 'None'}
-							{user.cards.length > 1 && <Link to='/cards'> [more]</Link>}
+							{(lastCard && lastCard.card_number) || 'None'}
+							{user.cards.length > 1 && (
+								<Link to="/cards"> [more]</Link>
+							)}
 						</Table.Cell>
 					</Table.Row>
 				</Table.Body>
 			</BasicTable>
 
-			{member.photo_medium && <p>
-				<a href={staticUrl + '/' + member.member_forms} target='_blank'>
-					View application forms
-				</a>
-			</p>}
+			{member.photo_medium && (
+				<p>
+					<a
+						href={staticUrl + '/' + member.member_forms}
+						target="_blank"
+					>
+						View application forms
+					</a>
+				</p>
+			)}
 
-			<Header size='medium'>Latest Transactions</Header>
+			<Header size="medium">Latest Transactions</Header>
 			<BasicTable>
 				<Table.Body>
-					{lastTrans.length ?
-						lastTrans.map(x =>
+					{lastTrans.length ? (
+						lastTrans.map((x) => (
 							<Table.Row key={x.id}>
 								<Table.Cell>
-									<Link to={'/transactions/'+x.id}>{x.date}</Link>
+									<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>
-						)
-					:
-						<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
-					}
+						))
+					) : (
+						<Table.Row>
+							<Table.Cell>None</Table.Cell>
+						</Table.Row>
+					)}
 				</Table.Body>
 			</BasicTable>
 		</div>
 	);
-};
+}
 
 export function Home(props) {
 	const { user, token } = props;
-	const [stats, setStats] = useState(JSON.parse(localStorage.getItem('stats', 'false')));
-	const [refreshCount, refreshStats] = useReducer(x => x + 1, 0);
+	const [stats, setStats] = useState(
+		JSON.parse(localStorage.getItem('stats', 'false'))
+	);
+	const [refreshCount, refreshStats] = useReducer((x) => x + 1, 0);
 	const location = useLocation();
 
 	const bypass_code = location.hash.replace('#', '');
 
 	useEffect(() => {
 		requester('/stats/', 'GET', token)
-		.then(res => {
-			setStats(res);
-			localStorage.setItem('stats', JSON.stringify(res));
-		})
-		.catch(err => {
-			console.log(err);
-			setStats(false);
-		});
+			.then((res) => {
+				setStats(res);
+				localStorage.setItem('stats', JSON.stringify(res));
+			})
+			.catch((err) => {
+				console.log(err);
+				setStats(false);
+			});
 	}, [refreshCount, token]);
 
-	const getStat = (x) => stats && stats[x] ? stats[x] : '?';
-	const getZeroStat = (x) => stats && stats[x] ? stats[x] : '0';
-	const getDateStat = (x) => stats && stats[x] ? moment.utc(stats[x]).tz('America/Edmonton').format('ll') : '?';
+	const getStat = (x) => (stats && stats[x] ? stats[x] : '?');
+	const getZeroStat = (x) => (stats && stats[x] ? stats[x] : '0');
+	const getDateStat = (x) =>
+		stats && stats[x]
+			? moment.utc(stats[x]).tz('America/Edmonton').format('ll')
+			: '?';
 
-	const mcPlayers = stats && stats['minecraft_players'] ? stats['minecraft_players'] : [];
-	const mumbleUsers = stats && stats['mumble_users'] ? stats['mumble_users'] : [];
+	const mcPlayers =
+		stats && stats['minecraft_players'] ? stats['minecraft_players'] : [];
+	const mumbleUsers =
+		stats && stats['mumble_users'] ? stats['mumble_users'] : [];
 
-	const getTrackStat = (x) => stats && stats.track && stats.track[x] ? moment().unix() - stats.track[x]['time'] > 60 ? 'Free' : 'In Use' : '?';
-	const getTrackLast = (x) => stats && stats.track && stats.track[x] ? moment.unix(stats.track[x]['time']).tz('America/Edmonton').format('llll') : 'Unknown';
-	const getTrackAgo = (x) => stats && stats.track && stats.track[x] ? moment.unix(stats.track[x]['time']).tz('America/Edmonton').fromNow() : '';
-	const getTrackName = (x) => stats && stats.track && stats.track[x] && stats.track[x]['username'] ? stats.track[x]['username'] : 'Unknown';
+	const getTrackStat = (x) =>
+		stats && stats.track && stats.track[x]
+			? moment().unix() - stats.track[x]['time'] > 60
+				? 'Free'
+				: 'In Use'
+			: '?';
+	const getTrackLast = (x) =>
+		stats && stats.track && stats.track[x]
+			? moment
+					.unix(stats.track[x]['time'])
+					.tz('America/Edmonton')
+					.format('llll')
+			: 'Unknown';
+	const getTrackAgo = (x) =>
+		stats && stats.track && stats.track[x]
+			? moment
+					.unix(stats.track[x]['time'])
+					.tz('America/Edmonton')
+					.fromNow()
+			: '';
+	const getTrackName = (x) =>
+		stats && stats.track && stats.track[x] && stats.track[x]['username']
+			? stats.track[x]['username']
+			: 'Unknown';
 
-	const alarmStat = () => stats && stats.alarm && moment().unix() - stats.alarm['time'] < 300 ? stats.alarm['data'] > 200 ? 'Armed' : 'Disarmed' : 'Unknown';
+	const alarmStat = () =>
+		stats && stats.alarm && moment().unix() - stats.alarm['time'] < 300
+			? stats.alarm['data'] > 200
+				? 'Armed'
+				: 'Disarmed'
+			: 'Unknown';
 
 	return (
 		<Container>
 			<Grid stackable padded columns={2}>
 				<Grid.Column>
-					{user ?
-						user.member.set_details ?
+					{user ? (
+						user.member.set_details ? (
 							<MemberInfo user={user} />
-						:
+						) : (
 							<div>
 								<Message warning>
-									<Message.Header>Please submit your member details</Message.Header>
-									<p>Press submit at the bottom if everything's correct.</p>
+									<Message.Header>
+										Please submit your member details
+									</Message.Header>
+									<p>
+										Press submit at the bottom if
+										everything's correct.
+									</p>
 								</Message>
 
 								<AccountForm {...props} />
 							</div>
-					:
+						)
+					) : (
 						<div>
-							{bypass_code ?
+							{bypass_code ? (
 								<Message warning>
-									<Message.Header>Outside Registration</Message.Header>
-									<p>This page allows you to sign up from outside of Protospace.</p>
+									<Message.Header>
+										Outside Registration
+									</Message.Header>
+									<p>
+										This page allows you to sign up from
+										outside of Protospace.
+									</p>
 								</Message>
-							:
+							) : (
 								<>
 									<LoginForm {...props} />
 
-									<Divider section horizontal>Or</Divider>
+									<Divider section horizontal>
+										Or
+									</Divider>
 								</>
-							}
+							)}
 
 							<SignupForm {...props} />
 						</div>
-					}
+					)}
 				</Grid.Column>
 				<Grid.Column>
 					<Segment>
-						<Header size='medium'>Home</Header>
-						<p>Welcome to the Protospace member portal! Here you can view member info, join classes, and manage your membership.</p>
+						<Header size="medium">Home</Header>
+						<p>
+							Welcome to the Protospace member portal! Here you
+							can view member info, join classes, and manage your
+							membership.
+						</p>
 
-						<Header size='medium'>Quick Links</Header>
-						<p><a href='http://protospace.ca/' target='_blank' rel='noopener noreferrer'>Main Website</a></p>
-						<p><a href='http://wiki.protospace.ca/Welcome_to_Protospace' target='_blank' rel='noopener noreferrer'>Protospace Wiki</a></p>
-						<p><a href='https://groups.google.com/forum/#!forum/protospace-discuss' target='_blank' rel='noopener noreferrer'>Discussion Google Group</a></p>
-						<p><a href='https://groups.google.com/forum/#!forum/protospace-administration' target='_blank' rel='noopener noreferrer'>Admin Google Group</a></p>
-						{!!user && <p><a href='https://drive.google.com/open?id=0By-vvp6fxFekfmU1cmdxaVRlaldiYXVyTE9rRnNVNjhkc3FjdkFIbjBwQkZ3MVVQX2Ezc3M' target='_blank' rel='noopener noreferrer'>Google Drive</a></p>}
-						{!!user && isAdmin(user) && <p><a href='https://estancia.hippocmms.ca/' target='_blank' rel='noopener noreferrer'>Property Management Portal</a></p>}
+						<Header size="medium">Quick Links</Header>
+						<p>
+							<a
+								href="http://protospace.ca/"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Main Website
+							</a>
+						</p>
+						<p>
+							<a
+								href="http://wiki.protospace.ca/Welcome_to_Protospace"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Protospace Wiki
+							</a>
+						</p>
+						<p>
+							<a
+								href="https://groups.google.com/forum/#!forum/protospace-discuss"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Discussion Google Group
+							</a>
+						</p>
+						<p>
+							<a
+								href="https://groups.google.com/forum/#!forum/protospace-administration"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								Admin Google Group
+							</a>
+						</p>
+						{!!user && (
+							<p>
+								<a
+									href="https://drive.google.com/open?id=0By-vvp6fxFekfmU1cmdxaVRlaldiYXVyTE9rRnNVNjhkc3FjdkFIbjBwQkZ3MVVQX2Ezc3M"
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									Google Drive
+								</a>
+							</p>
+						)}
+						{!!user && isAdmin(user) && (
+							<p>
+								<a
+									href="https://estancia.hippocmms.ca/"
+									target="_blank"
+									rel="noopener noreferrer"
+								>
+									Property Management Portal
+								</a>
+							</p>
+						)}
 
-						<img className='swordfish' src='/swordfish.png' onClick={() => refreshStats()} />
+						<img
+							className="swordfish"
+							src="/swordfish.png"
+							onClick={() => refreshStats()}
+						/>
 
 						<div>
-							<Header size='medium'>Protospace Stats</Header>
-							<p>Next member meeting: {getDateStat('next_meeting')}</p>
-							<p>Next monthly clean: {getDateStat('next_clean')}</p>
-							<p>Member count: {getStat('member_count')} <Link to='/charts'>[more]</Link></p>
+							<Header size="medium">Protospace Stats</Header>
+							<p>
+								Next member meeting:{' '}
+								{getDateStat('next_meeting')}
+							</p>
+							<p>
+								Next monthly clean: {getDateStat('next_clean')}
+							</p>
+							<p>
+								Member count: {getStat('member_count')}{' '}
+								<Link to="/charts">[more]</Link>
+							</p>
 							<p>Green members: {getStat('green_count')}</p>
 							<p>Card scans today: {getZeroStat('card_scans')}</p>
 
 							<p>
-								Minecraft players: {mcPlayers.length} {mcPlayers.length > 5 && '🔥'} <Popup content={
-									<React.Fragment>
-										<p>
-											Server IP:<br />
-											games.protospace.ca
-										</p>
-										<p>
-											Players:<br />
-											{mcPlayers.length ? mcPlayers.map(x => <React.Fragment>{x}<br /></React.Fragment>) : 'None'}
-										</p>
-									</React.Fragment>
-								} trigger={<a>[more]</a>} />
-							{' '}<a href='http://games.protospace.ca:8123/?worldname=world&mapname=flat&zoom=3&x=74&y=64&z=354' target='_blank'>[map]</a>
+								Minecraft players: {mcPlayers.length}{' '}
+								{mcPlayers.length > 5 && '🔥'}{' '}
+								<Popup
+									content={
+										<React.Fragment>
+											<p>
+												Server IP:
+												<br />
+												games.protospace.ca
+											</p>
+											<p>
+												Players:
+												<br />
+												{mcPlayers.length
+													? mcPlayers.map((x) => (
+															<React.Fragment>
+																{x}
+																<br />
+															</React.Fragment>
+													  ))
+													: 'None'}
+											</p>
+										</React.Fragment>
+									}
+									trigger={<a>[more]</a>}
+								/>{' '}
+								<a
+									href="http://games.protospace.ca:8123/?worldname=world&mapname=flat&zoom=3&x=74&y=64&z=354"
+									target="_blank"
+								>
+									[map]
+								</a>
 							</p>
 
-							{stats && stats.hasOwnProperty('mumble_users') && <p>
-								Mumble users: {mumbleUsers.length} <Popup content={
-									<React.Fragment>
-										<p>
-											Server IP:<br />
-											mumble.protospace.ca
-										</p>
-										<p>
-											Users:<br />
-											{mumbleUsers.length ? mumbleUsers.map(x => <React.Fragment>{x}<br /></React.Fragment>) : 'None'}
-										</p>
-									</React.Fragment>
-								} trigger={<a>[more]</a>} />
-							</p>}
+							{stats && stats.hasOwnProperty('mumble_users') && (
+								<p>
+									Mumble users: {mumbleUsers.length}{' '}
+									<Popup
+										content={
+											<React.Fragment>
+												<p>
+													Server IP:
+													<br />
+													mumble.protospace.ca
+												</p>
+												<p>
+													Users:
+													<br />
+													{mumbleUsers.length
+														? mumbleUsers.map(
+																(x) => (
+																	<React.Fragment>
+																		{x}
+																		<br />
+																	</React.Fragment>
+																)
+														  )
+														: 'None'}
+												</p>
+											</React.Fragment>
+										}
+										trigger={<a>[more]</a>}
+									/>
+								</p>
+							)}
 
 							<p>
-								Trotec availability: {getTrackStat('TROTECS300')} <Popup content={
-									<React.Fragment>
-										<p>
-											Last use:<br />
-											{getTrackLast('TROTECS300')}<br />
-											{getTrackAgo('TROTECS300')}<br />
-											by {getTrackName('TROTECS300')}
-										</p>
-									</React.Fragment>
-								} trigger={<a>[more]</a>} />
+								Trotec availability:{' '}
+								{getTrackStat('TROTECS300')}{' '}
+								<Popup
+									content={
+										<React.Fragment>
+											<p>
+												Last use:
+												<br />
+												{getTrackLast('TROTECS300')}
+												<br />
+												{getTrackAgo('TROTECS300')}
+												<br />
+												by {getTrackName('TROTECS300')}
+											</p>
+										</React.Fragment>
+									}
+									trigger={<a>[more]</a>}
+								/>
 							</p>
 
 							<p>
-								Rabbit availability: {getTrackStat('FRICKIN-LASER')} <Popup content={
-									<React.Fragment>
-										<p>
-											Last use:<br />
-											{getTrackLast('FRICKIN-LASER')}<br />
-											{getTrackAgo('FRICKIN-LASER')}<br />
-											by {getTrackName('FRICKIN-LASER')}
-										</p>
-									</React.Fragment>
-								} trigger={<a>[more]</a>} />
+								Rabbit availability:{' '}
+								{getTrackStat('FRICKIN-LASER')}{' '}
+								<Popup
+									content={
+										<React.Fragment>
+											<p>
+												Last use:
+												<br />
+												{getTrackLast('FRICKIN-LASER')}
+												<br />
+												{getTrackAgo('FRICKIN-LASER')}
+												<br />
+												by{' '}
+												{getTrackName('FRICKIN-LASER')}
+											</p>
+										</React.Fragment>
+									}
+									trigger={<a>[more]</a>}
+								/>
 							</p>
 
-							{user && user.member.vetted_date && <p>Alarm status: {alarmStat()}</p>}
+							{user && user.member.vetted_date && (
+								<p>Alarm status: {alarmStat()}</p>
+							)}
 						</div>
-
 					</Segment>
 				</Grid.Column>
 			</Grid>
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/InstructorCourses.js b/webclient/src/InstructorCourses.js
index bc9cc99c..853d0c11 100644
--- a/webclient/src/InstructorCourses.js
+++ b/webclient/src/InstructorCourses.js
@@ -10,10 +10,7 @@ function InstructorCourseEditor(props) {
 	const { input, setInput, error } = props;
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) =>
-		setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
-	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 	const handleQuill = (v, d, s, e) =>
 		s === 'user' &&
 		setInput({
diff --git a/webclient/src/Misc.js b/webclient/src/Misc.js
index fced5a1b..e5678f99 100644
--- a/webclient/src/Misc.js
+++ b/webclient/src/Misc.js
@@ -15,7 +15,11 @@ export function PleaseLogin() {
 				</p>
 			</Message>
 
-			<img className="photo-404" src="/404.jpg" />
+			<img
+				className="photo-404"
+				src="/404.jpg"
+				alt="Rocketship breaking through the clouds."
+			/>
 			<p style={{ textAlign: 'right' }}>
 				<i>Space shuttle Endeavour, NASA (2011)</i>
 			</p>
diff --git a/webclient/src/Transactions.js b/webclient/src/Transactions.js
index 9ef403a7..167823e0 100644
--- a/webclient/src/Transactions.js
+++ b/webclient/src/Transactions.js
@@ -1,21 +1,28 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import ReactToPrint from 'react-to-print';
 import './light.css';
-import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import {
+	Button,
+	Container,
+	Form,
+	Grid,
+	Header,
+	Message,
+	Segment,
+	Table,
+} from 'semantic-ui-react';
 import { MembersDropdown } from './Members.js';
 import { isAdmin, BasicTable, requester } from './utils.js';
-import { NotFound, PleaseLogin } from './Misc.js';
+import { NotFound } from './Misc.js';
 
 export function TransactionEditor(props) {
 	const { token, input, setInput, error, noMemberSearch } = props;
 
-	const [prevInput, setPrevInput] = useState(input);
+	const [prevInput] = useState(input);
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
-	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
 	const makeProps = (name) => ({
 		name: name,
@@ -31,64 +38,63 @@ export function TransactionEditor(props) {
 		//{ key: '3', text: 'Dream Payments (Debit/Credit)', value: 'Dream Pmt' },
 		{ key: '4', text: 'Cheque / Deposit to TD', value: 'TD Chequing' },
 		//{ key: '5', text: 'Member Balance / Protocash', value: 'Member' },
-		{ key: '6', text: 'Membership Adjustment / Clearing', value: 'Clearing' },
+		{
+			key: '6',
+			text: 'Membership Adjustment / Clearing',
+			value: 'Clearing',
+		},
 		{ key: '7', text: 'PayPal', value: 'PayPal' },
 	];
 
-	const sourceOptions = [
-		{ key: '0', text: 'Web (Spaceport)', value: 'Web' },
-		{ key: '1', text: 'Database Edit', value: 'DB Edit' },
-		{ key: '2', text: 'System', value: 'System' },
-		{ key: '3', text: 'Receipt or Statement', value: 'Receipt or Stmt' },
-		{ key: '4', text: 'Quicken Import', value: 'Quicken Import' },
-		{ key: '5', text: 'PayPal IPN', value: 'PayPal IPN' },
-		{ key: '6', text: 'Auto', value: 'Auto' },
-		{ key: '7', text: 'Nexus Database Bulk', value: 'Nexus DB Bulk' },
-		{ key: '8', text: 'IPN Trigger', value: 'IPN Trigger' },
-		{ key: '9', text: 'Intranet Receipt', value: 'Intranet Receipt' },
-		{ key: '10', text: 'Automatic', value: 'Automatic' },
-		{ key: '11', text: 'Manual', value: 'Manual' },
-	];
-
 	const categoryOptions = [
 		{ key: '0', text: 'Membership Dues', value: 'Membership' },
-		{ key: '1', text: 'Payment On Account (ie. Course Fee)', value: 'OnAcct' },
+		{
+			key: '1',
+			text: 'Payment On Account (ie. Course Fee)',
+			value: 'OnAcct',
+		},
 		{ key: '2', text: 'Snack / Pop / Coffee', value: 'Snacks' },
 		{ key: '3', text: 'Donations', value: 'Donation' },
-		{ key: '4', text: 'Consumables (Explain in memo)', value: 'Consumables' },
-		{ key: '5', text: 'Purchase of Locker / Goods / Merch / Stock', value: 'Purchases' },
+		{
+			key: '4',
+			text: 'Consumables (Explain in memo)',
+			value: 'Consumables',
+		},
+		{
+			key: '5',
+			text: 'Purchase of Locker / Goods / Merch / Stock',
+			value: 'Purchases',
+		},
 		//{ key: '6', text: 'Auction, Garage Sale, Nearly Free Shelf', value: 'Garage Sale' },
-		{ key: '7', text: 'Reimbursement (Enter a negative value)', value: 'Reimburse' },
+		{
+			key: '7',
+			text: 'Reimbursement (Enter a negative value)',
+			value: 'Reimburse',
+		},
 		{ key: '8', text: 'Other (Explain in memo)', value: 'Other' },
 	];
 
 	return (
-		<div className='transaction-editor'>
-			{!noMemberSearch && <Form.Field error={error.member_id}>
-				<label>Member (search)</label>
-				<MembersDropdown
-					token={token}
-					{...makeProps('member_id')}
-					onChange={handleValues}
-					initial={input.member_name}
-				/>
-			</Form.Field>}
-
-			<Form.Group widths='equal'>
-				<Form.Input
-					label='Date'
-					fluid
-					{...makeProps('date')}
-				/>
-				<Form.Input
-					label='Amount'
-					fluid
-					{...makeProps('amount')}
-				/>
+		<div className="transaction-editor">
+			{!noMemberSearch && (
+				<Form.Field error={error.member_id}>
+					<label>Member (search)</label>
+					<MembersDropdown
+						token={token}
+						{...makeProps('member_id')}
+						onChange={handleValues}
+						initial={input.member_name}
+					/>
+				</Form.Field>
+			)}
+
+			<Form.Group widths="equal">
+				<Form.Input label="Date" fluid {...makeProps('date')} />
+				<Form.Input label="Amount" fluid {...makeProps('amount')} />
 			</Form.Group>
 
 			<Form.Select
-				label='Category'
+				label="Category"
 				fluid
 				options={categoryOptions}
 				{...makeProps('category')}
@@ -96,19 +102,26 @@ export function TransactionEditor(props) {
 			/>
 
 			<Form.Select
-				label='Payment Method / Account'
+				label="Payment Method / Account"
 				fluid
 				options={accountOptions}
 				{...makeProps('account_type')}
 				onChange={handleValues}
 			/>
 
-			{ input?.account_type != prevInput?.account_type && input?.account_type == 'PayPal' &&
-				<Message visible warning>
-					<Message.Header>Are you absolutely sure?</Message.Header>
-					<p>PayPal transactions should be automatic. Double check there's no duplicate. They may take 24h to appear.</p>
-				</Message>
-			}
+			{input?.account_type !== prevInput?.account_type &&
+				input?.account_type === 'PayPal' && (
+					<Message visible warning>
+						<Message.Header>
+							Are you absolutely sure?
+						</Message.Header>
+						<p>
+							PayPal transactions should be automatic. Double
+							check there's no duplicate. They may take 24h to
+							appear.
+						</p>
+					</Message>
+				)}
 
 			{/* <Form.Group widths='equal'>
 				<Form.Input
@@ -125,29 +138,24 @@ export function TransactionEditor(props) {
 				/>
 			</Form.Group> */}
 
-			<Form.Group widths='equal'>
+			<Form.Group widths="equal">
 				<Form.Input
-					label='Reference Number'
+					label="Reference Number"
 					fluid
 					{...makeProps('reference_number')}
 				/>
 
 				<Form.Input
-					label='Number of Membership Months'
+					label="Number of Membership Months"
 					fluid
 					{...makeProps('number_of_membership_months')}
 				/>
 			</Form.Group>
 
-			<Form.Input
-				label='Memo / Notes'
-				fluid
-				{...makeProps('memo')}
-			/>
-
+			<Form.Input label="Memo / Notes" fluid {...makeProps('memo')} />
 		</div>
 	);
-};
+}
 
 function EditTransaction(props) {
 	const { transaction, setTransaction, token, refreshUser } = props;
@@ -162,30 +170,35 @@ function EditTransaction(props) {
 		setLoading(true);
 		setSuccess(false);
 		const data = { ...input, report_type: null, report_memo: '' };
-		requester('/transactions/'+id+'/', 'PUT', token, data)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError(false);
-			setInput(res);
-			setTransaction(res);
-			if (refreshUser) {
-				refreshUser();
-			}
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+		requester('/transactions/' + id + '/', 'PUT', token, data)
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError(false);
+				setInput(res);
+				setTransaction(res);
+				if (refreshUser) {
+					refreshUser();
+				}
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	return (
 		<div>
-			<Header size='medium'>Edit Transaction</Header>
+			<Header size="medium">Edit Transaction</Header>
 
 			<Form onSubmit={handleSubmit}>
-				<TransactionEditor token={token} input={input} setInput={setInput} error={error} />
+				<TransactionEditor
+					token={token}
+					input={input}
+					setInput={setInput}
+					error={error}
+				/>
 
 				<Form.Button loading={loading} error={error.non_field_errors}>
 					{transaction.report_type ? 'Save & Unreport' : 'Save'}
@@ -194,10 +207,10 @@ function EditTransaction(props) {
 			</Form>
 		</div>
 	);
-};
+}
 
 function ReportTransaction(props) {
-	const { transaction, setTransaction, token, refreshUser } = props;
+	const { transaction, token, refreshUser } = props;
 	const [input, setInput] = useState(transaction);
 	const [error, setError] = useState(false);
 	const [loading, setLoading] = useState(false);
@@ -205,28 +218,26 @@ function ReportTransaction(props) {
 	const { id } = useParams();
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
-	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
 	const handleSubmit = (e) => {
 		if (loading) return;
 		setLoading(true);
 		setSuccess(false);
-		requester('/transactions/'+id+'/report/', 'POST', token, input)
-		.then(res => {
-			setLoading(false);
-			setSuccess(true);
-			setError(false);
-			if (refreshUser) {
-				refreshUser();
-			}
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+		requester('/transactions/' + id + '/report/', 'POST', token, input)
+			.then((res) => {
+				setLoading(false);
+				setSuccess(true);
+				setError(false);
+				if (refreshUser) {
+					refreshUser();
+				}
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -238,17 +249,27 @@ function ReportTransaction(props) {
 
 	return (
 		<div>
-			<Header size='medium'>Report Transaction</Header>
+			<Header size="medium">Report Transaction</Header>
 
-			<p>If this transaction was made in error or there is anything incorrect about it, please report it using this form.</p>
+			<p>
+				If this transaction was made in error or there is anything
+				incorrect about it, please report it using this form.
+			</p>
 			<p>A staff member will review the report as soon as possible.</p>
-			<p>Follow up with <a href='mailto:directors@protospace.ca' target='_blank' rel='noopener noreferrer'>directors@protospace.ca</a>.</p>
+			<p>
+				Follow up with{' '}
+				<a
+					href="mailto:directors@protospace.ca"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					directors@protospace.ca
+				</a>
+				.
+			</p>
 
 			<Form onSubmit={handleSubmit}>
-				<Form.TextArea
-					label='Reason'
-					{...makeProps('report_memo')}
-				/>
+				<Form.TextArea label="Reason" {...makeProps('report_memo')} />
 
 				<Form.Button loading={loading} error={error.non_field_errors}>
 					Submit Report
@@ -257,66 +278,86 @@ function ReportTransaction(props) {
 			</Form>
 		</div>
 	);
-};
+}
 
 export function TransactionList(props) {
 	const { transactions, noMember, noCategory } = props;
 
 	return (
-		<Table basic='very'>
+		<Table basic="very">
 			<Table.Header>
 				<Table.Row>
 					<Table.HeaderCell>Date</Table.HeaderCell>
 					{!noMember && <Table.HeaderCell>Member</Table.HeaderCell>}
 					<Table.HeaderCell>Amount</Table.HeaderCell>
 					<Table.HeaderCell>Account</Table.HeaderCell>
-					{!noCategory && <Table.HeaderCell>Category</Table.HeaderCell>}
+					{!noCategory && (
+						<Table.HeaderCell>Category</Table.HeaderCell>
+					)}
 					<Table.HeaderCell>Memo</Table.HeaderCell>
 				</Table.Row>
 			</Table.Header>
 
 			<Table.Body>
-				{transactions.length ?
-					transactions.slice().sort((a, b) => a.date < b.date ? 1 : -1).map(x =>
-						<Table.Row key={x.id}>
-							<Table.Cell>
-								<Link to={'/transactions/'+x.id}>{x.date}</Link>
-							</Table.Cell>
-							{!noMember && <Table.Cell>
-								{x.member_id ?
-									<Link to={'/members/'+x.member_id}>
-										{x.member_name}
+				{transactions.length ? (
+					transactions
+						.slice()
+						.sort((a, b) => (a.date < b.date ? 1 : -1))
+						.map((x) => (
+							<Table.Row key={x.id}>
+								<Table.Cell>
+									<Link to={'/transactions/' + x.id}>
+										{x.date}
 									</Link>
-								:
-									x.member_name
-								}
-							</Table.Cell>}
-							<Table.Cell>${x.amount}</Table.Cell>
-							<Table.Cell>{x.account_type}</Table.Cell>
-							{!noCategory && <Table.Cell>{x.category}</Table.Cell>}
-							<Table.Cell>{x.memo || x.report_memo}</Table.Cell>
-						</Table.Row>
-					)
-				:
-					<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
-				}
+								</Table.Cell>
+								{!noMember && (
+									<Table.Cell>
+										{x.member_id ? (
+											<Link
+												to={'/members/' + x.member_id}
+											>
+												{x.member_name}
+											</Link>
+										) : (
+											x.member_name
+										)}
+									</Table.Cell>
+								)}
+								<Table.Cell>${x.amount}</Table.Cell>
+								<Table.Cell>{x.account_type}</Table.Cell>
+								{!noCategory && (
+									<Table.Cell>{x.category}</Table.Cell>
+								)}
+								<Table.Cell>
+									{x.memo || x.report_memo}
+								</Table.Cell>
+							</Table.Row>
+						))
+				) : (
+					<Table.Row>
+						<Table.Cell>None</Table.Cell>
+					</Table.Row>
+				)}
 			</Table.Body>
 		</Table>
 	);
-};
+}
 
 export function Transactions(props) {
 	const { user } = props;
 
 	return (
 		<Container>
-			<Header size='large'>Transactions</Header>
-
-			<TransactionList noMember noCategory transactions={user.transactions} />
+			<Header size="large">Transactions</Header>
 
+			<TransactionList
+				noMember
+				noCategory
+				transactions={user.transactions}
+			/>
 		</Container>
 	);
-};
+}
 
 class TransactionTable extends React.Component {
 	render() {
@@ -328,15 +369,15 @@ class TransactionTable extends React.Component {
 				<Table.Body>
 					<Table.Row>
 						<Table.Cell>Member:</Table.Cell>
-						{isAdmin(user) && transaction.member_id ?
+						{isAdmin(user) && transaction.member_id ? (
 							<Table.Cell>
-								<Link to={'/members/'+transaction.member_id}>
+								<Link to={'/members/' + transaction.member_id}>
 									{transaction.member_name}
 								</Link>
 							</Table.Cell>
-						:
+						) : (
 							<Table.Cell>{transaction.member_name}</Table.Cell>
-						}
+						)}
 					</Table.Row>
 					<Table.Row>
 						<Table.Cell>Number:</Table.Cell>
@@ -375,14 +416,18 @@ class TransactionTable extends React.Component {
 						<Table.Cell>{transaction.memo}</Table.Cell>
 					</Table.Row>
 
-					{!!transaction.report_type && <Table.Row>
-						<Table.Cell>Report Type:</Table.Cell>
-						<Table.Cell>{transaction.report_type}</Table.Cell>
-					</Table.Row>}
-					{!!transaction.report_memo && <Table.Row>
-						<Table.Cell>Report Memo:</Table.Cell>
-						<Table.Cell>{transaction.report_memo}</Table.Cell>
-					</Table.Row>}
+					{!!transaction.report_type && (
+						<Table.Row>
+							<Table.Cell>Report Type:</Table.Cell>
+							<Table.Cell>{transaction.report_type}</Table.Cell>
+						</Table.Row>
+					)}
+					{!!transaction.report_memo && (
+						<Table.Row>
+							<Table.Cell>Report Memo:</Table.Cell>
+							<Table.Cell>{transaction.report_memo}</Table.Cell>
+						</Table.Row>
+					)}
 				</Table.Body>
 			</BasicTable>
 		);
@@ -395,10 +440,16 @@ class TransactionPrint extends React.Component {
 		const user = this.props.user;
 
 		return (
-			<div style={{padding: '1in'}}>
-				<Header size='large'>Protospace Transaction Receipt</Header>
+			<div style={{ padding: '1in' }}>
+				<Header size="large">Protospace Transaction Receipt</Header>
 				<p>Calgary Protospace Ltd.</p>
-				<p>Bay 108, 1530 - 27th Ave NE<br />Calgary, AB  T2E 7S6<br />protospace.ca</p>
+				<p>
+					Bay 108, 1530 - 27th Ave NE
+					<br />
+					Calgary, AB T2E 7S6
+					<br />
+					protospace.ca
+				</p>
 				<TransactionTable user={user} transaction={transaction} />
 				<p>Thank you!</p>
 			</div>
@@ -409,63 +460,79 @@ class TransactionPrint extends React.Component {
 export function TransactionDetail(props) {
 	const { token, user } = props;
 	const { id } = useParams();
-	const ownTransaction = user.transactions.find(x => x.id == id);
+	const ownTransaction = user.transactions.find((x) => x.id === id);
 	const [transaction, setTransaction] = useState(ownTransaction || false);
 	const [error, setError] = useState(false);
 	const printRef = useRef();
 
 	useEffect(() => {
-		requester('/transactions/'+id+'/', 'GET', token)
-		.then(res => {
-			setTransaction(res);
-			setError(false);
-		})
-		.catch(err => {
-			console.log(err);
-			setError(true);
-		});
+		requester('/transactions/' + id + '/', 'GET', token)
+			.then((res) => {
+				setTransaction(res);
+				setError(false);
+			})
+			.catch((err) => {
+				console.log(err);
+				setError(true);
+			});
 	}, [ownTransaction]);
 
 	return (
 		<Container>
-			{!error ?
-				transaction ?
+			{!error ? (
+				transaction ? (
 					<div>
-						<Header size='large'>Transaction Receipt</Header>
+						<Header size="large">Transaction Receipt</Header>
 
 						<Grid stackable columns={2}>
 							<Grid.Column>
-								<TransactionTable user={user} transaction={transaction} />
+								<TransactionTable
+									user={user}
+									transaction={transaction}
+								/>
 
 								<div style={{ display: 'none' }}>
-									<TransactionPrint ref={printRef} user={user} transaction={transaction} />
+									<TransactionPrint
+										ref={printRef}
+										user={user}
+										transaction={transaction}
+									/>
 								</div>
 								<ReactToPrint
-									trigger={() => <Button>Print Receipt</Button>}
+									trigger={() => (
+										<Button>Print Receipt</Button>
+									)}
 									content={() => printRef.current}
 								/>
 							</Grid.Column>
 
 							<Grid.Column>
-								{isAdmin(user) ?
+								{isAdmin(user) ? (
 									<Segment padded>
-										<EditTransaction transaction={transaction} setTransaction={setTransaction} {...props} />
+										<EditTransaction
+											transaction={transaction}
+											setTransaction={setTransaction}
+											{...props}
+										/>
 									</Segment>
-								:
+								) : (
 									<Segment padded>
-										<ReportTransaction transaction={transaction} setTransaction={setTransaction} {...props} />
+										<ReportTransaction
+											transaction={transaction}
+											setTransaction={setTransaction}
+											{...props}
+										/>
 									</Segment>
-								}
+								)}
 							</Grid.Column>
 						</Grid>
-
 					</div>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<NotFound />
-			}
+			)}
 		</Container>
 	);
-};
-
+}

From cdce9dd2f2abc57d962af98c8bd17c9ffdb3581f Mon Sep 17 00:00:00 2001
From: Elijah Lucian <elijahlucian@gmail.com>
Date: Sun, 2 May 2021 21:55:15 -0600
Subject: [PATCH 3/3] =?UTF-8?q?=F0=9F=A7=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webclient/src/Account.js           | 257 ++++++++++--------
 webclient/src/Admin.js             | 379 +++++++++++++++++---------
 webclient/src/App.js               |   1 +
 webclient/src/Classes.js           |   5 +-
 webclient/src/Courses.js           | 227 ++++++++++------
 webclient/src/InstructorClasses.js | 420 +++++++++++++++++------------
 webclient/src/Members.js           | 363 +++++++++++++++++--------
 webclient/src/PasswordReset.js     |   9 +-
 webclient/src/utils.js             |   8 +-
 9 files changed, 1041 insertions(+), 628 deletions(-)

diff --git a/webclient/src/Account.js b/webclient/src/Account.js
index fe28b905..9d884ac6 100644
--- a/webclient/src/Account.js
+++ b/webclient/src/Account.js
@@ -1,12 +1,19 @@
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import * as loadImage from 'blueimp-load-image';
 import ReactCrop from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
 import './light.css';
-import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { BasicTable, staticUrl, requester } from './utils.js';
-import { LoginForm, SignupForm } from './LoginSignup.js';
+import {
+	Button,
+	Container,
+	Checkbox,
+	Form,
+	Grid,
+	Header,
+	Segment,
+} from 'semantic-ui-react';
+import { requester } from './utils.js';
 
 function LogoutEverywhere(props) {
 	const { token } = props;
@@ -20,16 +27,16 @@ function LogoutEverywhere(props) {
 			if (loading) return;
 			setLoading(true);
 			requester('/rest-auth/logout/', 'POST', token, {})
-			.then(res => {
-				setYousure(false);
-				history.push('/');
-				window.scrollTo(0, 0);
-			})
-			.catch(err => {
-				setLoading(false);
-				console.log(err);
-				setError(err.data);
-			});
+				.then((res) => {
+					setYousure(false);
+					history.push('/');
+					window.scrollTo(0, 0);
+				})
+				.catch((err) => {
+					setLoading(false);
+					console.log(err);
+					setError(err.data);
+				});
 		} else {
 			setYousure(true);
 		}
@@ -37,7 +44,7 @@ function LogoutEverywhere(props) {
 
 	return (
 		<div>
-			<Header size='medium'>Log Out from Everywhere</Header>
+			<Header size="medium">Log Out from Everywhere</Header>
 
 			<p>Use this to log out from all sessions on all computers.</p>
 
@@ -48,7 +55,7 @@ function LogoutEverywhere(props) {
 			</Button>
 		</div>
 	);
-};
+}
 
 function ChangePasswordForm(props) {
 	const { token } = props;
@@ -58,22 +65,21 @@ function ChangePasswordForm(props) {
 	const history = useHistory();
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 
 	const handleSubmit = (e) => {
 		if (loading) return;
 		setLoading(true);
 		requester('/password/change/', 'POST', token, input)
-		.then(res => {
-			setError({});
-			history.push('/');
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setError({});
+				history.push('/');
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -85,23 +91,23 @@ function ChangePasswordForm(props) {
 
 	return (
 		<Form onSubmit={handleSubmit}>
-			<Header size='medium'>Change Password</Header>
+			<Header size="medium">Change Password</Header>
 
 			<Form.Input
-				label='Old Password'
-				type='password'
+				label="Old Password"
+				type="password"
 				required
 				{...makeProps('old_password')}
 			/>
 			<Form.Input
-				label='New Password'
-				type='password'
+				label="New Password"
+				type="password"
 				required
 				{...makeProps('new_password1')}
 			/>
 			<Form.Input
-				label='Confirm Password'
-				type='password'
+				label="Confirm Password"
+				type="password"
 				required
 				{...makeProps('new_password2')}
 			/>
@@ -111,8 +117,7 @@ function ChangePasswordForm(props) {
 			</Form.Button>
 		</Form>
 	);
-};
-
+}
 
 export function ImageCrop(props) {
 	const { file, crop, setCrop } = props;
@@ -120,10 +125,10 @@ export function ImageCrop(props) {
 
 	useEffect(() => {
 		setSrc(false);
-		setCrop({ unit: '%', height: 100, aspect: 3/4 });
+		setCrop({ unit: '%', height: 100, aspect: 3 / 4 });
 		loadImage(
 			file,
-			img => {
+			(img) => {
 				setSrc(img.toDataURL());
 			},
 			{
@@ -136,16 +141,15 @@ export function ImageCrop(props) {
 		);
 	}, [file]);
 
-	return (
-		src ?
-			<ReactCrop
-				src={src}
-				crop={crop}
-				locked
-				onChange={(crop, percentCrop) => setCrop(percentCrop)}
-			/>
-		:
-			<p>Loading...</p>
+	return src ? (
+		<ReactCrop
+			src={src}
+			crop={crop}
+			locked
+			onChange={(crop, percentCrop) => setCrop(percentCrop)}
+		/>
+	) : (
+		<p>Loading...</p>
 	);
 }
 
@@ -159,25 +163,30 @@ export function AccountForm(props) {
 	const history = useHistory();
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleUpload = (e, v) =>
+		setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
 	const handleSubmit = (e) => {
 		if (loading) return;
 		setLoading(true);
-		const data = { ...input, email: input.email.toLowerCase(), crop: JSON.stringify(crop) };
+		const data = {
+			...input,
+			email: input.email.toLowerCase(),
+			crop: JSON.stringify(crop),
+		};
 		requester('/members/' + member.id + '/', 'PATCH', token, data)
-		.then(res => {
-			setError({});
-			refreshUser();
-			history.push('/');
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setError({});
+				refreshUser();
+				history.push('/');
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -185,27 +194,27 @@ export function AccountForm(props) {
 		onChange: handleChange,
 		value: input[name] || '',
 		error: error[name],
-		...(input[name] ? {} : {icon: 'edit'}),
+		...(input[name] ? {} : { icon: 'edit' }),
 	});
 
 	return (
 		<Form onSubmit={handleSubmit}>
-			<Header size='medium'>Member Details</Header>
+			<Header size="medium">Member Details</Header>
 
 			<Form.Input
-				label='Preferred First Name'
+				label="Preferred First Name"
 				required
 				{...makeProps('preferred_name')}
 			/>
 
 			<Form.Input
-				label='Email Address'
+				label="Email Address"
 				required
 				{...makeProps('email')}
 			/>
 
 			<Form.Input
-				label='Phone Number (999) 555-1234'
+				label="Phone Number (999) 555-1234"
 				required
 				{...makeProps('phone')}
 			/>
@@ -213,56 +222,64 @@ export function AccountForm(props) {
 			<Form.Field>
 				<label>Are you under 18 years old?</label>
 				<Checkbox
-					label='I am a minor'
-					name='is_minor'
+					label="I am a minor"
+					name="is_minor"
 					onChange={handleCheck}
 					checked={input.is_minor}
 				/>
 			</Form.Field>
 
-			{input.is_minor && <Form.Input
-				label='Birthdate YYYY-MM-DD'
-				{...makeProps('birthdate')}
-			/>}
-			{input.is_minor && <Form.Input
-				label="Guardian's Name"
-				{...makeProps('guardian_name')}
-			/>}
+			{input.is_minor && (
+				<Form.Input
+					label="Birthdate YYYY-MM-DD"
+					{...makeProps('birthdate')}
+				/>
+			)}
+			{input.is_minor && (
+				<Form.Input
+					label="Guardian's Name"
+					{...makeProps('guardian_name')}
+				/>
+			)}
 
 			<Form.Input
-				label='Emergency Contact Name'
+				label="Emergency Contact Name"
 				{...makeProps('emergency_contact_name')}
 			/>
 			<Form.Input
-				label='Emergency Contact Phone'
+				label="Emergency Contact Phone"
 				{...makeProps('emergency_contact_phone')}
 			/>
 
 			<Form.Input
-				label='Member Photo'
-				name='photo'
-				type='file'
-				accept='image/*'
+				label="Member Photo"
+				name="photo"
+				type="file"
+				accept="image/*"
 				onChange={handleUpload}
 			/>
 
-			{input.photo &&
+			{input.photo && (
 				<>
-					<ImageCrop file={input.photo} crop={crop} setCrop={setCrop} />
-					{crop && crop.width === crop.height ?
+					<ImageCrop
+						file={input.photo}
+						crop={crop}
+						setCrop={setCrop}
+					/>
+					{crop && crop.width === crop.height ? (
 						<p>It's the perfect size!</p>
-					:
+					) : (
 						<p>Move the box above to crop your image.</p>
-					}
+					)}
 				</>
-			}
+			)}
 
 			<Form.Button loading={loading} error={error.non_field_errors}>
 				Submit
 			</Form.Button>
 		</Form>
 	);
-};
+}
 
 export function BioNotesForm(props) {
 	const { token, user, refreshUser } = props;
@@ -273,7 +290,8 @@ export function BioNotesForm(props) {
 	const history = useHistory();
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
+	const handleUpload = (e, v) =>
+		setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
 
@@ -281,16 +299,16 @@ export function BioNotesForm(props) {
 		if (loading) return;
 		setLoading(true);
 		requester('/members/' + member.id + '/', 'PATCH', token, input)
-		.then(res => {
-			setError({});
-			refreshUser();
-			history.push('/');
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setError({});
+				refreshUser();
+				history.push('/');
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -302,17 +320,30 @@ export function BioNotesForm(props) {
 
 	return (
 		<Form onSubmit={handleSubmit}>
-			<Header size='medium'>Bio / Notes</Header>
+			<Header size="medium">Bio / Notes</Header>
 
 			<Form.TextArea
-				label={'Public Bio' + (input.public_bio && input.public_bio.length > 400 ? ' — ' + input.public_bio.length + ' / 512' : '')}
+				label={
+					'Public Bio' +
+					(input.public_bio && input.public_bio.length > 400
+						? ' — ' + input.public_bio.length + ' / 512'
+						: '')
+				}
 				{...makeProps('public_bio')}
 			/>
 
-			<p>Bio shared with members. Example: contact info, allergies, hobbies, etc.</p>
+			<p>
+				Bio shared with members. Example: contact info, allergies,
+				hobbies, etc.
+			</p>
 
 			<Form.TextArea
-				label={'Private Notes' + (input.private_notes && input.private_notes.length > 400 ? ' — ' + input.private_notes.length + ' / 512' : '')}
+				label={
+					'Private Notes' +
+					(input.private_notes && input.private_notes.length > 400
+						? ' — ' + input.private_notes.length + ' / 512'
+						: '')
+				}
 				{...makeProps('private_notes')}
 			/>
 
@@ -323,22 +354,30 @@ export function BioNotesForm(props) {
 			</Form.Button>
 		</Form>
 	);
-};
+}
 
 export function Account(props) {
 	return (
 		<Container>
-			<Header size='large'>Account Settings</Header>
+			<Header size="large">Account Settings</Header>
 			<Grid stackable columns={2}>
 				<Grid.Column>
-					<Segment padded><AccountForm {...props} /></Segment>
+					<Segment padded>
+						<AccountForm {...props} />
+					</Segment>
 				</Grid.Column>
 				<Grid.Column>
-					<Segment padded><BioNotesForm {...props} /></Segment>
-					<Segment padded><ChangePasswordForm {...props} /></Segment>
-					<Segment padded><LogoutEverywhere {...props} /></Segment>
+					<Segment padded>
+						<BioNotesForm {...props} />
+					</Segment>
+					<Segment padded>
+						<ChangePasswordForm {...props} />
+					</Segment>
+					<Segment padded>
+						<LogoutEverywhere {...props} />
+					</Segment>
 				</Grid.Column>
 			</Grid>
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/Admin.js b/webclient/src/Admin.js
index 5828818e..113e9ecd 100644
--- a/webclient/src/Admin.js
+++ b/webclient/src/Admin.js
@@ -1,19 +1,24 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import './light.css';
-import { Button, Container, Checkbox, Dimmer, Divider, Dropdown, Form, Grid, Header, Icon, Image, Menu, Message, Segment, Table } from 'semantic-ui-react';
+import {
+	Button,
+	Container,
+	Checkbox,
+	Header,
+	Icon,
+	Table,
+} from 'semantic-ui-react';
 import moment from 'moment-timezone';
-import { apiUrl, statusColor, BasicTable, staticUrl, requester } from './utils.js';
-import { NotFound } from './Misc.js';
+import { apiUrl, statusColor, requester } from './utils.js';
 
 let vettingCache = false;
 let historyCache = false;
 let excludeSystemCache = true;
 let focusCache = false;
 
-
 export function AdminVet(props) {
-	const { token, user, member, refreshVetting } = props;
+	const { token, member, refreshVetting } = props;
 	const [loading, setLoading] = useState(false);
 	const [yousure, setYousure] = useState(false);
 
@@ -22,98 +27,129 @@ export function AdminVet(props) {
 
 		if (yousure) {
 			setLoading(true);
-			const data = {vetted_date: moment.utc().tz('America/Edmonton').format('YYYY-MM-DD')}
+			const data = {
+				vetted_date: moment
+					.utc()
+					.tz('America/Edmonton')
+					.format('YYYY-MM-DD'),
+			};
 			requester('/members/' + member.id + '/', 'PATCH', token, data)
-			.then(res => {
-				refreshVetting();
-			})
-			.catch(err => {
-				console.log(err);
-			});
+				.then((res) => {
+					refreshVetting();
+				})
+				.catch((err) => {
+					console.log(err);
+				});
 		} else {
 			setYousure(true);
 		}
 	};
 
 	return (
-		<Button
-			color='green'
-			onClick={handleVet}
-			loading={loading}
-		>
+		<Button color="green" onClick={handleVet} loading={loading}>
 			{yousure ? 'You Sure?' : 'Vet ' + member.first_name}
 		</Button>
 	);
 }
 
 export function AdminVetting(props) {
-	const { token, user } = props;
+	const { token } = props;
 	const [vetting, setVetting] = useState(vettingCache);
-	const [refreshCount, refreshVetting] = useReducer(x => x + 1, 0);
-	const [error, setError] = useState(false);
+	const [refreshCount, refreshVetting] = useReducer((x) => x + 1, 0);
+	const [error] = useState(false);
 
 	useEffect(() => {
 		requester('/vetting/', 'GET', token)
-		.then(res => {
-			setVetting(res.results);
-			vettingCache = res.results;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setVetting(res.results);
+				vettingCache = res.results;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, [refreshCount]);
 
 	return (
 		<div>
-			{!error ?
-				vetting ?
+			{!error ? (
+				vetting ? (
 					<>
-						<Table collapsing basic='very'>
+						<Table collapsing basic="very">
 							<Table.Header>
 								<Table.Row>
 									<Table.HeaderCell>Name</Table.HeaderCell>
 									<Table.HeaderCell></Table.HeaderCell>
 									<Table.HeaderCell>Status</Table.HeaderCell>
-									<Table.HeaderCell>Start Date</Table.HeaderCell>
+									<Table.HeaderCell>
+										Start Date
+									</Table.HeaderCell>
 									<Table.HeaderCell></Table.HeaderCell>
 								</Table.Row>
 							</Table.Header>
 
 							<Table.Body>
-								{vetting.map(x =>
+								{vetting.map((x) => (
 									<Table.Row key={x.id}>
-										<Table.Cell><Link to={'/members/'+x.id}>{x.first_name} {x.last_name}</Link></Table.Cell>
-										<Table.Cell><a href={'mailto:'+x.email}>Email</a></Table.Cell>
 										<Table.Cell>
-											<Icon name='circle' color={statusColor[x.status]} />
+											<Link to={'/members/' + x.id}>
+												{x.first_name} {x.last_name}
+											</Link>
+										</Table.Cell>
+										<Table.Cell>
+											<a href={'mailto:' + x.email}>
+												Email
+											</a>
+										</Table.Cell>
+										<Table.Cell>
+											<Icon
+												name="circle"
+												color={statusColor[x.status]}
+											/>
 											{x.status || 'Unknown'}
 										</Table.Cell>
-										<Table.Cell>{x.current_start_date}</Table.Cell>
-										<Table.Cell><AdminVet {...props} member={x} refreshVetting={refreshVetting} /></Table.Cell>
+										<Table.Cell>
+											{x.current_start_date}
+										</Table.Cell>
+										<Table.Cell>
+											<AdminVet
+												{...props}
+												member={x}
+												refreshVetting={refreshVetting}
+											/>
+										</Table.Cell>
 									</Table.Row>
-								)}
+								))}
 							</Table.Body>
 						</Table>
 
 						<p>
-							&#8627; <a href={'mailto:'+vetting.map(x => x.email).join(',')}>Email All</a>
+							&#8627;{' '}
+							<a
+								href={
+									'mailto:' +
+									vetting.map((x) => x.email).join(',')
+								}
+							>
+								Email All
+							</a>
 						</p>
 					</>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<p>Error loading.</p>
-			}
+			)}
 		</div>
 	);
 }
 
 export function AdminHistory(props) {
-	const { token, user } = props;
+	const { token } = props;
 	const [history, setHistory] = useState(historyCache);
 	const [excludeSystem, setExcludeSystem] = useState(excludeSystemCache);
 	const [focus, setFocus] = useState(focusCache);
-	const [error, setError] = useState(false);
+	const [error] = useState(false);
 
 	const handleExcludeSystem = (e, v) => {
 		setExcludeSystem(v.checked);
@@ -122,93 +158,159 @@ export function AdminHistory(props) {
 
 	useEffect(() => {
 		const extra = excludeSystem ? '?exclude_system' : '';
-		requester('/history/'+extra, 'GET', token)
-		.then(res => {
-			setHistory(res.results);
-			historyCache = res.results;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+		requester('/history/' + extra, 'GET', token)
+			.then((res) => {
+				setHistory(res.results);
+				historyCache = res.results;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, [excludeSystem]);
 
 	return (
 		<div>
-			{!error ?
-				history ?
+			{!error ? (
+				history ? (
 					<>
 						<Checkbox
-							label='Exclude System'
+							label="Exclude System"
 							onChange={handleExcludeSystem}
 							checked={excludeSystem}
 						/>
 
-						<Table basic='very'>
+						<Table basic="very">
 							<Table.Header>
 								<Table.Row>
 									<Table.HeaderCell>Date</Table.HeaderCell>
-									<Table.HeaderCell>Username</Table.HeaderCell>
+									<Table.HeaderCell>
+										Username
+									</Table.HeaderCell>
 									<Table.HeaderCell>Type</Table.HeaderCell>
 									<Table.HeaderCell>Owner</Table.HeaderCell>
 									<Table.HeaderCell>Object</Table.HeaderCell>
-									<Table.HeaderCell>Changed Fields</Table.HeaderCell>
+									<Table.HeaderCell>
+										Changed Fields
+									</Table.HeaderCell>
 								</Table.Row>
 							</Table.Header>
 
 							<Table.Body>
-								{history.map(x =>
+								{history.map((x) => (
 									<React.Fragment key={x.id}>
 										<Table.Row>
 											<Table.Cell>
-												<a href='javascript:;' onClick={() => setFocus(x.id)}>
-													{moment.utc(x.history_date).tz('America/Edmonton').format('YYYY-MM-DD')}
+												<a
+													href="javascript:;"
+													onClick={() =>
+														setFocus(x.id)
+													}
+												>
+													{moment
+														.utc(x.history_date)
+														.tz('America/Edmonton')
+														.format('YYYY-MM-DD')}
 												</a>
 											</Table.Cell>
-											<Table.Cell>{x.is_system ? 'System' : (x.history_user || 'Deleted User')}</Table.Cell>
-											<Table.Cell>{x.history_type}</Table.Cell>
-											<Table.Cell>{x.owner_name}</Table.Cell>
-											<Table.Cell>{x.object_name}</Table.Cell>
-											<Table.Cell>{x.changes.map(x => x.field).join(', ')}</Table.Cell>
+											<Table.Cell>
+												{x.is_system
+													? 'System'
+													: x.history_user ||
+													  'Deleted User'}
+											</Table.Cell>
+											<Table.Cell>
+												{x.history_type}
+											</Table.Cell>
+											<Table.Cell>
+												{x.owner_name}
+											</Table.Cell>
+											<Table.Cell>
+												{x.object_name}
+											</Table.Cell>
+											<Table.Cell>
+												{x.changes
+													.map((x) => x.field)
+													.join(', ')}
+											</Table.Cell>
 										</Table.Row>
 
-										{focus == x.id &&
-											<tr><td colSpan={6}>
-												<p>Object ID: {x.object_id}, <a href={apiUrl+x.revert_url} target='_blank'>Database Revert</a></p>
-												{!!x.changes.length &&
-													<Table basic='very'>
-														<Table.Header>
-															<Table.Row>
-																<Table.HeaderCell>Change</Table.HeaderCell>
-																<Table.HeaderCell>Before</Table.HeaderCell>
-																<Table.HeaderCell>After</Table.HeaderCell>
-															</Table.Row>
-														</Table.Header>
-														<Table.Body>
-															{x.changes.map(y =>
-																<Table.Row key={y.field}>
-																	<Table.Cell>{y.field}</Table.Cell>
-																	<Table.Cell>{y.old}</Table.Cell>
-																	<Table.Cell>{y.new}</Table.Cell>
+										{focus === x.id && (
+											<tr>
+												<td colSpan={6}>
+													<p>
+														Object ID: {x.object_id}
+														,{' '}
+														<a
+															href={
+																apiUrl +
+																x.revert_url
+															}
+															target="_blank"
+														>
+															Database Revert
+														</a>
+													</p>
+													{!!x.changes.length && (
+														<Table basic="very">
+															<Table.Header>
+																<Table.Row>
+																	<Table.HeaderCell>
+																		Change
+																	</Table.HeaderCell>
+																	<Table.HeaderCell>
+																		Before
+																	</Table.HeaderCell>
+																	<Table.HeaderCell>
+																		After
+																	</Table.HeaderCell>
 																</Table.Row>
-															)}
-														</Table.Body>
-													</Table>
-												}
-											</td></tr>
-										}
+															</Table.Header>
+															<Table.Body>
+																{x.changes.map(
+																	(y) => (
+																		<Table.Row
+																			key={
+																				y.field
+																			}
+																		>
+																			<Table.Cell>
+																				{
+																					y.field
+																				}
+																			</Table.Cell>
+																			<Table.Cell>
+																				{
+																					y.old
+																				}
+																			</Table.Cell>
+																			<Table.Cell>
+																				{
+																					y.new
+																				}
+																			</Table.Cell>
+																		</Table.Row>
+																	)
+																)}
+															</Table.Body>
+														</Table>
+													)}
+												</td>
+											</tr>
+										)}
 									</React.Fragment>
-								)}
+								))}
 							</Table.Body>
 						</Table>
 					</>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<p>Error loading.</p>
-			}
+			)}
 		</div>
 	);
-};
+}
 
 let backupsCache = false;
 
@@ -218,67 +320,88 @@ export function AdminBackups(props) {
 
 	useEffect(() => {
 		requester('/backup/', 'GET')
-		.then(res => {
-			setBackups(res);
-			backupsCache = res;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setBackups(res);
+				backupsCache = res;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, []);
 
 	return (
 		<div>
-			{!error ?
-				backups ?
-					<Table collapsing basic='very'>
+			{!error ? (
+				backups ? (
+					<Table collapsing basic="very">
 						<Table.Header>
 							<Table.Row>
 								<Table.HeaderCell>Username</Table.HeaderCell>
-								<Table.HeaderCell>Last Downloaded</Table.HeaderCell>
-								<Table.HeaderCell>Less than 24 hours ago?</Table.HeaderCell>
+								<Table.HeaderCell>
+									Last Downloaded
+								</Table.HeaderCell>
+								<Table.HeaderCell>
+									Less than 24 hours ago?
+								</Table.HeaderCell>
 							</Table.Row>
 						</Table.Header>
 
 						<Table.Body>
-							{backups.filter(x => x.download_time).map(x =>
-								<Table.Row key={x.backup_user}>
-									<Table.Cell>{x.backup_user}</Table.Cell>
-									<Table.Cell>{moment.utc(x.download_time).tz('America/Edmonton').format('LLLL')}</Table.Cell>
-									<Table.Cell>{x.less_than_24h ? 'Yes' : 'No - please investigate'}</Table.Cell>
-								</Table.Row>
-							)}
+							{backups
+								.filter((x) => x.download_time)
+								.map((x) => (
+									<Table.Row key={x.backup_user}>
+										<Table.Cell>{x.backup_user}</Table.Cell>
+										<Table.Cell>
+											{moment
+												.utc(x.download_time)
+												.tz('America/Edmonton')
+												.format('LLLL')}
+										</Table.Cell>
+										<Table.Cell>
+											{x.less_than_24h
+												? 'Yes'
+												: 'No - please investigate'}
+										</Table.Cell>
+									</Table.Row>
+								))}
 						</Table.Body>
 					</Table>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<p>Error loading.</p>
-			}
+			)}
 		</div>
 	);
-};
+}
 
 export function Admin(props) {
 	return (
 		<Container>
-			<Header size='large'>Portal Admin</Header>
+			<Header size="large">Portal Admin</Header>
 
-			<Header size='medium'>Ready to Vet</Header>
-			<p>Members who are Current or Due, and past their probationary period.</p>
+			<Header size="medium">Ready to Vet</Header>
+			<p>
+				Members who are Current or Due, and past their probationary
+				period.
+			</p>
 			<AdminVetting {...props} />
 
-			<Header size='medium'>Member Data Backup</Header>
-			<p>Spaceport backups are created daily. 14 days are kept on the server.</p>
+			<Header size="medium">Member Data Backup</Header>
+			<p>
+				Spaceport backups are created daily. 14 days are kept on the
+				server.
+			</p>
 
-			<Header size='small'>Backup Downloads</Header>
+			<Header size="small">Backup Downloads</Header>
 			<AdminBackups />
 
-			<Header size='medium'>History</Header>
+			<Header size="medium">History</Header>
 			<p>Last 50 database changes:</p>
 
 			<AdminHistory {...props} />
-
 		</Container>
 	);
-};
+}
diff --git a/webclient/src/App.js b/webclient/src/App.js
index c8a0fa27..9343d085 100644
--- a/webclient/src/App.js
+++ b/webclient/src/App.js
@@ -110,6 +110,7 @@ function App() {
 								<img
 									src="/logo-long.svg"
 									className="logo-long"
+									alt="Logo"
 								/>
 							</Link>
 						</div>
diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js
index e959e73f..ceb512fe 100644
--- a/webclient/src/Classes.js
+++ b/webclient/src/Classes.js
@@ -125,7 +125,8 @@ export function ClassDetail(props) {
 	const [loading, setLoading] = useState(false);
 	const { token, user, refreshUser } = props;
 	const { id } = useParams();
-	const userTraining = clazz && clazz.students.find((x) => x.user == user.id);
+	const userTraining =
+		clazz && clazz.students.find((x) => x.user === user.id);
 
 	useEffect(() => {
 		requester('/sessions/' + id + '/', 'GET', token)
@@ -257,7 +258,7 @@ export function ClassDetail(props) {
 							</Segment>
 						)}
 
-						{clazz.instructor != user.id &&
+						{clazz.instructor !== user.id &&
 							(userTraining ? (
 								<div>
 									<p>
diff --git a/webclient/src/Courses.js b/webclient/src/Courses.js
index 27c05fb5..d9a3ab0f 100644
--- a/webclient/src/Courses.js
+++ b/webclient/src/Courses.js
@@ -1,11 +1,14 @@
 import React, { useState, useEffect } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import { 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 { Container, Header, Segment, Table } from 'semantic-ui-react';
 import moment from 'moment-timezone';
 import { isInstructor, getInstructor, requester } from './utils.js';
-import { NotFound, PleaseLogin } from './Misc.js';
-import { InstructorCourseList, InstructorCourseDetail } from './InstructorCourses.js';
+import { NotFound } from './Misc.js';
+import {
+	InstructorCourseList,
+	InstructorCourseDetail,
+} from './InstructorCourses.js';
 import { InstructorClassList } from './InstructorClasses.js';
 
 let courseCache = false;
@@ -16,25 +19,31 @@ export function Courses(props) {
 
 	useEffect(() => {
 		requester('/courses/', 'GET', token)
-		.then(res => {
-			setCourses(res.results);
-			courseCache = res.results;
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setCourses(res.results);
+				courseCache = res.results;
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, []);
 
 	return (
 		<Container>
-			<Header size='large'>Courses</Header>
-
-			{isInstructor(user) && <Segment padded>
-				<InstructorCourseList courses={courses} setCourses={setCourses} {...props} />
-			</Segment>}
-
-			{courses ?
-				<Table basic='very'>
+			<Header size="large">Courses</Header>
+
+			{isInstructor(user) && (
+				<Segment padded>
+					<InstructorCourseList
+						courses={courses}
+						setCourses={setCourses}
+						{...props}
+					/>
+				</Segment>
+			)}
+
+			{courses ? (
+				<Table basic="very">
 					<Table.Header>
 						<Table.Row>
 							<Table.HeaderCell>Name</Table.HeaderCell>
@@ -42,26 +51,29 @@ export function Courses(props) {
 					</Table.Header>
 
 					<Table.Body>
-						{courses.length ?
-							courses.map(x =>
+						{courses.length ? (
+							courses.map((x) => (
 								<Table.Row key={x.id}>
 									<Table.Cell>
-										<Link to={'/courses/'+x.id}>{x.name}</Link>
+										<Link to={'/courses/' + x.id}>
+											{x.name}
+										</Link>
 									</Table.Cell>
 								</Table.Row>
-							)
-						:
-							<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
-						}
+							))
+						) : (
+							<Table.Row>
+								<Table.Cell>None</Table.Cell>
+							</Table.Row>
+						)}
 					</Table.Body>
 				</Table>
-			:
+			) : (
 				<p>Loading...</p>
-			}
-
+			)}
 		</Container>
 	);
-};
+}
 
 export function CourseDetail(props) {
 	const [course, setCourse] = useState(false);
@@ -70,78 +82,125 @@ export function CourseDetail(props) {
 	const { id } = useParams();
 
 	useEffect(() => {
-		requester('/courses/'+id+'/', 'GET', token)
-		.then(res => {
-			setCourse(res);
-		})
-		.catch(err => {
-			console.log(err);
-			setError(true);
-		});
+		requester('/courses/' + id + '/', 'GET', token)
+			.then((res) => {
+				setCourse(res);
+			})
+			.catch((err) => {
+				console.log(err);
+				setError(true);
+			});
 	}, []);
 
 	return (
 		<Container>
-			{!error ?
-				course ?
+			{!error ? (
+				course ? (
 					<div>
-						<Header size='large'>{course.name}</Header>
-
-						{isInstructor(user) && <Segment padded>
-							<InstructorCourseDetail course={course} setCourse={setCourse} {...props} />
-						</Segment>}
-
-						<Header size='medium'>Course Description</Header>
-						{course.is_old ?
-							course.description.split('\n').map((x, i) =>
-								<p key={i}>{x}</p>
-							)
-						:
-							<div dangerouslySetInnerHTML={{__html: course.description}} />
-						}
-
-						<Header size='medium'>Classes</Header>
-
-						{isInstructor(user) && <Segment padded>
-							<InstructorClassList course={course} setCourse={setCourse} {...props} />
-						</Segment>}
-
-						<Table basic='very'>
+						<Header size="large">{course.name}</Header>
+
+						{isInstructor(user) && (
+							<Segment padded>
+								<InstructorCourseDetail
+									course={course}
+									setCourse={setCourse}
+									{...props}
+								/>
+							</Segment>
+						)}
+
+						<Header size="medium">Course Description</Header>
+						{course.is_old ? (
+							course.description
+								.split('\n')
+								.map((x, i) => <p key={i}>{x}</p>)
+						) : (
+							<div
+								dangerouslySetInnerHTML={{
+									__html: course.description,
+								}}
+							/>
+						)}
+
+						<Header size="medium">Classes</Header>
+
+						{isInstructor(user) && (
+							<Segment padded>
+								<InstructorClassList
+									course={course}
+									setCourse={setCourse}
+									{...props}
+								/>
+							</Segment>
+						)}
+
+						<Table basic="very">
 							<Table.Header>
 								<Table.Row>
 									<Table.HeaderCell>Date</Table.HeaderCell>
 									<Table.HeaderCell>Time</Table.HeaderCell>
-									<Table.HeaderCell>Instructor</Table.HeaderCell>
+									<Table.HeaderCell>
+										Instructor
+									</Table.HeaderCell>
 									<Table.HeaderCell>Cost</Table.HeaderCell>
 								</Table.Row>
 							</Table.Header>
 
 							<Table.Body>
-								{course.sessions.length ?
-									course.sessions.sort((a, b) => a.datetime < b.datetime ? 1 : -1).slice(0,10).map(x =>
-										<Table.Row key={x.id}>
-											<Table.Cell>
-												<Link to={'/classes/'+x.id}>
-													{moment.utc(x.datetime).tz('America/Edmonton').format('ll')}
-												</Link>
-											</Table.Cell>
-											<Table.Cell>{x.is_cancelled ? 'Cancelled' : moment.utc(x.datetime).tz('America/Edmonton').format('LT')}</Table.Cell>
-											<Table.Cell>{getInstructor(x)}</Table.Cell>
-											<Table.Cell>{x.cost === '0.00' ? 'Free' : '$'+x.cost}</Table.Cell>
-										</Table.Row>
-									)
-								:
-									<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
-								}
+								{course.sessions.length ? (
+									course.sessions
+										.sort((a, b) =>
+											a.datetime < b.datetime ? 1 : -1
+										)
+										.slice(0, 10)
+										.map((x) => (
+											<Table.Row key={x.id}>
+												<Table.Cell>
+													<Link
+														to={'/classes/' + x.id}
+													>
+														{moment
+															.utc(x.datetime)
+															.tz(
+																'America/Edmonton'
+															)
+															.format('ll')}
+													</Link>
+												</Table.Cell>
+												<Table.Cell>
+													{x.is_cancelled
+														? 'Cancelled'
+														: moment
+																.utc(x.datetime)
+																.tz(
+																	'America/Edmonton'
+																)
+																.format('LT')}
+												</Table.Cell>
+												<Table.Cell>
+													{getInstructor(x)}
+												</Table.Cell>
+												<Table.Cell>
+													{x.cost === '0.00'
+														? 'Free'
+														: '$' + x.cost}
+												</Table.Cell>
+											</Table.Row>
+										))
+								) : (
+									<Table.Row>
+										<Table.Cell>None</Table.Cell>
+									</Table.Row>
+								)}
 							</Table.Body>
 						</Table>
 					</div>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<NotFound />
-			}
+			)}
 		</Container>
 	);
-};
-
+}
diff --git a/webclient/src/InstructorClasses.js b/webclient/src/InstructorClasses.js
index b6028501..147ca5d8 100644
--- a/webclient/src/InstructorClasses.js
+++ b/webclient/src/InstructorClasses.js
@@ -1,12 +1,21 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams, useHistory } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import ReactToPrint from 'react-to-print';
 import * as Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import moment from 'moment-timezone';
 import './light.css';
-import { Button, Container, Checkbox, Divider, Dropdown, Form, Grid, Header, Icon, Image, Label, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { BasicTable, staticUrl, requester } from './utils.js';
+import {
+	Button,
+	Checkbox,
+	Form,
+	Grid,
+	Header,
+	Icon,
+	Label,
+	Table,
+} from 'semantic-ui-react';
+import { requester } from './utils.js';
 import { MembersDropdown } from './Members.js';
 
 class AttendanceSheet extends React.Component {
@@ -16,47 +25,60 @@ class AttendanceSheet extends React.Component {
 
 		return (
 			<div style={{ padding: '3rem' }}>
-				<Header size='medium'>{clazz.course_name} Attendance</Header>
+				<Header size="medium">{clazz.course_name} Attendance</Header>
 				<p>
-					{moment.utc(clazz.datetime).tz('America/Edmonton').format('llll')}
-					{num >= 2 ? ', '+num+' students sorted by registration time.' : '.'}
+					{moment
+						.utc(clazz.datetime)
+						.tz('America/Edmonton')
+						.format('llll')}
+					{num >= 2
+						? ', ' + num + ' students sorted by registration time.'
+						: '.'}
 				</p>
 
 				<Grid stackable padded columns={2}>
 					<Grid.Column>
-						<Table collapsing unstackable basic='very'>
+						<Table collapsing unstackable basic="very">
 							{clazz.students
-								.filter(x => x.attendance_status !== 'Withdrawn')
+								.filter(
+									(x) => x.attendance_status !== 'Withdrawn'
+								)
 								.slice(0, 15)
-								.map(x =>
+								.map((x) => (
 									<Table.Row key={x.id}>
 										<Table.Cell>
-											<Icon name='square outline' size='large' />
+											<Icon
+												name="square outline"
+												size="large"
+											/>
 										</Table.Cell>
 										<Table.Cell>
 											{x.student_name}
 										</Table.Cell>
 									</Table.Row>
-								)
-							}
+								))}
 						</Table>
 					</Grid.Column>
 					<Grid.Column>
-						<Table collapsing unstackable basic='very'>
+						<Table collapsing unstackable basic="very">
 							{clazz.students
-								.filter(x => x.attendance_status !== 'Withdrawn')
+								.filter(
+									(x) => x.attendance_status !== 'Withdrawn'
+								)
 								.slice(15)
-								.map(x =>
+								.map((x) => (
 									<Table.Row key={x.id}>
 										<Table.Cell>
-											<Icon name='square outline' size='large' />
+											<Icon
+												name="square outline"
+												size="large"
+											/>
 										</Table.Cell>
 										<Table.Cell>
 											{x.student_name}
 										</Table.Cell>
 									</Table.Row>
-								)
-							}
+								))}
 						</Table>
 					</Grid.Column>
 				</Grid>
@@ -72,18 +94,18 @@ function AttendanceRow(props) {
 
 	const handleMark = (newStatus) => {
 		if (loading) return;
-		if (student.attendance_status == newStatus) return;
+		if (student.attendance_status === newStatus) return;
 		setLoading(newStatus);
 		const data = { ...student, attendance_status: newStatus };
-		requester('/training/'+student.id+'/', 'PATCH', token, data)
-		.then(res => {
-			refreshClass();
-			setError(false);
-		})
-		.catch(err => {
-			console.log(err);
-			setError(true);
-		});
+		requester('/training/' + student.id + '/', 'PATCH', token, data)
+			.then((res) => {
+				refreshClass();
+				setError(false);
+			})
+			.catch((err) => {
+				console.log(err);
+				setError(true);
+			});
 	};
 
 	const makeProps = (name) => ({
@@ -98,34 +120,27 @@ function AttendanceRow(props) {
 	}, [student.attendance_status]);
 
 	return (
-		<div className='attendance-row'>
+		<div className="attendance-row">
 			<p>
-				<Link to={'/members/'+student.student_id}>{student.student_name}</Link>
-				{student.attendance_status === 'Waiting for payment' && ' (Waiting for payment)'}:
+				<Link to={'/members/' + student.student_id}>
+					{student.student_name}
+				</Link>
+				{student.attendance_status === 'Waiting for payment' &&
+					' (Waiting for payment)'}
+				:
 			</p>
 
-			<Button {...makeProps('Withdrawn')}>
-				Withdrawn
-			</Button>
+			<Button {...makeProps('Withdrawn')}>Withdrawn</Button>
 
-			<Button {...makeProps('Confirmed')}>
-				Confirmed
-			</Button>
+			<Button {...makeProps('Confirmed')}>Confirmed</Button>
 
-			<Button {...makeProps('Rescheduled')}>
-				Rescheduled
-			</Button>
+			<Button {...makeProps('Rescheduled')}>Rescheduled</Button>
 
-			<Button {...makeProps('No-show')}>
-				No-show
-			</Button>
+			<Button {...makeProps('No-show')}>No-show</Button>
 
-			<Button {...makeProps('Attended')}>
-				Attended
-			</Button>
+			<Button {...makeProps('Attended')}>Attended</Button>
 
 			{error && <p>Error: something went wrong!</p>}
-
 		</div>
 	);
 }
@@ -145,92 +160,108 @@ export function InstructorClassAttendance(props) {
 	const handleSubmit = (e) => {
 		if (loading) return;
 		setLoading(true);
-		const data = { ...input, attendance_status: 'Attended', session: clazz.id };
+		const data = {
+			...input,
+			attendance_status: 'Attended',
+			session: clazz.id,
+		};
 		requester('/training/', 'POST', token, data)
-		.then(res => {
-			setLoading(false);
-			setError(false);
-			refreshClass();
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setLoading(false);
+				setError(false);
+				refreshClass();
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	return (
 		<div>
-			<Header size='medium'>Instructor Panel</Header>
+			<Header size="medium">Instructor Panel</Header>
 
-			{open || clazz.instructor === user.id ?
+			{open || clazz.instructor === user.id ? (
 				<div>
-					<Header size='small'>Student Emails</Header>
+					<Header size="small">Student Emails</Header>
 
-					{clazz.students.length ?
+					{clazz.students.length ? (
 						clazz.students
-							.filter(x => x.attendance_status !== 'Withdrawn')
-							.map(x => x.student_email)
+							.filter((x) => x.attendance_status !== 'Withdrawn')
+							.map((x) => x.student_email)
 							.join('; ')
-					:
+					) : (
 						<p>No students yet.</p>
-					}
+					)}
 
-					<Header size='small'>Mark Attendance</Header>
+					<Header size="small">Mark Attendance</Header>
 
-					{!!clazz.students.length && <div>
-						<div style={{ display: 'none' }}>
-							<AttendanceSheet clazz={clazz} ref={printRef} />
+					{!!clazz.students.length && (
+						<div>
+							<div style={{ display: 'none' }}>
+								<AttendanceSheet clazz={clazz} ref={printRef} />
+							</div>
+							<ReactToPrint
+								trigger={() => (
+									<Button>Print Attendance Sheet</Button>
+								)}
+								content={() => printRef.current}
+							/>
 						</div>
-						<ReactToPrint
-							trigger={() => <Button>Print Attendance Sheet</Button>}
-							content={() => printRef.current}
-						/>
-					</div>}
-
-					{clazz.students.length ?
-						clazz.students.map(x =>
+					)}
+
+					{clazz.students.length ? (
+						clazz.students.map((x) => (
 							<AttendanceRow key={x.id} student={x} {...props} />
-						)
-					:
+						))
+					) : (
 						<p>No students yet.</p>
-					}
+					)}
 
-					<Header size='small'>Add Student</Header>
+					<Header size="small">Add Student</Header>
 
 					<Form onSubmit={handleSubmit}>
 						<Form.Field error={error.member_id}>
 							<MembersDropdown
-								name='member_id'
+								name="member_id"
 								value={input.member_id}
 								token={token}
 								onChange={handleValues}
-								initial='Find a member'
+								initial="Find a member"
 							/>
 						</Form.Field>
 
-						<Form.Button loading={loading} error={error.non_field_errors}>
+						<Form.Button
+							loading={loading}
+							error={error.non_field_errors}
+						>
 							Submit
 						</Form.Button>
 					</Form>
 				</div>
-			:
-				<Button onClick={() => {setOpen(true); attendanceOpenCache = true;}}>
+			) : (
+				<Button
+					onClick={() => {
+						setOpen(true);
+						attendanceOpenCache = true;
+					}}
+				>
 					Edit Attendance
 				</Button>
-			}
+			)}
 		</div>
 	);
-};
+}
 
 function InstructorClassEditor(props) {
 	const { input, setInput, error, editing } = props;
 
 	const handleValues = (e, v) => setInput({ ...input, [v.name]: v.value });
-	const handleUpload = (e, v) => setInput({ ...input, [v.name]: e.target.files[0] });
 	const handleChange = (e) => handleValues(e, e.currentTarget);
 	const handleCheck = (e, v) => setInput({ ...input, [v.name]: v.checked });
-	const handleDatetime = (v) => setInput({ ...input, datetime: v.utc().format() });
+	const handleDatetime = (v) =>
+		setInput({ ...input, datetime: v.utc().format() });
 
 	const makeProps = (name) => ({
 		name: name,
@@ -240,14 +271,11 @@ function InstructorClassEditor(props) {
 	});
 
 	return (
-		<div className='class-editor'>
-			<Form.Input
-				label='Cost ($) — 0 for free'
-				{...makeProps('cost')}
-			/>
+		<div className="class-editor">
+			<Form.Input label="Cost ($) — 0 for free" {...makeProps('cost')} />
 
 			<Form.Input
-				label='Max Students — Blank for Unlimited'
+				label="Max Students — Blank for Unlimited"
 				{...makeProps('max_students')}
 			/>
 
@@ -255,26 +283,31 @@ function InstructorClassEditor(props) {
 				<label>Time and Date</label>
 				<Datetime
 					timeConstraints={{ minutes: { step: 15 } }}
-					value={ input.datetime ? moment.utc(input.datetime).tz('America/Edmonton') : (new Date()).setMinutes(0) }
+					value={
+						input.datetime
+							? moment.utc(input.datetime).tz('America/Edmonton')
+							: new Date().setMinutes(0)
+					}
 					onChange={handleDatetime}
 				/>
-				{error.datetime &&
+				{error.datetime && (
 					<Label pointing prompt>
 						{error.datetime}
 					</Label>
-				}
+				)}
 			</Form.Field>
 
-			{editing && <Form.Field>
-				<label>Is the class cancelled?</label>
-				<Checkbox
-					label='Yes'
-					name='is_cancelled'
-					onChange={handleCheck}
-					checked={input.is_cancelled}
-				/>
-			</Form.Field>}
-
+			{editing && (
+				<Form.Field>
+					<label>Is the class cancelled?</label>
+					<Checkbox
+						label="Yes"
+						name="is_cancelled"
+						onChange={handleCheck}
+						checked={input.is_cancelled}
+					/>
+				</Form.Field>
+			)}
 		</div>
 	);
 }
@@ -292,45 +325,51 @@ export function InstructorClassDetail(props) {
 		if (loading) return;
 		setLoading(true);
 		setSuccess(false);
-		requester('/sessions/'+id+'/', 'PUT', token, input)
-		.then(res => {
-			setSuccess(true);
-			setLoading(false);
-			setError(false);
-			setOpen(false);
-			setClass(res);
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+		requester('/sessions/' + id + '/', 'PUT', token, input)
+			.then((res) => {
+				setSuccess(true);
+				setLoading(false);
+				setError(false);
+				setOpen(false);
+				setClass(res);
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	return (
 		<div>
-			<Header size='medium'>Instructor Panel</Header>
+			<Header size="medium">Instructor Panel</Header>
 
 			{!open && success && <p>Saved!</p>}
 
-			{open ?
+			{open ? (
 				<Form onSubmit={handleSubmit}>
-					<Header size='small'>Edit Class</Header>
-
-					<InstructorClassEditor editing input={input} setInput={setInput} error={error} />
-
-					<Form.Button loading={loading} error={error.non_field_errors}>
+					<Header size="small">Edit Class</Header>
+
+					<InstructorClassEditor
+						editing
+						input={input}
+						setInput={setInput}
+						error={error}
+					/>
+
+					<Form.Button
+						loading={loading}
+						error={error.non_field_errors}
+					>
 						Submit
 					</Form.Button>
 				</Form>
-			:
-				<Button onClick={() => setOpen(true)}>
-					Edit Class
-				</Button>
-			}
+			) : (
+				<Button onClick={() => setOpen(true)}>Edit Class</Button>
+			)}
 		</div>
 	);
-};
+}
 
 export function InstructorClassList(props) {
 	const { course, setCourse, token } = props;
@@ -348,79 +387,102 @@ export function InstructorClassList(props) {
 		setSuccess(false);
 		const data = { ...input, course: course.id };
 		requester('/sessions/', 'POST', token, data)
-		.then(res => {
-			setSuccess(res.id);
-			setInput({});
-			setLoading(false);
-			setError(false);
-			setOpen(false);
-			setCourse({ ...course, sessions: [ res, ...course.sessions ] });
-		})
-		.catch(err => {
-			setLoading(false);
-			console.log(err);
-			setError(err.data);
-		});
+			.then((res) => {
+				setSuccess(res.id);
+				setInput({});
+				setLoading(false);
+				setError(false);
+				setOpen(false);
+				setCourse({ ...course, sessions: [res, ...course.sessions] });
+			})
+			.catch((err) => {
+				setLoading(false);
+				console.log(err);
+				setError(err.data);
+			});
 	};
 
 	useEffect(() => {
 		requester('/sessions/', 'GET', token)
-		.then(res => {
-			setClasses(res.results.filter(x => !x.is_cancelled));
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				setClasses(res.results.filter((x) => !x.is_cancelled));
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, []);
 
 	useEffect(() => {
-		setSameClasses(classes.filter(x =>
-			moment.utc(x.datetime).tz('America/Edmonton').isSame(input.datetime, 'day')
-		).sort((a, b) => a.datetime > b.datetime ? 1 : -1));
+		setSameClasses(
+			classes
+				.filter((x) =>
+					moment
+						.utc(x.datetime)
+						.tz('America/Edmonton')
+						.isSame(input.datetime, 'day')
+				)
+				.sort((a, b) => (a.datetime > b.datetime ? 1 : -1))
+		);
 	}, [input.datetime]);
 
 	return (
 		<div>
-			<Header size='medium'>Instructor Panel</Header>
+			<Header size="medium">Instructor Panel</Header>
 
-			{!open && success && <p>Added! <Link to={'/classes/'+success}>View the class.</Link></p>}
+			{!open && success && (
+				<p>
+					Added!{' '}
+					<Link to={'/classes/' + success}>View the class.</Link>
+				</p>
+			)}
 
-			{open ?
+			{open ? (
 				<Grid stackable padded columns={2}>
 					<Grid.Column>
 						<Form onSubmit={handleSubmit}>
-							<Header size='small'>Add a Class</Header>
+							<Header size="small">Add a Class</Header>
 
-							<InstructorClassEditor input={input} setInput={setInput} error={error} />
+							<InstructorClassEditor
+								input={input}
+								setInput={setInput}
+								error={error}
+							/>
 
-							<Form.Button loading={loading} error={error.non_field_errors}>
+							<Form.Button
+								loading={loading}
+								error={error.non_field_errors}
+							>
 								Submit
 							</Form.Button>
 						</Form>
 					</Grid.Column>
 					<Grid.Column>
-						{!!input.datetime &&
+						{!!input.datetime && (
 							<div>
-								<Header size='small'>Upcoming Classes That Day</Header>
+								<Header size="small">
+									Upcoming Classes That Day
+								</Header>
 
-								{sameClasses.length ?
-									sameClasses.map(x =>
+								{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_name}
 										</p>
-									)
-								:
+									))
+								) : (
 									<p>None</p>
-								}
+								)}
 							</div>
-						}
+						)}
 					</Grid.Column>
 				</Grid>
-			:
-				<Button onClick={() => setOpen(true)}>
-					Add a Class
-				</Button>
-			}
+			) : (
+				<Button onClick={() => setOpen(true)}>Add a Class</Button>
+			)}
 		</div>
 	);
-};
+}
diff --git a/webclient/src/Members.js b/webclient/src/Members.js
index 79698a2f..d596ad64 100644
--- a/webclient/src/Members.js
+++ b/webclient/src/Members.js
@@ -1,35 +1,66 @@
 import React, { useState, useEffect, useReducer } from 'react';
-import { BrowserRouter as Router, Switch, Route, Link, useParams } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 import './light.css';
-import { Button, Container, Divider, Dropdown, Form, Grid, Header, Icon, Image, Input, Item, Menu, Message, Segment, Table } from 'semantic-ui-react';
-import { statusColor, isAdmin, isInstructor, BasicTable, staticUrl, requester } from './utils.js';
-import { NotFound, PleaseLogin } from './Misc.js';
-import { AdminMemberInfo, AdminMemberPause, AdminMemberForm, AdminMemberCards, AdminMemberTraining, AdminMemberCertifications } from './AdminMembers.js';
+import {
+	Button,
+	Container,
+	Dropdown,
+	Grid,
+	Header,
+	Icon,
+	Image,
+	Input,
+	Item,
+	Segment,
+	Table,
+} from 'semantic-ui-react';
+import {
+	statusColor,
+	isAdmin,
+	isInstructor,
+	BasicTable,
+	staticUrl,
+	requester,
+} from './utils.js';
+import { NotFound } from './Misc.js';
+import {
+	AdminMemberInfo,
+	AdminMemberPause,
+	AdminMemberForm,
+	AdminMemberCards,
+	AdminMemberTraining,
+	AdminMemberCertifications,
+} from './AdminMembers.js';
 import { AdminMemberTransactions } from './AdminTransactions.js';
 
 export function MembersDropdown(props) {
 	const { token, name, onChange, value, initial } = props;
 	const [response, setResponse] = useState({ results: [] });
-	const searchDefault = {seq: 0, q: initial || ''};
+	const searchDefault = { seq: 0, q: initial || '' };
 	const [search, setSearch] = useState(searchDefault);
 
 	useEffect(() => {
 		requester('/search/', 'POST', token, search)
-		.then(res => {
-			if (!search.seq || res.seq > response.seq) {
-				setResponse(res);
-			}
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				if (!search.seq || res.seq > response.seq) {
+					setResponse(res);
+				}
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, [search]);
 
 	const options = response.results.map((x, i) => ({
 		key: x.member.id,
 		value: x.member.id,
 		text: x.member.preferred_name + ' ' + x.member.last_name,
-		image: { avatar: true, src: x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png' },
+		image: {
+			avatar: true,
+			src: x.member.photo_small
+				? staticUrl + '/' + x.member.photo_small
+				: '/nophoto.png',
+		},
 	}));
 
 	return (
@@ -41,192 +72,296 @@ export function MembersDropdown(props) {
 			name={name}
 			options={options}
 			value={value}
-			placeholder='Search for Member'
+			placeholder="Search for Member"
 			onChange={onChange}
-			onSearchChange={(e, v) => setSearch({seq: parseInt(e.timeStamp), q: v.searchQuery})}
+			onSearchChange={(e, v) =>
+				setSearch({ seq: parseInt(e.timeStamp), q: v.searchQuery })
+			}
 		/>
-
 	);
-};
+}
 
 let searchCache = '';
 
 export function Members(props) {
 	const [response, setResponse] = useState(false);
-	const searchDefault = {seq: 0, q: searchCache};
+	const searchDefault = { seq: 0, q: searchCache };
 	const [search, setSearch] = useState(searchDefault);
 	const { token } = props;
 
 	useEffect(() => {
 		searchCache = search.q;
 		requester('/search/', 'POST', token, search)
-		.then(res => {
-			if (!search.seq || res.seq > response.seq) {
-				setResponse(res);
-			}
-		})
-		.catch(err => {
-			console.log(err);
-		});
+			.then((res) => {
+				if (!search.seq || res.seq > response.seq) {
+					setResponse(res);
+				}
+			})
+			.catch((err) => {
+				console.log(err);
+			});
 	}, [search]);
 
 	return (
 		<Container>
-			<Header size='large'>Member List</Header>
+			<Header size="large">Member List</Header>
 
 			<p>Search by name, email, or member ID:</p>
 
-			<Input autoFocus focus icon='search'
-				placeholder='Search...'
+			<Input
+				autoFocus
+				focus
+				icon="search"
+				placeholder="Search..."
 				value={search.q}
-				onChange={(e, v) => setSearch({seq: parseInt(e.timeStamp), q: v.value})}
-				aria-label='search products'
+				onChange={(e, v) =>
+					setSearch({ seq: parseInt(e.timeStamp), q: v.value })
+				}
+				aria-label="search products"
 				style={{ marginRight: '0.5rem' }}
 			/>
 
-			{search.q.length ?
+			{search.q.length ? (
 				<Button
-					content='Clear'
-					onClick={() => setSearch({seq: 0, q: ''})}
-				/> : ''
-			}
-
-			<Header size='medium'>
+					content="Clear"
+					onClick={() => setSearch({ seq: 0, q: '' })}
+				/>
+			) : (
+				''
+			)}
+
+			<Header size="medium">
 				{search.q.length ? 'Search Results' : 'Newest Vetted Members'}
 			</Header>
 
-			{response ?
+			{response ? (
 				<Item.Group unstackable divided>
-					{response.results.length ?
-						response.results.map(x =>
-							<Item key={x.member.id} as={Link} to={'/members/'+x.member.id}>
-								<Item.Image size='tiny' src={x.member.photo_small ? staticUrl + '/' + x.member.photo_small : '/nophoto.png'} />
-								<Item.Content verticalAlign='top'>
+					{response.results.length ? (
+						response.results.map((x) => (
+							<Item
+								key={x.member.id}
+								as={Link}
+								to={'/members/' + x.member.id}
+							>
+								<Item.Image
+									size="tiny"
+									src={
+										x.member.photo_small
+											? staticUrl +
+											  '/' +
+											  x.member.photo_small
+											: '/nophoto.png'
+									}
+								/>
+								<Item.Content verticalAlign="top">
 									<Item.Header>
-										<Icon name='circle' color={statusColor[x.member.status]} />
-										{x.member.preferred_name} {x.member.last_name}
+										<Icon
+											name="circle"
+											color={statusColor[x.member.status]}
+										/>
+										{x.member.preferred_name}{' '}
+										{x.member.last_name}
 									</Item.Header>
-									<Item.Description>Status: {x.member.status || 'Unknown'}</Item.Description>
-									<Item.Description>Joined: {x.member.application_date || 'Unknown'}</Item.Description>
+									<Item.Description>
+										Status: {x.member.status || 'Unknown'}
+									</Item.Description>
+									<Item.Description>
+										Joined:{' '}
+										{x.member.application_date || 'Unknown'}
+									</Item.Description>
 								</Item.Content>
 							</Item>
-						)
-					:
+						))
+					) : (
 						<p>No Results</p>
-					}
+					)}
 				</Item.Group>
-			:
+			) : (
 				<p>Loading...</p>
-			}
-
+			)}
 		</Container>
 	);
-};
+}
 
 let resultCache = {};
 
 export function MemberDetail(props) {
 	const { id } = useParams();
 	const [result, setResult] = useState(resultCache[id] || false);
-	const [refreshCount, refreshResult] = useReducer(x => x + 1, 0);
+	const [refreshCount, refreshResult] = useReducer((x) => x + 1, 0);
 	const [error, setError] = useState(false);
 	const { token, user } = props;
 
 	useEffect(() => {
-		requester('/search/'+id+'/', 'GET', token)
-		.then(res => {
-			setResult(res);
-			resultCache[id] = res;
-		})
-		.catch(err => {
-			console.log(err);
-			setError(true);
-		});
+		requester('/search/' + id + '/', 'GET', token)
+			.then((res) => {
+				setResult(res);
+				resultCache[id] = res;
+			})
+			.catch((err) => {
+				console.log(err);
+				setError(true);
+			});
 	}, [refreshCount]);
 
 	const member = result.member || false;
 
 	return (
 		<Container>
-			{!error ?
-				member ?
+			{!error ? (
+				member ? (
 					<div>
-						<Header size='large'>{member.preferred_name} {member.last_name}</Header>
+						<Header size="large">
+							{member.preferred_name} {member.last_name}
+						</Header>
 
 						<Grid stackable columns={2}>
 							<Grid.Column width={isAdmin(user) ? 8 : 5}>
 								<p>
-									<Image rounded size='medium' src={member.photo_large ? staticUrl + '/' + member.photo_large : '/nophoto.png'} />
+									<Image
+										rounded
+										size="medium"
+										src={
+											member.photo_large
+												? staticUrl +
+												  '/' +
+												  member.photo_large
+												: '/nophoto.png'
+										}
+									/>
 								</p>
 
-								{isAdmin(user) ?
-									<AdminMemberInfo result={result} refreshResult={refreshResult} {...props} />
-								:
+								{isAdmin(user) ? (
+									<AdminMemberInfo
+										result={result}
+										refreshResult={refreshResult}
+										{...props}
+									/>
+								) : (
 									<React.Fragment>
 										<BasicTable>
 											<Table.Body>
 												<Table.Row>
-													<Table.Cell>Status:</Table.Cell>
 													<Table.Cell>
-														<Icon name='circle' color={statusColor[member.status]} />
-														{member.status || 'Unknown'}
+														Status:
+													</Table.Cell>
+													<Table.Cell>
+														<Icon
+															name="circle"
+															color={
+																statusColor[
+																	member
+																		.status
+																]
+															}
+														/>
+														{member.status ||
+															'Unknown'}
 													</Table.Cell>
 												</Table.Row>
 												<Table.Row>
-													<Table.Cell>Joined:</Table.Cell>
-													<Table.Cell>{member.application_date || 'Unknown'}</Table.Cell>
+													<Table.Cell>
+														Joined:
+													</Table.Cell>
+													<Table.Cell>
+														{member.application_date ||
+															'Unknown'}
+													</Table.Cell>
 												</Table.Row>
 												<Table.Row>
-													<Table.Cell>Public Bio:</Table.Cell>
+													<Table.Cell>
+														Public Bio:
+													</Table.Cell>
 												</Table.Row>
 											</Table.Body>
 										</BasicTable>
 
-										<p className='bio-paragraph'>
+										<p className="bio-paragraph">
 											{member.public_bio || 'None yet.'}
 										</p>
 									</React.Fragment>
-								}
+								)}
 							</Grid.Column>
 
 							<Grid.Column width={isAdmin(user) ? 8 : 11}>
-								{isInstructor(user) && !isAdmin(user) && <Segment padded>
-									<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
-								</Segment>}
-
-								{isAdmin(user) && <Segment padded>
-									<AdminMemberForm result={result} refreshResult={refreshResult} {...props} />
-								</Segment>}
-
-								{isAdmin(user) && <Segment padded>
-									<AdminMemberPause result={result} refreshResult={refreshResult} {...props} />
-								</Segment>}
+								{isInstructor(user) && !isAdmin(user) && (
+									<Segment padded>
+										<AdminMemberTraining
+											result={result}
+											refreshResult={refreshResult}
+											{...props}
+										/>
+									</Segment>
+								)}
+
+								{isAdmin(user) && (
+									<Segment padded>
+										<AdminMemberForm
+											result={result}
+											refreshResult={refreshResult}
+											{...props}
+										/>
+									</Segment>
+								)}
+
+								{isAdmin(user) && (
+									<Segment padded>
+										<AdminMemberPause
+											result={result}
+											refreshResult={refreshResult}
+											{...props}
+										/>
+									</Segment>
+								)}
 							</Grid.Column>
 						</Grid>
 
-						{isAdmin(user) && <Segment padded>
-							<AdminMemberCards result={result} refreshResult={refreshResult} {...props} />
-						</Segment>}
-
-						{isAdmin(user) && <Segment padded>
-							<AdminMemberCertifications result={result} refreshResult={refreshResult} {...props} />
-						</Segment>}
-
-						{isAdmin(user) && <Segment padded>
-							<AdminMemberTraining result={result} refreshResult={refreshResult} {...props} />
-						</Segment>}
-
-						{isAdmin(user) && <Segment padded>
-							<AdminMemberTransactions result={result} refreshResult={refreshResult} {...props} />
-						</Segment>}
-
+						{isAdmin(user) && (
+							<Segment padded>
+								<AdminMemberCards
+									result={result}
+									refreshResult={refreshResult}
+									{...props}
+								/>
+							</Segment>
+						)}
+
+						{isAdmin(user) && (
+							<Segment padded>
+								<AdminMemberCertifications
+									result={result}
+									refreshResult={refreshResult}
+									{...props}
+								/>
+							</Segment>
+						)}
+
+						{isAdmin(user) && (
+							<Segment padded>
+								<AdminMemberTraining
+									result={result}
+									refreshResult={refreshResult}
+									{...props}
+								/>
+							</Segment>
+						)}
+
+						{isAdmin(user) && (
+							<Segment padded>
+								<AdminMemberTransactions
+									result={result}
+									refreshResult={refreshResult}
+									{...props}
+								/>
+							</Segment>
+						)}
 					</div>
-				:
+				) : (
 					<p>Loading...</p>
-			:
+				)
+			) : (
 				<NotFound />
-			}
+			)}
 		</Container>
 	);
-};
-
+}
diff --git a/webclient/src/PasswordReset.js b/webclient/src/PasswordReset.js
index 3aa09f7f..063ad7bc 100644
--- a/webclient/src/PasswordReset.js
+++ b/webclient/src/PasswordReset.js
@@ -28,15 +28,8 @@ function ResetForm() {
 			});
 	};
 
-	const makeProps = (name) => ({
-		name: name,
-		onChange: handleChange,
-		value: input[name] || '',
-		error: error[name],
-	});
-
 	return (
-		<Form onSubmit={handleSubmit} error={error.email == 'Not found.'}>
+		<Form onSubmit={handleSubmit} error={error.email === 'Not found.'}>
 			<Form.Input
 				label="Email"
 				name="email"
diff --git a/webclient/src/utils.js b/webclient/src/utils.js
index 299584c9..187f59d3 100644
--- a/webclient/src/utils.js
+++ b/webclient/src/utils.js
@@ -42,7 +42,7 @@ export const requester = (route, method, token, data) => {
 		options.headers.Authorization = 'Token ' + token;
 	}
 
-	if (method == 'GET') {
+	if (method === 'GET') {
 		// pass
 	} else if (['POST', 'PUT', 'PATCH'].includes(method)) {
 		const formData = new FormData();
@@ -55,7 +55,7 @@ export const requester = (route, method, token, data) => {
 			method: method,
 			body: formData,
 		};
-	} else if (method == 'DELETE') {
+	} else if (method === 'DELETE') {
 		options = {
 			...options,
 			method: method,
@@ -89,11 +89,11 @@ export const requester = (route, method, token, data) => {
 		})
 		.catch((error) => {
 			const code = error.data ? error.data.status : null;
-			if (code == 413) {
+			if (code === 413) {
 				throw customError({ non_field_errors: ['File too big'] });
 			} else if (code >= 400 && code < 500) {
 				return error.data.json().then((result) => {
-					if (result.detail == 'Invalid token.') {
+					if (result.detail === 'Invalid token.') {
 						localStorage.clear();
 						window.location = '/';
 					}