From 46c552e7e5981af0cf65ac419d9ee763628df5cc Mon Sep 17 00:00:00 2001
From: George Kaye <georgejkaye@gmail.com>
Date: Mon, 1 Jan 2024 15:48:24 +0000
Subject: [PATCH] [feat] Add countdown

---
 client/Dockerfile.dev   |  3 +++
 client/Dockerfile.prod  |  4 ++++
 client/src/app/page.tsx | 46 +++++++++++++++++++++++++++++++++++++++++
 docker-compose.dev.yml  |  1 +
 docker-compose.prod.yml |  1 +
 5 files changed, 55 insertions(+)

diff --git a/client/Dockerfile.dev b/client/Dockerfile.dev
index 36a0673..8afbc34 100644
--- a/client/Dockerfile.dev
+++ b/client/Dockerfile.dev
@@ -7,4 +7,7 @@ RUN yarn
 ARG CLIENT_PORT
 ENV CLIENT_PORT ${CLIENT_PORT}
 
+ARG DEADLINE
+ENV NEXT_PUBLIC_DEADLINE ${DEADLINE}
+
 CMD yarn dev -p ${CLIENT_PORT}
\ No newline at end of file
diff --git a/client/Dockerfile.prod b/client/Dockerfile.prod
index 645290d..45e50a1 100644
--- a/client/Dockerfile.prod
+++ b/client/Dockerfile.prod
@@ -44,6 +44,10 @@ USER nextjs
 
 ARG CLIENT_PORT
 ENV PORT ${CLIENT_PORT}
+
+ARG DEADLINE
+ENV NEXT_PUBLIC_DEADLINE ${DEADLINE}
+
 ENV HOSTNAME "0.0.0.0"
 
 CMD ["node", "server.js"]
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
index 70e2054..5f510e0 100644
--- a/client/src/app/page.tsx
+++ b/client/src/app/page.tsx
@@ -23,6 +23,48 @@ const Stat = (props: { name: string; value: string; styles: string }) => (
     </div>
 )
 
+const CountdownElement = (props: { value: number; text: string }) => (
+    <>
+        <div className={`${statStyle} w-16 bg-blue-400 text-white`}>
+            {props.value}
+        </div>
+        <div className="pr-2">{props.text}</div>
+    </>
+)
+
+const Countdown = (props: { deadline: Date | undefined }) => {
+    const [time, setTime] = useState(new Date())
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTime(new Date())
+        }, 1000)
+        return () => clearInterval(interval)
+    })
+    const timeRemaining = !props.deadline
+        ? 0
+        : props.deadline.getTime() / 1000 - time.getTime() / 1000
+    const days = Math.floor(timeRemaining / 86400)
+    const hours = Math.floor(Math.floor(timeRemaining % 86400) / 3600)
+    const minutes = Math.floor(Math.floor(timeRemaining % 3600) / 60)
+    const seconds = Math.floor(timeRemaining % 60)
+    return !props.deadline ? (
+        ""
+    ) : (
+        <div className="m-5">
+            <div className="p-2">
+                The submission deadline is {props.deadline.toLocaleDateString()}
+                , which is in
+            </div>
+            <div className="flex flex-row justify-center items-center my-2">
+                <CountdownElement value={days} text="days" />
+                <CountdownElement value={hours} text="hours" />
+                <CountdownElement value={minutes} text="minutes" />
+                <CountdownElement value={seconds} text="seconds" />
+            </div>
+        </div>
+    )
+}
+
 export default function Home() {
     const [commits, setCommits] = useState<Commit[]>([])
     const [mainCommit, setMainCommit] = useState<Commit | undefined>(undefined)
@@ -43,6 +85,9 @@ export default function Home() {
     const diagramsStyle = `bg-teal-400 text-white`
     const filesStyle = `bg-orange-400 text-white`
     const mainDivStyle = "text-center text-2xl m-auto"
+    const deadline = process.env.NEXT_PUBLIC_DEADLINE
+        ? new Date(Date.parse(process.env.NEXT_PUBLIC_DEADLINE))
+        : new Date()
     return (
         <main className={manrope.className}>
             <div className={mainDivStyle}>
@@ -91,6 +136,7 @@ export default function Home() {
                             value={`${mainCommit.files}`}
                             styles={filesStyle}
                         />
+                        <Countdown deadline={deadline} />
                     </div>
                 )}
             </div>
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index 8d80baa..67e3db9 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -30,6 +30,7 @@ services:
       args:
         API_URL: "http://api:${API_PORT}"
         CLIENT_PORT: ${CLIENT_PORT}
+        DEADLINE: 2024-07-01T23:59
     ports:
       - "${CLIENT_PORT}:${CLIENT_PORT}"
     environment:
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index 93a91da..fa9da27 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -47,6 +47,7 @@ services:
       args:
         API_URL: "http://api:${API_PORT}"
         CLIENT_PORT: ${CLIENT_PORT}
+        DEADLINE: 2024-07-01T23:59:59
     ports:
       - "${CLIENT_PORT}:${CLIENT_PORT}"
     environment: