From a76bce06b5d0bc00d8d2de1e2e9cf938e9eed1e2 Mon Sep 17 00:00:00 2001
From: Jiho Park <59248080+jihorobert@users.noreply.github.com>
Date: Mon, 11 Mar 2024 19:26:30 +0900
Subject: [PATCH] feat(fe): add contest register deregister button (#1545)

* feat(fe): add register and deregister button

* feat(fe): register button for upgoing and ongoing

* fix(fe): register for ongoing button

* fix(fe): change deregister button color

* fix(fe): fix toast message

* fix: get rid of comments

* fix(fe): change parameter name
---
 .../@tabs/_components/ParticipateButton.tsx   | 24 ------
 .../@tabs/_components/RegisterButton.tsx      | 74 +++++++++++++++++++
 .../(main)/contest/[contestId]/@tabs/page.tsx | 27 +++++--
 3 files changed, 96 insertions(+), 29 deletions(-)
 delete mode 100644 apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/ParticipateButton.tsx
 create mode 100644 apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx

diff --git a/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/ParticipateButton.tsx b/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/ParticipateButton.tsx
deleted file mode 100644
index 4b324c0b9e..0000000000
--- a/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/ParticipateButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import { fetcherWithAuth } from '@/lib/utils'
-
-const handleClick = async (contestId: string) => {
-  await fetcherWithAuth
-    .post(`contest/${contestId}/participation`, {
-      searchParams: { groupId: 1 }
-    })
-    .then((res) => res.json())
-    .catch((err) => console.log(err))
-}
-
-export default function ParticipateButton({ id }: { id: string }) {
-  return (
-    <Button
-      className="px-12 py-6 text-lg font-light"
-      onClick={() => handleClick(id)}
-    >
-      Register
-    </Button>
-  )
-}
diff --git a/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx b/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx
new file mode 100644
index 0000000000..0ba9cb0531
--- /dev/null
+++ b/apps/frontend/app/(main)/contest/[contestId]/@tabs/_components/RegisterButton.tsx
@@ -0,0 +1,74 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { fetcherWithAuth } from '@/lib/utils'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+const clickRegister = async (contestId: string) => {
+  await fetcherWithAuth
+    .post(`contest/${contestId}/participation`, {
+      searchParams: { groupId: 1 }
+    })
+    .then((res) => res.json())
+    .catch((err) => console.log(err))
+}
+
+const clickDeregister = async (contestId: string) => {
+  await fetcherWithAuth
+    .delete(`contest/${contestId}/participation`, {
+      searchParams: { groupId: 1 }
+    })
+    .then((res) => res.json())
+    .catch((err) => console.log(err))
+}
+
+export default function RegisterButton({
+  id,
+  registered,
+  state
+}: {
+  id: string
+  registered: boolean
+  state: string
+}) {
+  const [isRegistered, setIsRegistered] = useState(registered)
+  const buttonColor = isRegistered ? 'bg-secondary' : 'bg-primary'
+  return (
+    <>
+      {state === 'Upcoming' ? (
+        <Button
+          className={`px-12 py-6 text-lg font-light ${buttonColor} hover:${buttonColor}`}
+          onClick={() => {
+            if (isRegistered) {
+              clickDeregister(id)
+              setIsRegistered(false)
+              toast.success('Deregistered Upcoming test successfully')
+            } else {
+              clickRegister(id)
+              setIsRegistered(true)
+              toast.success('Registered Upcoming test successfully')
+            }
+          }}
+        >
+          {isRegistered ? 'Deregister' : 'Register'}
+        </Button>
+      ) : (
+        <>
+          {!isRegistered && (
+            <Button
+              className={`px-12 py-6 text-lg font-light ${buttonColor} hover:${buttonColor}`}
+              onClick={() => {
+                clickRegister(id)
+                setIsRegistered(true)
+                toast.success('Registered Ongoing test successfully')
+              }}
+            >
+              Register
+            </Button>
+          )}
+        </>
+      )}
+    </>
+  )
+}
diff --git a/apps/frontend/app/(main)/contest/[contestId]/@tabs/page.tsx b/apps/frontend/app/(main)/contest/[contestId]/@tabs/page.tsx
index 8d02b8eec6..5b6e10279a 100644
--- a/apps/frontend/app/(main)/contest/[contestId]/@tabs/page.tsx
+++ b/apps/frontend/app/(main)/contest/[contestId]/@tabs/page.tsx
@@ -1,11 +1,13 @@
 import { auth } from '@/lib/auth'
-import { fetcher } from '@/lib/utils'
+import { fetcherWithAuth } from '@/lib/utils'
 import { sanitize } from 'isomorphic-dompurify'
-import ParticipateButton from './_components/ParticipateButton'
+import RegisterButton from './_components/RegisterButton'
 
 interface ContestTop {
   description: string
   startTime: string
+  endTime: string
+  isRegistered: boolean
 }
 
 interface ContestTopProps {
@@ -17,9 +19,19 @@ interface ContestTopProps {
 export default async function ContestTop({ params }: ContestTopProps) {
   const session = await auth()
   const { contestId } = params
-  const data: ContestTop = await fetcher.get(`contest/${contestId}`).json()
+  const data: ContestTop = await fetcherWithAuth
+    .get(`contest/${contestId}`)
+    .json()
+
   const startTime = new Date(data.startTime)
+  const endTime = new Date(data.endTime)
   const currentTime = new Date()
+  const state =
+    currentTime >= endTime
+      ? 'Finished'
+      : currentTime < startTime
+        ? 'Upcoming'
+        : 'Ongoing'
 
   return (
     <>
@@ -27,9 +39,14 @@ export default async function ContestTop({ params }: ContestTopProps) {
         className="prose w-full max-w-full border-b-2 border-b-gray-300 p-5 py-12"
         dangerouslySetInnerHTML={{ __html: sanitize(data.description) }}
       />
-      {session && currentTime < startTime && (
+
+      {session && state !== 'Finished' && (
         <div className="mt-10 flex justify-center">
-          <ParticipateButton id={contestId} />
+          <RegisterButton
+            id={contestId}
+            registered={data.isRegistered}
+            state={state}
+          />
         </div>
       )}
     </>