diff --git a/apps/site/src/app/schedule/ClipboardSchedule/ClipboardSchedule.tsx b/apps/site/src/app/schedule/ClipboardSchedule/ClipboardSchedule.tsx index c294708a..cc43fe33 100644 --- 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 = ({ schedule }) => { + const [currDate, setCurrDate] = useState(new Date()); + + useEffect(() => { + const timeUpdater = setInterval(() => setCurrDate(new Date()), 1000); + return () => clearInterval(timeUpdater || undefined); + }, []); + return (
@@ -69,7 +82,11 @@ const ClipboardSchedule: React.FC = ({ schedule }) => { initial="initial" animate="animate" > - + {currDate.getTime() < hackingStarts.getTime() ? ( + + ) : ( + + )} {schedule.map((day, i) => (
@@ -93,9 +110,9 @@ const ClipboardSchedule: React.FC = ({ 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 index 042deb6f..cd9408cc 100644 --- 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 = ({ + countdownTo, + isHackingStarted, +}) => { const [remainingSeconds, setRemainingSeconds] = useState(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 (
{ .padStart(2, "0")} - Until Hacking Begins + + {isHackingStarted && !isNaN(remainingSeconds) + ? "Until Hacking Ends" + : "Until Hacking Begins"} +
); };