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

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>
+          )}
+        </>
+      )}
+    </>
+  )
+}

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,19 +19,34 @@ 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 (
     <>
       <main
         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>
       )}
     </>