Merge pull request #38 from aswanthabam/dev

feat : register only app implementation

src/App.tsx

@@ -33,6 +33,7 @@ import ErrorLog from "./pages/admin/admin_pages/error_log/ErrorLog";
 import AddAdmin from "./pages/admin/admin_pages/add_admin/AddAdmin";
 import AboutVijnana from "./pages/admin/admin_pages/about/AboutVijnana";
 import Participants from "./pages/admin/admin_pages/view_events/participants";
+import { RegisterEvent } from "./pages/register/events/RegisterEvents";
 
 function getTheme() {
   var theme = localStorage.getItem("theme");
@@ -71,7 +72,7 @@ function App() {
       console.log(status);
       if (status == LoginStatus.STEP1) redirect("/register/details");
       else if (status == LoginStatus.STEP2) {
-        redirect("/dashboard");
+        redirect("/register/events");
       }
     });
     if (
@@ -119,8 +120,46 @@ function App() {
           }
         ></Route>
         <Route path="/register">
-          <Route path="" element={<Register />}></Route>
-          <Route path="details" element={<RegisterStep2 />}></Route>
+          <Route
+            path=""
+            element={
+              <TopBarLayer
+                sidebarState={sidebarState}
+                setSidebarState={setSidebarState}
+                setTheme={setTheme}
+                theme={theme}
+                showLogoutButton={false}
+              >
+                <Register />
+              </TopBarLayer>
+            }
+          ></Route>
+          <Route
+            path="details"
+            element={
+              <TopBarLayer
+                sidebarState={sidebarState}
+                setSidebarState={setSidebarState}
+                setTheme={setTheme}
+                theme={theme}
+              >
+                <RegisterStep2 />
+              </TopBarLayer>
+            }
+          ></Route>
+          <Route
+            path="events"
+            element={
+              <TopBarLayer
+                sidebarState={sidebarState}
+                setSidebarState={setSidebarState}
+                setTheme={setTheme}
+                theme={theme}
+              >
+                <RegisterEvent />
+              </TopBarLayer>
+            }
+          ></Route>
         </Route>
         <Route path="/login" element={<Login />}></Route>
         <Route

src/apis/eventApi.tsx

@@ -102,14 +102,18 @@ export const getEvents = async (
     message: string | null,
     hideAfter: number | null
   ) => void,
-  limit: number | null | undefined = -1
+  limit: number | null | undefined = -1,
+  gctian: boolean = false
 ): Promise<Array<_EventInfo> | null> => {
   setToast(false, null, null);
   if (eventId) {
     var res = publicRouter.get("/api/v2/events/get?id=" + eventId);
   } else {
     var res = publicRouter.get(
-      "/api/v2/events/getAll" + (limit ? "?count=" + limit : "")
+      "/api/v2/events/getAll?" +
+        (limit ? "count=" + limit : "&") +
+        "&gctian=" +
+        gctian
     );
   }
   addLoader(res);

src/components/buttons/LoginButton/LogoutButton.tsx

@@ -0,0 +1,29 @@
+import styles from "./LoginButton.module.css";
+import React from "react";
+import googleIcon from "../../../assets/google.png";
+
+interface LogoutButtonProps {
+  onClick: () => void;
+  text: String;
+  iconVisible: boolean;
+}
+const LogoutButton: React.FC<LogoutButtonProps> = ({
+  onClick,
+  text,
+  iconVisible,
+}) => {
+  return (
+    <div onClick={onClick} className={styles.loginButton}>
+      {iconVisible && (
+        <div className={styles.icon}>
+          <img src={googleIcon} />
+        </div>
+      )}
+      <div className={styles.text}>
+        <span>{text}</span>
+      </div>
+    </div>
+  );
+};
+
+export default LogoutButton;

src/components/eventcardsmall/EventCardSmall.module.css

@@ -0,0 +1,24 @@
+.eventCard {
+  width: calc(100% - 60px);
+  min-height: 100px;
+  background: #15252c;
+  border-radius: 10px;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px;
+  .left {
+    .time {
+      font-size: 13px;
+      color: #747c80;
+    }
+    .description {
+      font-size: 12px;
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: column;
+  }
+}

src/components/eventcardsmall/EventCardSmall.tsx

@@ -0,0 +1,63 @@
+import style from "./EventCardSmall.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 EventCardSmallProps {
+  event: _Event;
+}
+
+const EventCardSmall: React.FC<EventCardSmallProps> = ({ 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.left}>
+        <p className={style.time}>
+          {event.date}, {event.time}
+        </p>
+        <h3>{event.name}</h3>
+        <p className={style.description}>{event.description}</p>
+      </div>
+      <div className={style.right}>
+        <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>
+  );
+};
+
+export default EventCardSmall;

src/components/eventlistsmall/EventListSmall.tsx

@@ -0,0 +1,36 @@
+import style from "./EventListSmall.module.css";
+import { useEffect, useState } from "react";
+import { getEvents } from "../../apis/eventApi";
+import { _Event } from "../../utils/types";
+import { useLoader } from "../toploader/useLoader";
+import { useToast } from "../toast/useToast";
+import EventCardSmall from "../eventcardsmall/EventCardSmall";
+interface EventListSmallProps {
+  limit?: number;
+  gctian: boolean;
+}
+
+const EventListSmall: React.FC<EventListSmallProps> = ({
+  limit = undefined,
+  gctian,
+}) => {
+  var { addLoader } = useLoader();
+  var { setToastStatus } = useToast();
+  const [events, setEvents] = useState<Array<_Event>>([]);
+  useEffect(() => {
+    getEvents(null, addLoader, setToastStatus, limit, gctian).then((e) => {
+      if (e) setEvents(e);
+      else console.log("error : no event data got");
+    });
+  }, []);
+
+  return (
+    <div className={style.eventlist}>
+      {events.map((event) => {
+        return <EventCardSmall event={event} />;
+      })}
+    </div>
+  );
+};
+
+export default EventListSmall;

src/components/topbar/topbar.tsx

@@ -3,20 +3,23 @@ import LoginButton from "../buttons/LoginButton/LoginButton";
 import style from "./topbar.module.css";
 import logo from "../../assets/logo.png";
 import React from "react";
+import LogoutButton from "../buttons/LoginButton/LogoutButton";
 interface TopBarProps {
   theme: string;
   setTheme: (theme: string) => void;
   setSidebarState: (state: boolean) => void;
   sidebarState: boolean;
   className?: string;
+  showLogoutButton?: boolean;
 }
 
 const TopBar: React.FC<TopBarProps> = ({
   setTheme,
   theme,
-  setSidebarState,
-  sidebarState,
+  // setSidebarState,
+  // sidebarState,
   className,
+  showLogoutButton,
 }) => {
   const [text, setText] = React.useState<string>("Register");
   const [link, setLink] = React.useState<string>("");
@@ -48,12 +51,12 @@ const TopBar: React.FC<TopBarProps> = ({
     <>
       <div className={style.topbar + " " + style.mobile + " " + className}>
         <div
-          onClick={() => {
-            setSidebarState(!sidebarState);
-          }}
+          // onClick={() => {
+          //   setSidebarState(!sidebarState);
+          // }}
           className={style.menuButton}
         >
-          <i className="bi bi-list"></i>
+          {/* <i className="bi bi-list"></i> */}
         </div>
         <div className={style.loginButton}>
           <span
@@ -69,11 +72,21 @@ const TopBar: React.FC<TopBarProps> = ({
               <i className="bi bi-sun"></i>
             )}
           </span>
-          <LoginButton
+          {/* <LoginButton
             onClick={handleLoginClick}
             text={text}
             iconVisible={iconVisible}
-          />
+          /> */}
+          {showLogoutButton && (
+            <LogoutButton
+              text={"Logout"}
+              iconVisible={false}
+              onClick={() => {
+                localStorage.removeItem("step");
+                redirect("/register");
+              }}
+            />
+          )}
         </div>
       </div>
 

src/layers/topbarlayer/TopBarLayer.tsx

@@ -7,13 +7,15 @@ interface TopBarLayerProps {
   setSidebarState: (state: boolean) => void;
   sidebarState: boolean;
   theme: string;
+  showLogoutButton?: boolean;
 }
 
 const TopBarLayer: React.FC<TopBarLayerProps> = ({
   children,
   setTheme,
   setSidebarState,
   sidebarState,
+  showLogoutButton = true,
   theme,
 }) => {
   return (
@@ -23,6 +25,7 @@ const TopBarLayer: React.FC<TopBarLayerProps> = ({
         theme={theme}
         setSidebarState={setSidebarState}
         sidebarState={sidebarState}
+        showLogoutButton={showLogoutButton}
       />
       {children}
     </>

src/pages/login/Login.tsx

@@ -29,7 +29,7 @@ const Login: React.FC<LoginProps> = ({}) => {
     e.preventDefault();
     var status = await loginEmail(data, addLoader, setToastStatus);
     if (status == LoginStatus.STEP2) {
-      redirect("/dashboard");
+      redirect("/register/events");
     } else if (status == LoginStatus.STEP1) {
       redirect("/register/details");
     }

src/pages/register/Register.module.css

@@ -1,6 +1,6 @@
 .register {
   width: 100%;
-  min-height: calc(100vh - var(--topbar-total-height));
+  height: calc(100vh - var(--topbar-height));
   display: flex;
   align-items: center;
   justify-content: start;
@@ -10,6 +10,7 @@
     rgba(47, 104, 56, 0) 23.61%,
     rgba(37, 105, 48, 0.46) 83.24%
   );
+  overflow: scroll;
   position: relative;
   .left {
     position: absolute;
@@ -22,8 +23,9 @@
     .logo {
       width: 20%;
     }
+    overflow: scroll;
     .background {
-      position: absolute;
+      position: sticky;
       width: 100%;
       height: 100%;
       top: 0;
@@ -69,7 +71,8 @@
         margin-bottom: 20px;
         color: var(--color-orange);
       }
-      & input {
+      & input,
+      select {
         width: calc(100% - 20px);
         display: block;
         height: 30px;
@@ -83,6 +86,12 @@
         font-size: 15px;
         /* margin-bottom: 20px; */
       }
+      & select {
+        height: 40px;
+        margin: 0;
+        width: 100%;
+        color: var(--color-black);
+      }
       & button {
         outline: none;
         border: none;