From 497883fccef130b91146061d941fe91bff409aaa Mon Sep 17 00:00:00 2001
From: Tanner Collin <git@tannercollin.com>
Date: Sat, 7 May 2022 06:28:33 +0000
Subject: [PATCH] Misc fixes

---
 webclient/src/Classes.js | 80 +++++++++++++++++++++++-----------------
 webclient/src/Courses.js | 60 +++++++++++++++---------------
 webclient/src/Home.js    | 12 +++++-
 webclient/src/Members.js |  4 +-
 webclient/src/light.css  |  2 +-
 5 files changed, 89 insertions(+), 69 deletions(-)

diff --git a/webclient/src/Classes.js b/webclient/src/Classes.js
index ed5b68f..3a8ef80 100644
--- a/webclient/src/Classes.js
+++ b/webclient/src/Classes.js
@@ -6,7 +6,6 @@ import moment from 'moment-timezone';
 import { apiUrl, isAdmin, isInstructor, getInstructor, BasicTable, requester, useIsMobile } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 import { InstructorClassDetail, InstructorClassAttendance } from './InstructorClasses.js';
-import { courseCache } from './Courses.js';
 import { PayPalPayNow } from './PayPal.js';
 import { tags } from './Courses.js';
 
@@ -131,7 +130,7 @@ function NewClassTableCourse(props) {
 			<div className='byline'>
 				<div className='tags'>
 					{!!course.tags && course.tags.split(',').map(name =>
-						<Label color={tags[name]} tag size='small'>
+						<Label key={name} color={tags[name]} tag size='small'>
 							{name}
 						</Label>
 					)}
@@ -230,11 +229,25 @@ function NewClassTable(props) {
 		<>
 			<div className='newclasstable'>
 				{sortedClasses.map(x =>
-					<NewClassTableCourse course={x.course} classes={x.classes} token={token} user={user} refreshUser={refreshUser} />
+					<NewClassTableCourse
+						key={x.course.id}
+						course={x.course}
+						classes={x.classes}
+						token={token}
+						user={user}
+						refreshUser={refreshUser}
+					/>
 				)}
 
 				{courses.filter(x => !seenCourseIds.includes(x.id)).map(x =>
-					<NewClassTableCourse course={x} classes={false} token={token} user={user} refreshUser={refreshUser} />
+					<NewClassTableCourse
+						key={x.id}
+						course={x}
+						classes={false}
+						token={token}
+						user={user}
+						refreshUser={refreshUser}
+					/>
 				)}
 			</div>
 		</>
@@ -284,7 +297,7 @@ export function ClassFeed(props) {
 
 export function Classes(props) {
 	const [classes, setClasses] = useState(classesCache);
-	const [courses, setCourses] = useState(courseCache);
+	const [courses, setCourses] = useState(false);
 	const [sortByCourse, setSortByCourse] = useState(sortCache);
 	const [tagFilter, setTagFilter] = useState(tagFilterCache);
 	const { token, user, refreshUser } = props;
@@ -293,7 +306,6 @@ export function Classes(props) {
 		requester('/courses/', 'GET', token)
 		.then(res => {
 			setCourses(res.results);
-			courseCache = res.results;
 		})
 		.catch(err => {
 			console.log(err);
@@ -351,45 +363,45 @@ export function Classes(props) {
 				</Button>
 			</p>
 
-			<p>
-				Filter by tag:
-				<div className='coursetags'>
+			<p>Filter by tag:</p>
+
+			<div className='coursetags'>
+				<div
+					className='labelbox'
+					style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
+				>
+					<Label
+						onClick={() => {
+							setTagFilter(false);
+							tagFilterCache = false;
+						}}
+						as='a'
+						tag
+					>
+						No Filter
+					</Label>
+				</div>
+
+				{Object.entries(tags).map(([name, color]) =>
 					<div
+						key={name}
 						className='labelbox'
-						style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
+						style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
 					>
 						<Label
 							onClick={() => {
-								setTagFilter(false);
-								tagFilterCache = false;
+								setTagFilter(name);
+								tagFilterCache = name;
 							}}
 							as='a'
+							color={color}
 							tag
 						>
-							No Filter
+							{name}
 						</Label>
 					</div>
-
-					{Object.entries(tags).map(([name, color]) =>
-						<div
-							className='labelbox'
-							style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
-						>
-							<Label
-								onClick={() => {
-									setTagFilter(name);
-									tagFilterCache = name;
-								}}
-								as='a'
-								color={color}
-								tag
-							>
-								{name}
-							</Label>
-						</div>
-					)}
-				</div>
-			</p>
+				)}
+			</div>
 
 			{classes.length && courses.length ?
 				sortByCourse ?
diff --git a/webclient/src/Courses.js b/webclient/src/Courses.js
index f12f4c6..b02e7bd 100644
--- a/webclient/src/Courses.js
+++ b/webclient/src/Courses.js
@@ -24,7 +24,7 @@ export const tags = {
 	Misc: 'grey',
 };
 
-export let courseCache = false;
+let courseCache = false;
 let tagFilterCache = false;
 
 export function Courses(props) {
@@ -53,45 +53,45 @@ export function Courses(props) {
 				<InstructorCourseList courses={courses} setCourses={setCourses} {...props} />
 			</Segment>}
 
-			<p>
-				Filter by tag:
-				<div className='coursetags'>
+			<p>Filter by tag:</p>
+
+			<div className='coursetags'>
+				<div
+					className='labelbox'
+					style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
+				>
+					<Label
+						onClick={() => {
+							setTagFilter(false);
+							tagFilterCache = false;
+						}}
+						as='a'
+						tag
+					>
+						No Filter
+					</Label>
+				</div>
+
+				{Object.entries(tags).map(([name, color]) =>
 					<div
+						key={name}
 						className='labelbox'
-						style={{borderColor: tagFilter === false ? 'black' : 'transparent'}}
+						style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
 					>
 						<Label
 							onClick={() => {
-								setTagFilter(false);
-								tagFilterCache = false;
+								setTagFilter(name);
+								tagFilterCache = name;
 							}}
 							as='a'
+							color={color}
 							tag
 						>
-							No Filter
+							{name}
 						</Label>
 					</div>
-
-					{Object.entries(tags).map(([name, color]) =>
-						<div
-							className='labelbox'
-							style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
-						>
-							<Label
-								onClick={() => {
-									setTagFilter(name);
-									tagFilterCache = name;
-								}}
-								as='a'
-								color={color}
-								tag
-							>
-								{name}
-							</Label>
-						</div>
-					)}
-				</div>
-			</p>
+				)}
+			</div>
 
 			{courses ?
 				<Table basic='very'>
@@ -117,7 +117,7 @@ export function Courses(props) {
 									</Table.Cell>
 									<Table.Cell>
 										{!!x.tags && x.tags.split(',').map(name =>
-											<Label color={tags[name]} tag>
+											<Label key={name} color={tags[name]} tag>
 												{name}
 											</Label>
 										)}
diff --git a/webclient/src/Home.js b/webclient/src/Home.js
index 742d7e3..51fca5e 100644
--- a/webclient/src/Home.js
+++ b/webclient/src/Home.js
@@ -108,7 +108,11 @@ function MemberInfo(props) {
 					:
 						<Table.Row><Table.Cell>None, please sign up for an <Link to={'/courses/249/'}>Orientation</Link></Table.Cell></Table.Row>
 					}
-					{user.training.length > 3 && <Link to='/training'>[more]</Link>}
+					{user.training.length > 3 &&
+						<Table.Row><Table.Cell>
+							<Link to='/training'>[more]</Link>
+						</Table.Cell></Table.Row>
+					}
 				</Table.Body>
 			</BasicTable>
 
@@ -128,7 +132,11 @@ function MemberInfo(props) {
 					:
 						<Table.Row><Table.Cell>None</Table.Cell></Table.Row>
 					}
-					{user.transactions.length > 3 && <Link to='/transactions'>[more]</Link>}
+					{user.transactions.length > 3 &&
+						<Table.Row><Table.Cell>
+							<Link to='/transactions'>[more]</Link>
+						</Table.Cell></Table.Row>
+					}
 				</Table.Body>
 			</BasicTable>
 
diff --git a/webclient/src/Members.js b/webclient/src/Members.js
index fe1c93f..2af6752 100644
--- a/webclient/src/Members.js
+++ b/webclient/src/Members.js
@@ -194,10 +194,10 @@ export function Members(props) {
 			<p>
 				Sort by{' '}
 				{Object.entries(memberSorts).map((x, i) =>
-					<>
+					<React.Fragment key={x[0]}>
 						<a href='javascript:void(0)' onClick={() => doSort(x[0])}>{x[1]}</a>
 						{i < Object.keys(memberSorts).length - 1 && ', '}
-					</>
+					</React.Fragment>
 				)}.
 			</p>
 
diff --git a/webclient/src/light.css b/webclient/src/light.css
index bf5108c..2c96d2b 100644
--- a/webclient/src/light.css
+++ b/webclient/src/light.css
@@ -130,7 +130,7 @@ body {
 }
 
 .coursetags .ui.tag.label {
-	margin-top: 1rem;
+	margin-bottom: 1rem;
 }
 
 .newclasstable {