Hacker Leaderboard and Judging Schedule

components/hacker/HackerDash.tsx

@@ -17,6 +17,8 @@ import {
 } from 'antd';
 import useSWR from 'swr';
 import TeamManager from './TeamManager';
+import Leaderboard from './Leaderboard';
+import JudgingSchedule from './JudgingSchedule';
 import TeamSetup from './TeamSetup';
 import { TeamProfile } from '../../types/client';
 import { ApplicationStatus, UserData, JudgingSessionData, HackathonSettingsData } from '../../types/database';
@@ -35,6 +37,7 @@ type HackerProps = {
 	userApplicationStatus: number;
 	setUserApplicationStatus: (newType: number) => void;
 };
+
 export default function HackerDash({ userApplicationStatus, setUserApplicationStatus }: HackerProps) {
 	const [loading, setLoading] = useState(false);
 	const { data: session, status } = useSession();
@@ -161,48 +164,6 @@ export default function HackerDash({ userApplicationStatus, setUserApplicationSt
 		window.location.reload();
 	};
 
-	const judgingSessionColumns: ColumnsType<JudgingSessionData> = [
-		{
-			title: 'Time',
-			dataIndex: 'time',
-			key: 'name',
-			width: '25vw',
-			render: time => {
-				let startTime = new Date(time);
-				// add 10 minutes
-				let endTime = new Date(startTime.getTime() + 10 * 60000);
-				// return <>{startTime.getHours()}:{startTime.getMinutes()} - {endTime.getHours()}:{endTime.getMinutes()}</>
-				return (
-					<>
-						{startTime.toLocaleTimeString('default', {
-							hour: '2-digit',
-							minute: '2-digit',
-						})}{' '}
-						-{' '}
-						{endTime.toLocaleTimeString('default', {
-							hour: '2-digit',
-							minute: '2-digit',
-						})}
-					</>
-				);
-			},
-		},
-		{
-			title: 'Table',
-			dataIndex: 'team',
-			key: 'team',
-			width: '25vw',
-			render: loc => <>{loc.locationNum}</>,
-		},
-		{
-			title: 'Judge',
-			dataIndex: 'judge',
-			key: 'judge',
-			width: '50vw',
-			render: judge => <>{judge.name}</>,
-		},
-	];
-
 	const [judgingSessionData, setJudgingSessionData] = useState<JudgingSessionData[]>();
 
 	const getJudgingSessionData = () => {
@@ -704,6 +665,8 @@ export default function HackerDash({ userApplicationStatus, setUserApplicationSt
 									<Header user={user} signOut={signOut} />
 
 									{/* TODO: add Your Team, Leaderboard, Judging Schedule */}
+									<Leaderboard />
+									<JudgingSchedule judgingSessionData={judgingSessionData} />
 
 									{/* TODO: remove once ready. placeholder */}
 									<div

components/hacker/JudgingSchedule.tsx

@@ -0,0 +1,65 @@
+import { JudgingSessionData } from '../../types/database';
+import styles from '../../styles/hacker/Table.module.css';
+
+interface JudgingScheduleProps {
+	judgingSessionData: JudgingSessionData[] | undefined;
+}
+
+/**
+ * Convert the given time into a 10 minute time range
+ * @param time Start time
+ * @returns Formatted 10 minute time range starting from the given time
+ */
+const renderJudgingTime = (time: string) => {
+	let startTime = new Date(time);
+	// add 10 minutes
+	let endTime = new Date(startTime.getTime() + 10 * 60000);
+	// return <>{startTime.getHours()}:{startTime.getMinutes()} - {endTime.getHours()}:{endTime.getMinutes()}</>
+	return (
+		<>
+			{startTime.toLocaleTimeString('default', {
+				hour: '2-digit',
+				minute: '2-digit',
+			})}{' '}
+			-{' '}
+			{endTime.toLocaleTimeString('default', {
+				hour: '2-digit',
+				minute: '2-digit',
+			})}
+		</>
+	);
+};
+
+const JudgingSchedule = ({ judgingSessionData }: JudgingScheduleProps) => {
+	return (
+		<div className={styles.Container}>
+			Judging Schedule
+			{judgingSessionData?.length === 0 ? (
+				<div className={styles.Placeholder}>Schedule will show up here when hacking ends!</div>
+			) : (
+				<div className={styles.TableContainer}>
+					<table>
+						<thead>
+							<tr>
+								<th>Time</th>
+								<th>Table</th>
+								<th>Judge</th>
+							</tr>
+						</thead>
+						<tbody>
+							{judgingSessionData?.map(entry => (
+								<tr key={entry.time.toString()}>
+									<td>{renderJudgingTime(entry.time.toString())}</td>
+									<td>{entry.team.locationNum}</td>
+									<td>{entry.judge.name}</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default JudgingSchedule;

components/hacker/Leaderboard.tsx

@@ -0,0 +1,50 @@
+import { UserData, TeamData } from '../../types/database';
+import { RequestType, useCustomSWR } from '../../utils/request-utils';
+import styles from '../../styles/hacker/Table.module.css';
+
+interface LeaderboardData extends Omit<UserData, 'team'> {
+	team: TeamData;
+}
+
+const Leaderboard = () => {
+	// Leaderboard data
+	const { data: leaderboardData, error: leaderboardError } = useCustomSWR<LeaderboardData[]>({
+		url: '/api/leaderboard',
+		method: RequestType.GET,
+		errorMessage: 'Failed to get list of hackers on the leaderboard.',
+	});
+
+	return (
+		<div className={styles.Container}>
+			Leaderboard
+			{leaderboardError ? (
+				<div className={styles.Placeholder}>Failed to load data.</div>
+			) : !leaderboardData ? (
+				<div className={styles.Placeholder}>Loading...</div>
+			) : (
+				<div className={styles.TableContainer}>
+					<table>
+						<thead>
+							<tr>
+								<th>Name</th>
+								<th>Team</th>
+								<th>Points</th>
+							</tr>
+						</thead>
+						<tbody>
+							{leaderboardData?.map(entry => (
+								<tr key={entry.name}>
+									<td>{entry.name}</td>
+									<td>{entry.team?.name}</td>
+									<td>{entry.nfcPoints}</td>
+								</tr>
+							))}
+						</tbody>
+					</table>
+				</div>
+			)}
+		</div>
+	);
+};
+
+export default Leaderboard;

pages/api/leaderboard.ts

@@ -0,0 +1,22 @@
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { getSession } from 'next-auth/react';
+import dbConnect from '../../middleware/database';
+import User from '../../models/user';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse<any>) {
+	const session = await getSession({ req });
+	if (session?.userType !== 'HACKER') return res.status(403).send('Forbidden');
+
+	await dbConnect();
+	switch (req.method) {
+		case 'GET':
+			const users = await User.find({ nfcPoints: { $exists: true } })
+				.sort({ nfcPoints: -1 })
+				.limit(10)
+				.populate('team');
+
+			return res.status(200).send(users);
+		default:
+			return res.status(405).send('Method not supported brother');
+	}
+}

styles/hacker/Table.module.css

@@ -0,0 +1,54 @@
+.Container {
+	background-color: #000000bf;
+	border-radius: 50px;
+	padding: 45px 42px;
+	font-family: 'Inter';
+	font-weight: bold;
+	font-size: 70px;
+	color: #ffffff;
+}
+
+.TableContainer {
+	margin-top: 20px;
+	overflow-y: auto;
+	max-height: 700px;
+	font-size: 40px;
+}
+
+.TableContainer table {
+	table-layout: fixed;
+	width: 100%;
+}
+
+.TableContainer th {
+	position: sticky;
+	top: 0;
+	text-align: left;
+	background: #000000;
+	padding-bottom: 15px;
+}
+
+.TableContainer td {
+	color: #c9a76b;
+	padding-bottom: 15px;
+}
+
+.Placeholder {
+	font-size: 90px;
+	color: #ffffff80;
+}
+
+/* add media query for mobile screen */
+@media (max-width: 768px) {
+	.Container {
+		font-size: 30px;
+	}
+
+	.TableContainer {
+		font-size: 20px;
+	}
+
+	.Placeholder {
+		font-size: 40px;
+	}
+}