feat: setup countdown transition (#134)

* feat: setup countdown transition * fix: -1 -1 -1 flash when transitioning * fix: cleanup and update countdown time * update: change hacking end time
HackAtUCI · Nov 4, 2023 · 694f715 · 694f715
1 parent e8e15a8
commit 694f715
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 14 deletions.
diff --git a/apps/site/src/app/schedule/ClipboardSchedule/ClipboardSchedule.tsx b/apps/site/src/app/schedule/ClipboardSchedule/ClipboardSchedule.tsx
@@ -1,5 +1,7 @@
 "use client";
 
+import { useState, useEffect } from "react";
+
 import Image from "next/image";
 import Accordion from "react-bootstrap/Accordion";
 import Col from "react-bootstrap/Col";
@@ -56,7 +58,18 @@ interface ClipboardScheduleProps {
 	}[][];
 }
 
+// 10/4/23 10AM in UTC
+const hackingStarts = new Date(Date.UTC(2023, 10, 4, 17, 0, 0));
+const hackingEnds = new Date(Date.UTC(2023, 10, 5, 5, 0, 0));
+
 const ClipboardSchedule: React.FC<ClipboardScheduleProps> = ({ schedule }) => {
+	const [currDate, setCurrDate] = useState(new Date());
+
+	useEffect(() => {
+		const timeUpdater = setInterval(() => setCurrDate(new Date()), 1000);
+		return () => clearInterval(timeUpdater || undefined);
+	}, []);
+
 	return (
 		<Container as="section" className={" px-0 pt-0 position-relative"}>
 			<div className={styles.clip}>
@@ -69,7 +82,11 @@ const ClipboardSchedule: React.FC<ClipboardScheduleProps> = ({ schedule }) => {
 					initial="initial"
 					animate="animate"
 				>
-					<Countdown />
+					{currDate.getTime() < hackingStarts.getTime() ? (
+						<Countdown countdownTo={hackingStarts} isHackingStarted={false} />
+					) : (
+						<Countdown countdownTo={hackingEnds} isHackingStarted={true} />
+					)}
 					<Accordion defaultActiveKey="0" className={styles.accordion}>
 						{schedule.map((day, i) => (
 							<div key={i}>
@@ -93,9 +110,9 @@ const ClipboardSchedule: React.FC<ClipboardScheduleProps> = ({ schedule }) => {
 										endTime,
 									}) => {
 										const startTimeZoned = utcToZonedTime(
-												startTime,
-												"America/Los_Angeles",
-											),
+											startTime,
+											"America/Los_Angeles",
+										),
 											endTimeZoned = utcToZonedTime(
 												endTime,
 												"America/Los_Angeles",

diff --git a/apps/site/src/app/schedule/ClipboardSchedule/Countdown.tsx b/apps/site/src/app/schedule/ClipboardSchedule/Countdown.tsx
@@ -1,26 +1,29 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import clsx from "clsx";
 import styles from "./Countdown.module.scss";
 
-// 10/4/23 10AM in UTC
-const hackingStarts = new Date(Date.UTC(2023, 10, 4, 17, 0, 0));
+interface CountdownProps {
+	countdownTo: Date;
+	isHackingStarted: boolean;
+}
 
-const Countdown = () => {
+const Countdown: React.FC<CountdownProps> = ({
+	countdownTo,
+	isHackingStarted,
+}) => {
 	const [remainingSeconds, setRemainingSeconds] = useState<number>(NaN);
 
 	useEffect(() => {
-		setRemainingSeconds(
-			(hackingStarts.valueOf() - new Date().valueOf()) / 1000,
-		);
+		setRemainingSeconds((countdownTo.valueOf() - new Date().valueOf()) / 1000);
 		const interval = setInterval(() => {
-			setRemainingSeconds((r) => r - 1);
+			setRemainingSeconds((r) => (r > 0 && r < 1 ? r : r - 1));
 		}, 1000);
 
 		return () => clearInterval(interval);
-	}, []);
+	}, [countdownTo]);
 
 	return (
 		<div
@@ -47,7 +50,11 @@ const Countdown = () => {
 						.padStart(2, "0")}
 				</span>
 			</span>
-			<span className={styles.caption}>Until Hacking Begins</span>
+			<span className={styles.caption}>
+				{isHackingStarted && !isNaN(remainingSeconds)
+					? "Until Hacking Ends"
+					: "Until Hacking Begins"}
+			</span>
 		</div>
 	);
 };