From aa4723057c87a82f5c5d3b0eac8f434ce130c2f1 Mon Sep 17 00:00:00 2001 From: AkshithaFM Date: Tue, 6 Aug 2024 23:15:25 +0530 Subject: [PATCH 01/11] Completed frontend for displaying event details of a specific event --- .../src/pages/eventPage/EventPage.module.scss | 122 +++++++++ react-fm/src/pages/eventPage/EventPage.tsx | 233 ++++++++++++++++++ .../src/pages/eventPage/EventPage.types.ts | 28 +++ react-fm/src/pages/eventPage/constants.ts | 28 +++ react-fm/src/pages/eventPage/index.ts | 3 + .../matchQueues/eventsComponents/Events.tsx | 2 +- react-fm/src/routes/index.ts | 4 + react-fm/src/routes/types.ts | 1 + 8 files changed, 420 insertions(+), 1 deletion(-) create mode 100644 react-fm/src/pages/eventPage/EventPage.module.scss create mode 100644 react-fm/src/pages/eventPage/EventPage.tsx create mode 100644 react-fm/src/pages/eventPage/EventPage.types.ts create mode 100644 react-fm/src/pages/eventPage/constants.ts create mode 100644 react-fm/src/pages/eventPage/index.ts diff --git a/react-fm/src/pages/eventPage/EventPage.module.scss b/react-fm/src/pages/eventPage/EventPage.module.scss new file mode 100644 index 00000000..9e1efc01 --- /dev/null +++ b/react-fm/src/pages/eventPage/EventPage.module.scss @@ -0,0 +1,122 @@ +::-webkit-scrollbar { + display: none; +} + +@font-face { + font-family: 'CustomFont'; + src: url('../../../otf/MontserratAlt1-Medium.otf') format('opentype'); +} + +body { + font-family: 'Montserrat Alt 1', sans-serif; + font-weight: 600; +} + +.title { + font-size: 36px; + color: #4ce95a; + font-weight: 600; + text-align: center; + margin-top: 90px; + font-family: 'CustomFont', Arial, sans-serif; +} + +.container { + width: 80%; + margin: auto; + margin-top: 30px; +} + +.mobileContainer { + width: 90%; + margin: auto; + margin-top: 30px; +} + +.accordion { + background: #1a1919; + margin-bottom: 35px; + border-radius: 10px; +} + +.mobileAccordion { + margin-bottom: 20px; +} + +.linkTag { + color: #fff; +} + +.flexbox { + flex-flow: column; + width: 100%; +} + +.venue { + width: 100%; + align-items: center; + justify-content: space-between; + margin-bottom: 5px; + position: relative; +} + +.venue Button { + background: #4ce95a !important; + color: black; +} + +.venueName { + color: #fff; + font-weight: bold; + font-size: 21px; + display: flex; + align-items: center; +} + +.mobileVenueName { + color: #fff; + font-weight: bold; + font-size: 20px; + display: flex; + align-items: center; + position: relative; +} + +.sportsIcon { + margin-right: 5px; + color: #4ce95a; +} + +.box { + margin-top: 20px; + margin-left: 25px; +} + +.reservedPlayersContainer { + display: flex; +} + +.editIcon { + margin-left: 10px; + cursor: pointer; + padding: 8px; + font-size: 40px; + margin-top: -7px; +} + +.editIcon:hover { + box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, + rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, + rgba(0, 0, 0, 0.09) 0px -3px 5px; +} + +.reservedPlayers { + color: #4ce95a; + margin-bottom: 15px; + font-size: 20px; + font-weight: 600; +} + +.blink { + background-color: #342e37; +} diff --git a/react-fm/src/pages/eventPage/EventPage.tsx b/react-fm/src/pages/eventPage/EventPage.tsx new file mode 100644 index 00000000..e4fda017 --- /dev/null +++ b/react-fm/src/pages/eventPage/EventPage.tsx @@ -0,0 +1,233 @@ +/* eslint-disable @typescript-eslint/no-unused-vars */ + +/* eslint-disable no-useless-catch */ +// /* eslint-disable @typescript-eslint/no-unused-vars */ +// /* eslint-disable no-useless-catch */ +// // /** +// // * The function `EventPage` in the provided TypeScript React code fetches event details from a GraphQL +// // * API based on a unique event ID and displays the event information on the page. +// // * @param {string} uniqueEventId - The `uniqueEventId` parameter is used to uniquely identify an event. +// // * In the provided code snippet, it is a string parameter passed to the `getEventById` function to +// // * fetch event details from a GraphQL API. The `uniqueEventId` is used in the GraphQL query to retrieve +// // * specific event +// // * @returns The EventPage component is being returned. Inside the component, there is logic to fetch +// // * event details from a GraphQL API using the getEventById function. The component handles loading, +// // * error, and no event scenarios. Currently, it displays a simple message "event found" when an event +// // * is successfully fetched. +// // */ +// // /* eslint-disable no-useless-catch */ +import React, { useEffect, useState } from 'react'; +import { useLocation, useParams } from 'react-router-dom'; + +import BorderColorIcon from '@mui/icons-material/BorderColor'; +import SportsSoccerIcon from '@mui/icons-material/SportsSoccer'; +import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material'; +import Grid from '@mui/material/Grid'; + +import { FlexBox } from '@/components/styled'; +import useOrientation from '@/hooks/useOrientation'; + +import styles from '../matchQueues/Queue.module.scss'; +import { EventsCard } from '../matchQueues/eventsComponents/Events'; +import { JoinNow } from '../matchQueues/eventsComponents/JoinNow'; +import { PlayerDetails } from '../matchQueues/eventsComponents/Players'; +import type { PlayerDetail } from './EventPage.types'; +import type { Event } from './EventPage.types'; +import { apiUrl, query } from './constants'; + +const getEventById = async (uniqueEventId: string): Promise => { + try { + const response = await fetch(apiUrl, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: query, + }); + + const result = await response.json(); + if (result.errors) { + throw new Error(result.errors[0].message); + } + return result.data.event; + } catch (error) { + throw error; + } +}; + +const EventPage: React.FC = () => { + const { id } = useParams<{ id: string }>(); + const isPortrait = useOrientation(); + const location = useLocation(); + const [highLighted, setHighlighted] = useState(false); + const [open, setOpen] = useState(true); + const [isAdminMode, setIsAdminMode] = useState(false); + const [event, setEvent] = useState(null); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + useEffect(() => { + if (!id) { + setError('Event ID is missing.'); + setLoading(false); + return; + } + + const fetchEvent = async () => { + try { + setLoading(true); + const eventData = await getEventById(id); + setEvent(eventData); + } catch (err: any) { + setError(err.message); + } finally { + setLoading(false); + } + }; + + fetchEvent(); + }, [id]); + + useEffect(() => { + const adminMailId = localStorage.getItem('adminIds'); + const storedData = localStorage.getItem('userData'); + + if (storedData) { + const parseUserData = JSON.parse(storedData); + + if (adminMailId) { + const parseAdminData = JSON.parse(adminMailId); + const check = parseAdminData.data + .map((mailId: { EmailId: string }) => mailId.EmailId) + .includes(parseUserData.email); + + setIsAdminMode(check); + } + } + }, []); + function evetnIdtoString(event: Event | null) { + const eventId = + event?.eventId !== undefined && event?.eventId !== null ? String(event.eventId) : 'undefined'; + return eventId; + } + function reservedPlayersCount(event: Event | null) { + const reservedPlayersCount = event?.reservedPlayersCount || 0; + return reservedPlayersCount; + } + + function cityName(event: Event | null) { + const dateString = event?.eventId || ''; + const parts = dateString != '' ? dateString.split('-') : ''; + const cityId = parts.length > 0 ? parts[parts.length - 1] : '3'; + + let cityName; + if (cityId === '1') { + cityName = 'Hyderabad'; + } else if (cityId === '2') { + cityName = 'Gurgaon'; + } else { + cityName = ''; + } + return cityName; + } + + const renderPlayer = (player: PlayerDetail | null | undefined, i: number) => ( + + ); + + if (loading) { + return
Loading...
; + } + + if (error) { + return
Error: {error}
; + } + + if (!event) { + return
No event found
; + } + const EventsMapFunc = () => ( + + + + + + + {event?.venueName} + + {isPortrait ? null : ( + + )} + + + + + + + + Reserved Players + {isAdminMode ? : null} + + + + {Array.from({ length: event?.reservedPlayersCount || 0 }, (_, i) => { + const player = + i < reservedPlayersCount(event) || 0 ? event?.reservedPlayersList[i] : null; + return renderPlayer(player, i); + })} + + + + + + ); + + return <>{EventsMapFunc()}; +}; + +export default EventPage; diff --git a/react-fm/src/pages/eventPage/EventPage.types.ts b/react-fm/src/pages/eventPage/EventPage.types.ts new file mode 100644 index 00000000..05a5fd4a --- /dev/null +++ b/react-fm/src/pages/eventPage/EventPage.types.ts @@ -0,0 +1,28 @@ +type PlayerDetail = { + displayName: string; +}; + +type Event = { + reservedPlayersList: ReservedPlayerDetails[]; + index: number; + startTime: string; + endTime: string; + charges: number; + reservedPlayersCount: number; + waitListPlayersCount: number; + sportName: string; + venueName: string; + venueLocationLink: string; + stripePaymentUrl: string; + currency: string; + eventId: string; + uniqueEventId: string; + date: string; + time: string; +}; + +type ReservedPlayerDetails = { + displayName: string; +}; + +export type { Event, PlayerDetail, ReservedPlayerDetails }; diff --git a/react-fm/src/pages/eventPage/constants.ts b/react-fm/src/pages/eventPage/constants.ts new file mode 100644 index 00000000..9f4c6dbd --- /dev/null +++ b/react-fm/src/pages/eventPage/constants.ts @@ -0,0 +1,28 @@ +const apiUrl = `${import.meta.env.VITE_API_URL}`; + +const query = JSON.stringify({ + query: ` + query event { + event(uniqueEventId: "2-2024-08-03-1") { + currency + startTime + endTime + eventId + uniqueEventId + displayTitle + venueLocationLink + charges + date + time + venueName + reservedPlayersCount + waitListPlayersCount + stripePaymentUrl + reservedPlayersList { + displayName + } + } + } +`, +}); +export { apiUrl, query }; diff --git a/react-fm/src/pages/eventPage/index.ts b/react-fm/src/pages/eventPage/index.ts new file mode 100644 index 00000000..8ee2504b --- /dev/null +++ b/react-fm/src/pages/eventPage/index.ts @@ -0,0 +1,3 @@ +import EventPage from './EventPage'; + +export default EventPage; diff --git a/react-fm/src/pages/matchQueues/eventsComponents/Events.tsx b/react-fm/src/pages/matchQueues/eventsComponents/Events.tsx index 0b8d115d..88641f1d 100644 --- a/react-fm/src/pages/matchQueues/eventsComponents/Events.tsx +++ b/react-fm/src/pages/matchQueues/eventsComponents/Events.tsx @@ -54,7 +54,6 @@ export const EventsCard: FC = ({ const dateToString = tomorrow.toString(); const index = dateToString.indexOf('2024'); const futureDate = dateToString.substring(0, index); - const startTime = time.split('-')[0]; //8:00PM const endTime = time.split('-')[1].split(' ')[0]; const usTime = (dummyData ? futureDate : date) + ' ' + startTime + ' - ' + endTime; @@ -111,6 +110,7 @@ export const EventsCard: FC = ({ timeZone = {usTime}; } }); + return timeZone; }; diff --git a/react-fm/src/routes/index.ts b/react-fm/src/routes/index.ts index c308a6a3..e8cf425a 100644 --- a/react-fm/src/routes/index.ts +++ b/react-fm/src/routes/index.ts @@ -100,6 +100,10 @@ const routes: Routes = { component: asyncComponentLoader(() => import('@/pages/aboutUs')), path: '/about-2', }, + [Pages.Event]: { + component: asyncComponentLoader(() => import('@/pages/eventPage')), + path: '/event/:id', + }, }; export default routes; diff --git a/react-fm/src/routes/types.ts b/react-fm/src/routes/types.ts index 7aedcd42..fca05a1b 100644 --- a/react-fm/src/routes/types.ts +++ b/react-fm/src/routes/types.ts @@ -23,6 +23,7 @@ enum Pages { Profile, About2, Rewards, + Event, } type PathRouteCustomProps = { From 3791082064b6cd0f121935c379da718954d340fe Mon Sep 17 00:00:00 2001 From: AkshithaFM Date: Wed, 7 Aug 2024 22:22:31 +0530 Subject: [PATCH 02/11] Added formatting to the accordian for displaying the game. --- react-fm/src/App.tsx | 7 ++- react-fm/src/pages/Rewards/Rewards.tsx | 5 --- react-fm/src/pages/aboutUs/AboutUs.tsx | 7 +-- react-fm/src/pages/addGame/AddGame.tsx | 8 +--- react-fm/src/pages/eventPage/EventPage.tsx | 43 ++++++++++++++++++- .../src/pages/eventPage/EventPage.types.ts | 5 +++ react-fm/src/pages/eventPage/constants.ts | 2 +- 7 files changed, 54 insertions(+), 23 deletions(-) diff --git a/react-fm/src/App.tsx b/react-fm/src/App.tsx index 8053485a..a5d21ce4 100644 --- a/react-fm/src/App.tsx +++ b/react-fm/src/App.tsx @@ -15,6 +15,9 @@ import Notifications from '@/sections/Notifications'; import SW from '@/sections/SW'; import Sidebar from '@/sections/Sidebar'; +import Footer from './sections/Footer'; +import Header from './sections/Header'; + function App() { useEffect(() => { ReactGA.initialize('G-12MG3SRC9K'); //tracking ID @@ -30,11 +33,11 @@ function App() { - {/*
*/} +
- {/*