Split classes into upcoming and recent

webclient/src/Classes.js

@@ -7,29 +7,13 @@ import moment from 'moment';
 import { requester } from './utils.js';
 import { NotFound, PleaseLogin } from './Misc.js';
 
-export function Classes(props) {
+function ClassTable(props) {
-	const [classes, setClasses] = useState(false);
+	const { classes } = props;
-	const { token } = props;
-
-	useEffect(() => {
-		requester('/sessions/', 'GET', token)
-		.then(res => {
-			console.log(res);
-			setClasses(res.results);
-		})
-		.catch(err => {
-			console.log(err);
-		});
-	}, []);
 
 	const getInstructor = (session) =>
 		session.instructor ? session.instructor.first_name : session.old_instructor;
 
 	return (
-		<Container>
-			<Header size='large'>Most Recent Classes</Header>
-
-			{classes ?
 		<Table basic='very'>
 			<Table.Header>
 				<Table.Row>
@@ -50,7 +34,7 @@ export function Classes(props) {
 							<Table.Cell>{x.course.name}</Table.Cell>
 							<Table.Cell>
 								<Link to={'/classes/'+x.id}>
-											{moment.utc(x.datetime).format('LL')}
+									{moment.utc(x.datetime).format('ll')}
 								</Link>
 							</Table.Cell>
 							<Table.Cell>{getInstructor(x)}</Table.Cell>
@@ -63,6 +47,40 @@ export function Classes(props) {
 				}
 			</Table.Body>
 		</Table>
+	);
+};
+
+export function Classes(props) {
+	const [classes, setClasses] = useState(false);
+	const { token } = props;
+
+	useEffect(() => {
+		requester('/sessions/', 'GET', token)
+		.then(res => {
+			console.log(res);
+			setClasses(res.results);
+		})
+		.catch(err => {
+			console.log(err);
+		});
+	}, []);
+
+	const now = new Date().toISOString();
+
+	return (
+		<Container>
+			<Header size='large'>Class List</Header>
+
+			<Header size='medium'>Upcoming</Header>
+			{classes ?
+				<ClassTable classes={classes.filter(x => x.datetime > now)} />
+			:
+				<p>Loading...</p>
+			}
+
+			<Header size='medium'>Recent</Header>
+			{classes ?
+				<ClassTable classes={classes.filter(x => x.datetime < now)} />
 			:
 				<p>Loading...</p>
 			}
@@ -96,7 +114,7 @@ export function ClassDetail(props) {
 			{!error ?
 				clazz ?
 					<div>
-						<Header size='large'>Class Detail</Header>
+						<Header size='large'>Class Details</Header>
 
 						<Table unstackable basic='very'>
 							<Table.Body>
@@ -111,7 +129,7 @@ export function ClassDetail(props) {
 								<Table.Row>
 									<Table.Cell>Date:</Table.Cell>
 									<Table.Cell>
-										{moment.utc(clazz.datetime).format('LL')}
+										{moment.utc(clazz.datetime).format('ll')}
 									</Table.Cell>
 								</Table.Row>
 								<Table.Row>

webclient/src/Courses.js

@@ -108,7 +108,7 @@ export function CourseDetail(props) {
 										<Table.Row key={i}>
 											<Table.Cell>
 												<Link to={'/classes/'+x.id}>
-													{moment.utc(x.datetime).format('LL')}
+													{moment.utc(x.datetime).format('ll')}
 												</Link>
 											</Table.Cell>
 											<Table.Cell>{moment.utc(x.datetime).format('LT')}</Table.Cell>