Misc fixes

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,8 +363,8 @@ export function Classes(props) {
 				</Button>
 			</p>
 
-			<p>
-				Filter by tag:
+			<p>Filter by tag:</p>
+
 			<div className='coursetags'>
 				<div
 					className='labelbox'
@@ -372,6 +384,7 @@ export function Classes(props) {
 
 				{Object.entries(tags).map(([name, color]) =>
 					<div
+						key={name}
 						className='labelbox'
 						style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
 					>
@@ -389,7 +402,6 @@ export function Classes(props) {
 					</div>
 				)}
 			</div>
-			</p>
 
 			{classes.length && courses.length ?
 				sortByCourse ?

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,8 +53,8 @@ export function Courses(props) {
 				<InstructorCourseList courses={courses} setCourses={setCourses} {...props} />
 			</Segment>}
 
-			<p>
-				Filter by tag:
+			<p>Filter by tag:</p>
+
 			<div className='coursetags'>
 				<div
 					className='labelbox'
@@ -74,6 +74,7 @@ export function Courses(props) {
 
 				{Object.entries(tags).map(([name, color]) =>
 					<div
+						key={name}
 						className='labelbox'
 						style={{borderColor: tagFilter === name ? 'black' : 'transparent'}}
 					>
@@ -91,7 +92,6 @@ export function Courses(props) {
 					</div>
 				)}
 			</div>
-			</p>
 
 			{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>
 										)}

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>
 

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>
 

webclient/src/light.css

@@ -130,7 +130,7 @@ body {
 }
 
 .coursetags .ui.tag.label {
-	margin-top: 1rem;
+	margin-bottom: 1rem;
 }
 
 .newclasstable {