Hacker Portal Team Management (#406)

* checkpoint for team management * clean things up * checkpoint for team management * handle no webhook env * dont require devpost * delete old components * delete old api endpoint * add 5 endpoints for team * connect <TeamManagement/> to backend * clean up <HackerDash/> * fix cli * improve error message * Add the three buttons * Finish rename team logic * Run Prettier * Style the buttons mobile-responsively * Add devpost button * Run Prettier * Update team name and devpost done * Run Prettier * Leave team logic * Edit the join team error message * remove package-lock * clean up code, fix english * switch to hav consistent button style * remove unnecessary fragments * use antd modal. finish(?) <TeamManagement/> * add description for judging * handle error devpost empty * fix mobile * points are for redeeming prizes * Parse the members list * Fix mobile responsiveness * Run Prettier * Use flexbox for mobile * Run Prettier --------- Co-authored-by: Jiashu Huang <[email protected]> Co-authored-by: JiashuHarryHuang <[email protected]> Co-authored-by: zineanteoh <[email protected]>
VandyHacks · Oct 27, 2023 · f396fb5 · f396fb5 · vercel · Oct 27, 2023
1 parent 1ad2a18
commit f396fb5
Show file tree

Hide file tree

Showing 20 changed files with 994 additions and 685 deletions.
diff --git a/components/hacker/HackerDash.tsx b/components/hacker/HackerDash.tsx
@@ -12,6 +12,7 @@ import TextArea from 'antd/lib/input/TextArea';
 import { Content } from 'antd/lib/layout/layout';
 import Header from './hacking-start/Header';
 import RegistrationLogo from './RegistrationLogo';
+import TeamManagement from './hacking-start/TeamManagement';
 import Link from 'next/link';
 
 const DEV_DEPLOY =
@@ -25,13 +26,6 @@ type HackerProps = {
 export default function HackerDash({ userApplicationStatus, setUserApplicationStatus }: HackerProps) {
 	const [loading, setLoading] = useState(false);
 	const { data: session, status } = useSession();
-	const { data: teamData, error: teamError } = useSWR('/api/team-management', async url => {
-		const res = await fetch(url, { method: 'GET' });
-		if (!res.ok) return;
-		const { members, ...rest } = await res.json();
-
-		return { members: members.map((member: any) => member.name), ...rest } as TeamProfile;
-	});
 
 	const { data: user } = useSWR(
 		'/api/user-data',
@@ -443,7 +437,7 @@ export default function HackerDash({ userApplicationStatus, setUserApplicationSt
 										<Button icon={<UploadOutlined />}>Upload résumé (PDF only)</Button>
 									</Upload>
 								</Form.Item>
-								{/* TODO: uncomment when application starts */}
+								{/* TODO: create a new time in hackathon-settings db collection for applyTravelReimbursement end date */}
 								{/* <Form.Item
 									label={
 										<p className={styles.Label}>
@@ -648,61 +642,16 @@ export default function HackerDash({ userApplicationStatus, setUserApplicationSt
 								<div style={{ padding: '20px' }}>
 									<Header user={user} signOut={signOut} />
 
-									{/* TODO: add Your Team, Leaderboard, Judging Schedule */}
-									<Leaderboard />
+									<TeamManagement />
 									<JudgingSchedule judgingSessionData={judgingSessionData} />
+									<Leaderboard />
 
-									{/* TODO: remove once ready. placeholder */}
-									<div
-										style={{
-											display: 'flex',
-											flexDirection: 'column',
-											alignItems: 'center',
-											textAlign: 'center',
-											color: 'white',
-											fontSize: '10px',
-										}}>
-										<h1>Stay tuned! More info will appear here closer to the Hackathon!</h1>
-									</div>
 									<div className={styles['reportABugContainer']}>
 										<Link href="/report">
 											<div className={styles['reportABugText']}>Report a bug!</div>
 										</Link>
 										<BugOutlined />
 									</div>
-
-									{/* TODO: these are being refactored. should remove this after complete */}
-									{/* <div style={{ display: 'flex', justifyContent: 'center', paddingBottom: '10px' }}>
-										<Button size="small" type="default" onClick={() => signOut()}>
-											Sign out
-										</Button>
-										<div style={{ paddingLeft: '10px', color: 'white' }}>
-											Signed in as {session?.user?.email}
-										</div>
-										<div style={{ paddingLeft: '20px', color: 'white' }}>
-											Current NFC Points: {user.nfcPoints}
-										</div>
-									</div>
-									{!teamData && <TeamSetup />}
-									{teamData && (
-										<div style={{ width: '60vw', margin: 'auto' }}>
-											<Content style={{ width: '60vw', margin: 'auto' }}>
-												<Table
-													locale={{
-														emptyText: (
-															<div style={{ paddingTop: '50px', paddingBottom: '50px' }}>
-																<h3>Stay tuned! You will see your schedule soon!</h3>
-															</div>
-														),
-													}}
-													columns={judgingSessionColumns}
-													dataSource={judgingSessionData}
-												/>
-												<Divider />
-											</Content>
-											<TeamManager profile={teamData} />
-										</div>
-									)} */}
 								</div>
 							)}
 

diff --git a/components/hacker/JudgingSchedule.tsx b/components/hacker/JudgingSchedule.tsx
@@ -34,6 +34,9 @@ const JudgingSchedule = ({ judgingSessionData }: JudgingScheduleProps) => {
 	return (
 		<div className={styles.Container}>
 			Judging Schedule
+			<div className={styles.Description}>
+				You will be assigned a table and judge for judging. Please be at your table at the time indicated below.
+			</div>
 			{judgingSessionData?.length === 0 ? (
 				<div className={styles.Placeholder}>Schedule will show up here when hacking ends!</div>
 			) : (

diff --git a/components/hacker/Leaderboard.tsx b/components/hacker/Leaderboard.tsx
@@ -16,7 +16,10 @@ const Leaderboard = () => {
 
 	return (
 		<div className={styles.Container}>
-			Leaderboard
+			Points Leaderboard
+			<div className={styles.Description}>
+				Participate and check in to events to earn points. Points can be used to redeem prizes!
+			</div>
 			{leaderboardError ? (
 				<div className={styles.Placeholder}>Failed to load data.</div>
 			) : !leaderboardData ? (

diff --git a/components/hacker/TeamCard.tsx b/components/hacker/TeamCard.tsx
diff --git a/components/hacker/TeamManager.tsx b/components/hacker/TeamManager.tsx
diff --git a/components/hacker/TeamSetup.tsx b/components/hacker/TeamSetup.tsx
diff --git a/components/hacker/hacking-start/Header.tsx b/components/hacker/hacking-start/Header.tsx
@@ -7,31 +7,31 @@ import HackingBeginSoon from '../../../public/hacking-begin-soon.svg';
 
 const Header = ({ user, signOut }: { user: UserData; signOut: () => void }) => {
 	return (
-		<>
-			<div className={styles.HeaderBox}>
-				<div className={styles.HeaderTopBox}>
-					<Image alt="" width={150} height={150} src={VHLogo} />
-					<span className={styles.SignOut}>
-						<span className={styles.Email}>{user.email}</span>
-						<button className={styles.SignOutButton} onClick={() => signOut()}>
-							Sign Out
-						</button>
-					</span>
-				</div>
-				<div className={styles.HeaderMiddleBox}>
-					<span className={styles.UserName}>
-						<div className={styles.Greeting}>Hello,</div>
-						<div className={styles.Greeting}>{user.name}</div>
-						<div className={styles.NFCPoint}>Your currently have {user.nfcPoints} points</div>
-					</span>
-					<span className={styles.CurEvent}>
-						<div className={styles.CurEventText}>Current Event</div>
-						<Image src={HackingBeginSoon} width={300} height={300} alt="Hacking Begin Soon" />
-						<div className={styles.CurEventText}>Hacking Begins Soon</div>
-					</span>
-				</div>
+		<div className={styles.HeaderBox}>
+			<div className={styles.HeaderTopBox}>
+				<Image alt="" width={150} height={150} src={VHLogo} />
+				<span className={styles.SignOut}>
+					<span className={styles.Email}>{user.email}</span>
+					<button className={styles.SignOutButton} onClick={() => signOut()}>
+						Sign Out
+					</button>
+				</span>
 			</div>
-		</>
+			<div className={styles.HeaderMiddleBox}>
+				<span className={styles.UserName}>
+					<div className={styles.Greeting}>Hello,</div>
+					<div className={styles.Greeting}>{user.name}</div>
+					<div className={styles.NFCPoint}>
+						You currently have {user.nfcPoints} points. Participate in events to start earning more!
+					</div>
+				</span>
+				<span className={styles.CurEvent}>
+					<div className={styles.CurEventText}>Current Event</div>
+					<Image src={HackingBeginSoon} width={300} height={300} alt="Hacking Begin Soon" />
+					<div className={styles.CurEventText}>Hacking Begins Soon</div>
+				</span>
+			</div>
+		</div>
 	);
 };