From 5c1f805bafb97d474923719660773f757d4797bf Mon Sep 17 00:00:00 2001 From: Aswanth Vc Date: Thu, 22 Feb 2024 01:43:36 +0530 Subject: [PATCH] feat : register only app implementation --- src/App.tsx | 45 +++++++++- src/apis/eventApi.tsx | 8 +- .../buttons/LoginButton/LogoutButton.tsx | 29 +++++++ .../eventcardsmall/EventCardSmall.module.css | 24 ++++++ .../eventcardsmall/EventCardSmall.tsx | 63 ++++++++++++++ .../eventlistsmall/EventListSmall.module.css | 0 .../eventlistsmall/EventListSmall.tsx | 36 ++++++++ src/components/topbar/topbar.tsx | 29 +++++-- src/layers/topbarlayer/TopBarLayer.tsx | 3 + src/pages/login/Login.tsx | 2 +- src/pages/register/Register.module.css | 15 +++- src/pages/register/RegisterStep2.tsx | 39 ++++++--- .../register/events/RegisterEvent.module.css | 19 +++++ src/pages/register/events/RegisterEvents.tsx | 83 +++++++++++++++++++ 14 files changed, 365 insertions(+), 30 deletions(-) create mode 100644 src/components/buttons/LoginButton/LogoutButton.tsx create mode 100644 src/components/eventcardsmall/EventCardSmall.module.css create mode 100644 src/components/eventcardsmall/EventCardSmall.tsx create mode 100644 src/components/eventlistsmall/EventListSmall.module.css create mode 100644 src/components/eventlistsmall/EventListSmall.tsx create mode 100644 src/pages/register/events/RegisterEvent.module.css create mode 100644 src/pages/register/events/RegisterEvents.tsx diff --git a/src/App.tsx b/src/App.tsx index 92df59a1b..52b1fdbff 100644 --- a/src/App.tsx +++ b/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() { } > - }> - }> + + + + } + > + + + + } + > + + + + } + > }> void, - limit: number | null | undefined = -1 + limit: number | null | undefined = -1, + gctian: boolean = false ): Promise | 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); diff --git a/src/components/buttons/LoginButton/LogoutButton.tsx b/src/components/buttons/LoginButton/LogoutButton.tsx new file mode 100644 index 000000000..bdcef232b --- /dev/null +++ b/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 = ({ + onClick, + text, + iconVisible, +}) => { + return ( +
+ {iconVisible && ( +
+ +
+ )} +
+ {text} +
+
+ ); +}; + +export default LogoutButton; diff --git a/src/components/eventcardsmall/EventCardSmall.module.css b/src/components/eventcardsmall/EventCardSmall.module.css new file mode 100644 index 000000000..dc03f6f92 --- /dev/null +++ b/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; + } +} diff --git a/src/components/eventcardsmall/EventCardSmall.tsx b/src/components/eventcardsmall/EventCardSmall.tsx new file mode 100644 index 000000000..adbc947ac --- /dev/null +++ b/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 = ({ event }) => { + var { addLoader } = useLoader(); + var { setToastStatus } = useToast(); + const [buttonText, setButtonText] = useState("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 ( + + ); +}; + +export default EventCardSmall; diff --git a/src/components/eventlistsmall/EventListSmall.module.css b/src/components/eventlistsmall/EventListSmall.module.css new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/eventlistsmall/EventListSmall.tsx b/src/components/eventlistsmall/EventListSmall.tsx new file mode 100644 index 000000000..6b11814bc --- /dev/null +++ b/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 = ({ + limit = undefined, + gctian, +}) => { + var { addLoader } = useLoader(); + var { setToastStatus } = useToast(); + const [events, setEvents] = useState>([]); + useEffect(() => { + getEvents(null, addLoader, setToastStatus, limit, gctian).then((e) => { + if (e) setEvents(e); + else console.log("error : no event data got"); + }); + }, []); + + return ( +
+ {events.map((event) => { + return ; + })} +
+ ); +}; + +export default EventListSmall; diff --git a/src/components/topbar/topbar.tsx b/src/components/topbar/topbar.tsx index e2bf28ca5..2b4043062 100644 --- a/src/components/topbar/topbar.tsx +++ b/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 = ({ setTheme, theme, - setSidebarState, - sidebarState, + // setSidebarState, + // sidebarState, className, + showLogoutButton, }) => { const [text, setText] = React.useState("Register"); const [link, setLink] = React.useState(""); @@ -48,12 +51,12 @@ const TopBar: React.FC = ({ <>
{ - setSidebarState(!sidebarState); - }} + // onClick={() => { + // setSidebarState(!sidebarState); + // }} className={style.menuButton} > - + {/* */}
= ({ )} - + /> */} + {showLogoutButton && ( + { + localStorage.removeItem("step"); + redirect("/register"); + }} + /> + )}
diff --git a/src/layers/topbarlayer/TopBarLayer.tsx b/src/layers/topbarlayer/TopBarLayer.tsx index 9f0ebdc0f..05df70161 100644 --- a/src/layers/topbarlayer/TopBarLayer.tsx +++ b/src/layers/topbarlayer/TopBarLayer.tsx @@ -7,6 +7,7 @@ interface TopBarLayerProps { setSidebarState: (state: boolean) => void; sidebarState: boolean; theme: string; + showLogoutButton?: boolean; } const TopBarLayer: React.FC = ({ @@ -14,6 +15,7 @@ const TopBarLayer: React.FC = ({ setTheme, setSidebarState, sidebarState, + showLogoutButton = true, theme, }) => { return ( @@ -23,6 +25,7 @@ const TopBarLayer: React.FC = ({ theme={theme} setSidebarState={setSidebarState} sidebarState={sidebarState} + showLogoutButton={showLogoutButton} /> {children} diff --git a/src/pages/login/Login.tsx b/src/pages/login/Login.tsx index 24692e92d..1c1ba082f 100644 --- a/src/pages/login/Login.tsx +++ b/src/pages/login/Login.tsx @@ -29,7 +29,7 @@ const Login: React.FC = ({}) => { 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"); } diff --git a/src/pages/register/Register.module.css b/src/pages/register/Register.module.css index 517c1a440..259ec83c4 100644 --- a/src/pages/register/Register.module.css +++ b/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; diff --git a/src/pages/register/RegisterStep2.tsx b/src/pages/register/RegisterStep2.tsx index 346036b4f..4e5d0a5b0 100644 --- a/src/pages/register/RegisterStep2.tsx +++ b/src/pages/register/RegisterStep2.tsx @@ -1,7 +1,6 @@ import React, { useState } from "react"; import style from "./Register.module.css"; import { Link, useNavigate } from "react-router-dom"; -// import logo from "../../assets/Logo KBM.png"; import alien from "../../assets/dehill-spacelove-1-dribble.gif"; import { _EventInfo, @@ -29,7 +28,7 @@ const RegisterStep2: React.FC = ({}) => { const onSubmit = async (e: any) => { e.preventDefault(); if (await completeRegistration(data, addLoader, setToastStatus)) { - redirect("/dashboard"); + redirect("/register/events"); } }; return ( @@ -122,28 +121,37 @@ const RegisterStep2: React.FC = ({}) => { data.phone = e.target.value; setData(data); }} - type="phone" + type="number" placeholder="Phone No *" required /> - { data.course = e.target.value; setData(data); }} - type="text" placeholder="Course *" required - /> - + + + + + + + ) : ( <> @@ -152,7 +160,7 @@ const RegisterStep2: React.FC = ({}) => { data.phone = e.target.value; setData(data); }} - type="phone" + type="number" placeholder="Phone No *" required /> @@ -174,15 +182,20 @@ const RegisterStep2: React.FC = ({}) => { placeholder="Course *" required /> - { data.year = parseInt(e.target.value); setData(data); }} - type="number" placeholder="Year *" required - />{" "} + > + + + + + + )} diff --git a/src/pages/register/events/RegisterEvent.module.css b/src/pages/register/events/RegisterEvent.module.css new file mode 100644 index 000000000..2d271a10c --- /dev/null +++ b/src/pages/register/events/RegisterEvent.module.css @@ -0,0 +1,19 @@ +.events { + width: calc(100% - 20px); + min-height: 200px; + /* max-height: calc(100vh - 110px); */ + background: #121212ab; + border-radius: 30px; + padding: 20px 0; + overflow: auto; + .heading { + text-align: center; + width: 100%; + } + .info { + color: #ffffffab; + padding: 0 20px; + margin: 10px 0; + display: block; + } +} diff --git a/src/pages/register/events/RegisterEvents.tsx b/src/pages/register/events/RegisterEvents.tsx new file mode 100644 index 000000000..3400ee859 --- /dev/null +++ b/src/pages/register/events/RegisterEvents.tsx @@ -0,0 +1,83 @@ +import style from "../Register.module.css"; +import alien from "../../../assets/dehill-spacelove-1-dribble.gif"; +import styles from "./RegisterEvent.module.css"; +import { useEffect, useState } from "react"; +import EventListSmall from "../../../components/eventlistsmall/EventListSmall"; +import { userDetails } from "../../../apis/userApi"; +import { useLoader } from "../../../components/toploader/useLoader"; +import { useToast } from "../../../components/toast/useToast"; +import { _UserDetails } from "../../../utils/types"; + +export const RegisterEvent: React.FC = () => { + const { addLoader } = useLoader(); + const { setToastStatus } = useToast(); + const [user, setUser] = useState<_UserDetails | null>(); + useEffect(() => { + console.log("RegisterEvent"); + userDetails(addLoader, setToastStatus).then((res) => { + if (!res) { + console.log("error : no user data got"); + } else { + setUser(res); + } + }); + }, []); + return ( +
+
+ {/* */} +
+ + + + + + + + + + + + +
+
+
+
+ {user && ( + <> +

Events

+

+ Click on register on the events you wish to participate. +

+ +

+ Don't hesitate to contact if you have any queries.{" "} + Contact +

+ + )} +
+
+
+ ); +};