feat : event registration from card

src/apis/eventApi.tsx

@@ -1,11 +1,38 @@
 import { _EventInfo } from "../utils/types";
 import {
+  ApiResponse,
   ResponseStatus,
   ResponseType,
   publicRouter,
   validateResponse,
 } from "./api";
 
+/*
+
+  registerEvent() function registers an event to the backend.
+  @param eventId: string
+  @param setLoading: (status: boolean) => void
+  @param setToast: (status: boolean, message: string | null, hideAfter: number | null) => void
+  @returns ApiResponse
+
+*/
+
+export const registerEvent = async (
+  eventId: string,
+  addLoader: (loader: Promise<any>) => void,
+  setToast: (
+    status: boolean,
+    message: string | null,
+    hideAfter: number | null
+  ) => void
+): Promise<ApiResponse> => {
+  var res = publicRouter.post("/api/v2/events/register", { eventId: eventId });
+  addLoader(res);
+  var val = await validateResponse(res);
+  setToast(true, val.data.message, 3000);
+  return val;
+};
+
 /*
   myEvents() function returns a list of events participating events from the backend.
   @param setLoading: (status: boolean) => void

src/components/eventcard/EventCard.tsx

@@ -1,11 +1,29 @@
 import { Link } from "react-router-dom";
 import style from "./EventCard.module.css";
 import { _Event } from "../../utils/types";
+import { registerEvent } from "../../apis/eventApi";
+import { useLoader } from "../toploader/useLoader";
+import { useToast } from "../toast/useToast";
+import { useState, useEffect } from "react";
+import { ResponseStatus } from "../../apis/api";
 interface EventCardProps {
   event: _Event;
 }
 
 const EventCard: React.FC<EventCardProps> = ({ event }) => {
+  var { addLoader } = useLoader();
+  var { setToastStatus } = useToast();
+  const [buttonText, setButtonText] = useState<string>("Register");
+
+  useEffect(() => {
+    console.log(event);
+    if (event.closed) setButtonText("Registration Closed");
+    else if (!event.is_reg) setButtonText("OPEN");
+    else if (event.participate_in) setButtonText("Registered");
+    // else if (event.gctian_only)
+    //   setButtonText("You cant register for this event");
+    else setButtonText("Register");
+  }, []);
   return (
     <div className={style.eventCard}>
       <div className={style.top}>
@@ -32,8 +50,27 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
         <Link className="primary-button" to={"/event/" + event.id}>
           Learn More
         </Link>
-        <a href={event.reg_link} className="primary-button clr2">
-          Register
+        <a
+          onClick={async () => {
+            if (!event.closed && event.is_reg && !event.participate_in) {
+              var res = await registerEvent(
+                event.id,
+                addLoader,
+                setToastStatus
+              );
+              res.status == ResponseStatus.SUCCESS &&
+                setButtonText("Registered");
+            }
+          }}
+          href="#"
+          className={
+            "primary-button" +
+            (!event.closed && event.is_reg && !event.participate_in
+              ? " clr2"
+              : " clr1")
+          }
+        >
+          {buttonText}
         </a>
       </div>
     </div>

src/index.css

@@ -75,3 +75,7 @@ a {
 .primary-button.clr2 {
   background: var(--color-green);
 }
+.primary-button.clr1 {
+  background: var(--color-2);
+  color: var(--color-black);
+}

src/utils/types.tsx

@@ -3,13 +3,15 @@ export type _Event = {
   name: string;
   description: string;
   type: string;
-  is_reg: boolean;
   reg_link: string;
   image: string;
   date: string;
   time: string;
   venue: string;
   closed: boolean;
+  gctian_only: boolean;
+  is_reg: boolean;
+  participate_in: boolean;
 };
 
 export type _EventInfo = {