From fcd0bb74ca657d8792e00a1e394f761e88706957 Mon Sep 17 00:00:00 2001 From: ayanSCYY Date: Wed, 10 Jul 2024 23:45:19 +0530 Subject: [PATCH 1/7] feat:add changes --- package.json | 2 +- .../customcomponents/CustomAlert.jsx | 25 +++ .../customcomponents/customAlert.style.jsx | 51 +++++ src/components/events/EventCard.jsx | 117 ++++++++---- src/components/events/EventModal.jsx | 19 +- src/components/events/Events.jsx | 131 ++++++++++++- src/components/events/EventsWrapper.jsx | 52 +++-- .../events/IndividualEventModal.jsx | 94 +++++++++ src/components/events/Register2Modal.jsx | 28 +++ .../events/RegisteredEventModal.jsx | 89 +++++++++ src/components/events/TeamEventModal.jsx | 179 ++++++++++++++++++ src/components/events/eventCard.styles.jsx | 2 +- src/components/events/eventModal.styles.jsx | 10 +- src/components/events/registerModal.style.jsx | 109 +++++++++++ .../events/registeredEventModal.styles.jsx | 26 +++ .../events/teamRegistrationModal.jsx | 81 ++++++++ .../eventsqueries/GetRegisteredEvents.jsx | 43 +++++ .../eventsqueries/GetRegisteredTeamEvents.jsx | 21 ++ src/components/eventsqueries/getEvents.jsx | 32 ++++ src/config/content/events/events.js | 130 +++++++------ .../teamRegistration/registerSchema.js | 12 ++ .../content/teamRegistration/registermodal.js | 5 + src/config/index.js | 10 +- src/context/AuthContext.jsx | 2 +- src/graphQL/mutations/eventRegistration.js | 10 +- src/graphQL/mutations/teamRegistration.js | 13 +- src/graphQL/queries/eventRegistration.js | 4 +- src/graphQL/queries/getEvents.js | 28 +-- src/graphQL/queries/teamRegistration.js | 11 +- src/styles/index.css | 4 +- 30 files changed, 1174 insertions(+), 166 deletions(-) create mode 100644 src/components/customcomponents/CustomAlert.jsx create mode 100644 src/components/customcomponents/customAlert.style.jsx create mode 100644 src/components/events/IndividualEventModal.jsx create mode 100644 src/components/events/Register2Modal.jsx create mode 100644 src/components/events/RegisteredEventModal.jsx create mode 100644 src/components/events/TeamEventModal.jsx create mode 100644 src/components/events/registerModal.style.jsx create mode 100644 src/components/events/registeredEventModal.styles.jsx create mode 100644 src/components/events/teamRegistrationModal.jsx create mode 100644 src/components/eventsqueries/GetRegisteredEvents.jsx create mode 100644 src/components/eventsqueries/GetRegisteredTeamEvents.jsx create mode 100644 src/components/eventsqueries/getEvents.jsx create mode 100644 src/config/content/teamRegistration/registerSchema.js create mode 100644 src/config/content/teamRegistration/registermodal.js diff --git a/package.json b/package.json index 1089b1f..59ec48b 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "axios": "^1.7.2", "firebase": "^10.12.2", "framer-motion": "^11.2.10", - "graphql": "^16.8.2", + "graphql": "^16.9.0", "hamburger-react": "^2.5.1", "ldrs": "^1.0.2", "prop-types": "^15.8.1", diff --git a/src/components/customcomponents/CustomAlert.jsx b/src/components/customcomponents/CustomAlert.jsx new file mode 100644 index 0000000..b39e3b0 --- /dev/null +++ b/src/components/customcomponents/CustomAlert.jsx @@ -0,0 +1,25 @@ +import PropTypes from 'prop-types' + +import { Button, Container, Mssg, Section } from './customAlert.style' + +const CustomAlert = ({ message, onClose }) => { + if (!message) return null + + return ( + +
+
+ {message} + +
+
+ + ) +} + +CustomAlert.propTypes = { + message: PropTypes.string, + onClose: PropTypes.func.isRequired +} + +export default CustomAlert diff --git a/src/components/customcomponents/customAlert.style.jsx b/src/components/customcomponents/customAlert.style.jsx new file mode 100644 index 0000000..53af74c --- /dev/null +++ b/src/components/customcomponents/customAlert.style.jsx @@ -0,0 +1,51 @@ +import tw from 'twin.macro' + +import styled, { keyframes } from 'styled-components' + +const fadeInAnimation = keyframes` + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +` + +export const Container = styled.main` + ${tw`fixed inset-0 z-50 bg-black-1/[0.4] bg-opacity-45 backdrop-blur-md flex justify-center items-center h-screen w-screen px-[1rem] md:px-[10px] `} + animation: ${fadeInAnimation} 0.3s ease-out border-2 border-black-1; +` + +export const Section = styled.section` + ${tw` flex justify-center items-center bg-brown-2 border-4 border-black-1 relative w-[400px] rounded-[23.06px] font-Poppins h-[200px] `} +` + +export const Button = styled.button` + ${tw`p-1 + mt-[40px] + w-[40%] + ml-[25%] + + rounded-[11.53px] + bg-orange-1 + text-brown-5 + font-semibold + text-base + + border-brown-5 + border-2 + transition + duration-300 + ease-in-out + active:transform + active:translate-x-[3px] + active:translate-y-[3px] + active:shadow-none + shadow-[3px 3px 0px #1d1d1d ]`} +` + +export const Mssg = styled.button` + ${tw`text-[15px] 0.8xsm:text-[20px]`} +` diff --git a/src/components/events/EventCard.jsx b/src/components/events/EventCard.jsx index 31dc7fe..58ea68c 100644 --- a/src/components/events/EventCard.jsx +++ b/src/components/events/EventCard.jsx @@ -16,24 +16,36 @@ import { ButtonRules, SeeMoreText } from './eventCard.styles' -import { seeMoreIcon } from '../../config/index' + +import { useState } from 'react' +import { seeMoreIcon } from '../../config' +import { RegisteredEventModal } from './RegisteredEventModal' +import { createPortal } from 'react-dom' EventCard.propTypes = { + hasRegistered: PropTypes.bool, event: PropTypes.shape({ - img: PropTypes.string, - id: PropTypes.number, - title: PropTypes.string, - subtitle: PropTypes.string, - details: PropTypes.array, - rules: PropTypes.string + poster: PropTypes.string, + id: PropTypes.string, + name: PropTypes.string, + subHeading: PropTypes.string, + description: PropTypes.string, + rules: PropTypes.string, + isTeamEvent: PropTypes.bool }), - handleSelectEvent: PropTypes.func + handleSelectEvent: PropTypes.func, + handleRegisterEvent: PropTypes.func } export default function EventCard({ - event: { img, id, title, subtitle, details, rules }, - handleSelectEvent + combinedArray, + hasRegistered, + event: { poster, id, name, subHeading, description, rules, isTeamEvent }, + handleSelectEvent, + handleRegisterEvent }) { + const [openModal, setOpenModal] = useState(false) + function genDetails(str, length) { str = str.trim() if (str.length > length) { @@ -47,30 +59,67 @@ export default function EventCard({ window.open(rules, '_blank') } + const handleRegisteredEvents = () => { + setOpenModal(true) + } + + const overlay = document.getElementById('overlay') + return ( - -
- - - - {title} - {subtitle !== '' && {subtitle}} - - - -
{genDetails(details[0], 150)}
- - handleSelectEvent(id)}> - See More - - - - - Rulebook - - - -
- + <> + {createPortal( + openModal && ( + setOpenModal(false)} + isTeamEvent={isTeamEvent} + eventId={id} + /> + ), + overlay + )} + +
+ + + + {name} + {subHeading !== '' && {subHeading}} + + + + {(() => { + try { + const parsedDescription = JSON.parse(description) + if (Array.isArray(parsedDescription) && parsedDescription.length > 0) { + const firstDesc = genDetails(parsedDescription[0], 150) + return
{firstDesc}
+ } + } catch (error) { + return ( +
+ {error.toString()}, {typeof description} +
+ ) + } + return null + })()} + + handleSelectEvent(id)}> + See More + + + + + Rulebook + {!hasRegistered ? ( + + ) : ( + + )} + + +
+ + ) } diff --git a/src/components/events/EventModal.jsx b/src/components/events/EventModal.jsx index b5f0c33..65c01fc 100644 --- a/src/components/events/EventModal.jsx +++ b/src/components/events/EventModal.jsx @@ -21,17 +21,18 @@ import PropTypes from 'prop-types' EventModal.propTypes = { closeModal: PropTypes.func, event: PropTypes.shape({ - img: PropTypes.string, - title: PropTypes.string, - subtitle: PropTypes.string, - details: PropTypes.array, + poster: PropTypes.string, + name: PropTypes.string, + subHeading: PropTypes.string, + description: PropTypes.string, rules: PropTypes.string }) } -function EventModal({ closeModal, event: { img, title, subtitle, details, rules } }) { +function EventModal({ closeModal, event: { poster, name, subHeading, description, rules } }) { function redirectToRules() { window.open(rules, '_blank') } + console.log(event) return (
@@ -40,13 +41,13 @@ function EventModal({ closeModal, event: { img, title, subtitle, details, rules - - {title} - {subtitle && {subtitle}} + + {name} + {subHeading && {subHeading}} - {details.map((detail, index) => ( + {JSON.parse(description).map((detail, index) => ( {detail} ))} diff --git a/src/components/events/Events.jsx b/src/components/events/Events.jsx index ee0fa6a..33b9cc1 100644 --- a/src/components/events/Events.jsx +++ b/src/components/events/Events.jsx @@ -1,57 +1,174 @@ import { useState, useRef } from 'react' import { Container, Arrow, Section, EventsTitleMobile } from './events.styles' -import { events, nextArrowIcon, prevArrowIcon } from '../../config/index' +import { nextArrowIcon, prevArrowIcon } from '../../config/index' import EventModal from './EventModal' import EventsWrapper from './EventsWrapper' import { createPortal } from 'react-dom' +import { RegisterModal } from './Register2Modal' + +import { eventss, staticEventsData } from '../../config/content/events/events' +import { toast } from 'react-toastify' +import { useEffect } from 'react' +import { useContext } from 'react' +import { AuthContext } from '../../context/AuthContext' +import { GET_EVENTS_BY_ORGID } from '../../graphQL/queries/getEvents' +import { skipToken, useSuspenseQuery } from '@apollo/client' +import { GET_EVENTS_REGISTERED } from '../../graphQL/queries/eventRegistration' +import { GET_TEAM_REGISTRATIONS_BY_USER } from '../../graphQL/queries/teamRegistration' export default function Events() { const [isModalOpen, setIsModalOpen] = useState(false) + const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false) + const [isFlagshipEventModalOpen, setIsFlagshipEventModalOpen] = useState(false) const [event, setEvent] = useState(null) + const [events, setEvents] = useState([]) + const [registeredEvents, setRegisteredEvents] = useState([]) + const [registeredTeamEvents, setRegisteredTeamEvents] = useState([]) + + const [loading, setLoading] = useState(true) + const [uid, setUid] = useState(null) + const swiperRef = useRef(null) - function handleModalOpen(id) { + const { userInfo } = useContext(AuthContext) + + const orgId = '668bd9deff0327a608b9b6ea' + + const { data } = useSuspenseQuery(GET_EVENTS_BY_ORGID, uid ? { variables: { orgId } } : skipToken) + const { data: registeredData } = useSuspenseQuery( + GET_EVENTS_REGISTERED, + uid ? { variables: { orgId, userId: '668c3707b8cca2f5e9a5d6f8' } } : skipToken + ) + const { data: registeredTeamData } = useSuspenseQuery( + GET_TEAM_REGISTRATIONS_BY_USER, + uid ? { variables: { orgId, userId: '668c3707b8cca2f5e9a5d6f8' } } : skipToken + ) + + useEffect(() => { + if (userInfo.name) { + setUid(userInfo.name) + const details = data + const registeredEventDetails = registeredData + const registeredTeamEventDetails = registeredTeamData + if (details?.getEvents) { + const allEvents = details.getEvents + const allRegisteredEvents = registeredEventDetails.eventRegistration + const allRegisteredTeamEvents = registeredTeamEventDetails.teamRegistrations + getAllEvents(allEvents, allRegisteredEvents, allRegisteredTeamEvents) + } + } + }, [userInfo, data, registeredData, registeredTeamData]) + + async function getAllEvents(allEvents, allRegisteredEvents, allRegisteredTeamEvents) { + try { + const filteredEvents = allEvents.filter((event) => event.status === 'ACTIVE') + if (filteredEvents.length > 0) { + setEvents(filteredEvents) + setRegisteredEvents(allRegisteredEvents) + setRegisteredTeamEvents(allRegisteredTeamEvents) + } else setEvents([]) + } catch (error) { + console.error('Error fetching events:', error) + toast.error('Something went wrong!') + } finally { + setLoading(false) + } + } + console.log(events) + console.log(registeredEvents) + console.log(registeredTeamEvents) + + const combinedAray = registeredEvents.concat(registeredTeamEvents) + console.log('ca', combinedAray) + + function handleRegisterModalOpen(EventId) { + setIsRegisterModalOpen(true) + const event = events.find((event) => event.id === EventId) + if (event) { + setEvent(event) + } + } + + function handleFlagshipCardModalOpen(EventId) { + setIsFlagshipEventModalOpen(true) + const event = eventss.find((event) => event.id === EventId) + if (event) { + setEvent(event) + } + } + + function handleModalOpen(EventId) { setIsModalOpen(true) - const event = events.find((event) => event.id === id) + const event = events.find((event) => event.id === EventId) if (event) { setEvent(event) } } + function handleModalClose() { setIsModalOpen(false) } + function handleFlagshipModalClose() { + setIsFlagshipEventModalOpen(false) + } + + function handleRegisterModalClose() { + setIsRegisterModalOpen(false) + } + function handlePrev() { - if (swiperRef.current && swiperRef.current) { + if (swiperRef.current) { swiperRef.current.slidePrev() } } function handleNext() { - if (swiperRef.current && swiperRef.current) { + if (swiperRef.current) { swiperRef.current.slideNext() } } const overlay = document.getElementById('overlay') + return (
{createPortal( isModalOpen && , overlay )} - Events + {createPortal( + isRegisterModalOpen && ( + + ), + overlay + )} + {createPortal( + isFlagshipEventModalOpen && ( + + ), + overlay + )} + Events(
+ )
) } + +/* Events.propTypes = { + eventsArr: PropTypes.array +} */ diff --git a/src/components/events/EventsWrapper.jsx b/src/components/events/EventsWrapper.jsx index 37ca2a0..a6f6c99 100644 --- a/src/components/events/EventsWrapper.jsx +++ b/src/components/events/EventsWrapper.jsx @@ -8,13 +8,14 @@ import PropTypes from 'prop-types' import { EventWrapper } from './events.styles' import { Navigation, Autoplay } from 'swiper/modules' -EventsWrapper.propTypes = { - events: PropTypes.array.isRequired, - handleSelectEvent: PropTypes.func.isRequired, - swiperRef: PropTypes.object.isRequired -} - -function EventsWrapper({ events, handleSelectEvent, swiperRef }) { +function EventsWrapper({ + combinedArray, + events, + handleSelectEvent, + swiperRef, + handleRegisterEvent, + handlerFlagshipEvent +}) { useEffect(() => { if (swiperRef.current) { const swiper = swiperRef.current @@ -23,6 +24,9 @@ function EventsWrapper({ events, handleSelectEvent, swiperRef }) { } }, [swiperRef]) + // const combinedArray = [...registeredEventsArray, ...registeredTeamEventsarray] + console.log('cs2', combinedArray) + return ( - {events.map((event) => ( - - - - ))} + {events.map((event) => { + const hasRegistered = + combinedArray.find((item) => item.eventID === event.id) !== undefined + console.log('cs3', hasRegistered) + console.log('cs4', event.id) + return ( + + + + ) + })} + - + ) } +EventsWrapper.propTypes = { + events: PropTypes.array.isRequired, + handleSelectEvent: PropTypes.func.isRequired, + handleRegisterEvent: PropTypes.func.isRequired, + handlerFlagshipEvent: PropTypes.func.isRequired, + swiperRef: PropTypes.object.isRequired, + combinedArray: PropTypes.array +} + export default EventsWrapper diff --git a/src/components/events/IndividualEventModal.jsx b/src/components/events/IndividualEventModal.jsx new file mode 100644 index 0000000..211de70 --- /dev/null +++ b/src/components/events/IndividualEventModal.jsx @@ -0,0 +1,94 @@ +import { useState } from 'react'; +import PropTypes from 'prop-types'; +import { useMutation } from '@apollo/client'; +import { Button1, Input, InputContainer1, Text, TextHead, TextSub } from './registerModal.style'; +import { CREATE_EVENT_REGISTRATION } from '../../graphQL/mutations/eventRegistration'; +import CustomAlert from '../customcomponents/CustomAlert'; + +import { + RegisterCompleteCardText, + RegisterCompleteCardTextContainer +} from './teamRegistrationModal'; +import { RegistrationSchema } from '../../config/content/teamRegistration/registerSchema'; + + +export const IndiEventModal = ({ EventId, EventTitle }) => { + const [alcheID, setAlcheID] = useState(''); + const [show, setShow] = useState(true); + const [error, setError] = useState(null); + const [registerEvent, { loading, error: mutationError }] = useMutation(CREATE_EVENT_REGISTRATION); + + const orgId="668bd9deff0327a608b9b6ea"; + + async function handleSubmit() { + const validationResult = RegistrationSchema.safeParse({ + alcheID, + eventID: EventId + }); + + if (!validationResult.success) { + const validationError = validationResult.error.errors[0]?.message; + setError(validationError); + return; + } + + try { + console.log('Submitting Registration: ', { eventID: EventId, userID: alcheID }); + + const response = await registerEvent({ + variables: { eventRegistration: { eventID: EventId, userID: alcheID },orgId:orgId } + }); + + console.log('Mutation Response: ', response); + setTimeout(() => { + window.location.reload() + }, 2000); + + setShow(false); + } catch (error) { + console.error('Error registering:', error); + setError(error.message || 'Error registering. Please try again.'); + } + } + + return ( + <> + {show ? ( +
+ {EventTitle} + (*single member Participation*) + User ID + + { + setAlcheID(e.target.value); + setError(null); + }} + /> + + {error && setError(null)} />} + + + {loading ? 'Registering...' : 'Register'} + + + {mutationError && {}} +
+ ) : ( + + Hurray! Ur Registration Completed + + )} + + ); +}; + + +IndiEventModal.propTypes = { + EventId: PropTypes.string.isRequired, + EventTitle: PropTypes.string.isRequired, + closeRegisterModal: PropTypes.func +} diff --git a/src/components/events/Register2Modal.jsx b/src/components/events/Register2Modal.jsx new file mode 100644 index 0000000..69b371b --- /dev/null +++ b/src/components/events/Register2Modal.jsx @@ -0,0 +1,28 @@ +import PropTypes from 'prop-types' +import { Button2, Container, Section } from './registerModal.style' +import TeamEventModal from './TeamEventModal' +import { IndiEventModal } from './IndividualEventModal' + +export const RegisterModal = ({ event: { id, name, isTeamEvent }, closeModal }) => { + return ( + +
+ Back + {isTeamEvent ? ( + + ) : ( + + )} +
+ + ) +} + +RegisterModal.propTypes = { + event: PropTypes.shape({ + id: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + isTeamEvent: PropTypes.bool + }), + closeModal: PropTypes.func +} diff --git a/src/components/events/RegisteredEventModal.jsx b/src/components/events/RegisteredEventModal.jsx new file mode 100644 index 0000000..0a44f74 --- /dev/null +++ b/src/components/events/RegisteredEventModal.jsx @@ -0,0 +1,89 @@ +import { useEffect, useState } from 'react' +import useGetRegisteredEvents from '../eventsqueries/GetRegisteredEvents' +import useRegisteredTeamEvents from '../eventsqueries/GetRegisteredTeamEvents' +import { + Button, + ModalContainer, + Section, + TextContainer, + TextHead +} from './registeredEventModal.styles' +import { Container } from './registerModal.style' +import PropTypes from 'prop-types' + +export const RegisteredEventModal = ({ closeModal, isTeamEvent, eventId }) => { + const [clickedCardArr, setClickedCardArr] = useState([]) + + const { + registeredEvents: eventsArr, + loading, + error + } = useGetRegisteredEvents('668bd9deff0327a608b9b6ea', '668c3707b8cca2f5e9a5d6f8') + const { + registeredTeamEvents: registeredTeamEventsArr, + loading: loading3, + error: error3 + } = useRegisteredTeamEvents('668bd9deff0327a608b9b6ea', '668c3707b8cca2f5e9a5d6f8') + + useEffect(() => { + const checkEvent = (eventId) => { + const combinedArray = eventsArr.concat(registeredTeamEventsArr) + console.log('carray', combinedArray) + const event = combinedArray.find((event) => event.eventID === eventId) + + if (event) { + setClickedCardArr([event]) + } + } + + if (eventsArr.length > 0 || registeredTeamEventsArr.length > 0) { + checkEvent(eventId) + } + }, [eventId, eventsArr, registeredTeamEventsArr]) + + if (loading3 || loading) return

Loading...

+ if (error3 || error) return

Error: {error3 ? error3.message : error.message}

+ + console.log(clickedCardArr) + + return ( + +
+ + + ( + {isTeamEvent + ? clickedCardArr.map((event) => ( +
+ + TeamName: {event.teamName} + + {event.userIDs.map((userID, index) => ( +
+ + {index === 0 ? 'Team Lead ID:' : `Member ${index}:`} + {userID} + {event.users[index].name} + {event.users[index].college} + +
+ ))} +
+ )) + : clickedCardArr.map((event) => ( + + UserID: {event.userID} + + ))} + ) + +
+ + ) +} + +RegisteredEventModal.propTypes = { + closeModal: PropTypes.func.isRequired, + isTeamEvent: PropTypes.bool.isRequired, + eventId: PropTypes.string.isRequired +} diff --git a/src/components/events/TeamEventModal.jsx b/src/components/events/TeamEventModal.jsx new file mode 100644 index 0000000..96e2453 --- /dev/null +++ b/src/components/events/TeamEventModal.jsx @@ -0,0 +1,179 @@ +import { useState } from 'react' +import PropTypes from 'prop-types' +import { Button1 } from './registerModal.style' +import { useMutation } from '@apollo/client' +import { CREATE_TEAM_REGISTRATIONS } from '../../graphQL/mutations/teamRegistration' +import CustomAlert from '../customcomponents/CustomAlert' +import { + Grid1, + Grid2, + GridContainer, + Input, + Input2, + Text, + TextHead, + TextSub, + AddMemberButton, + RemoveButton, + IconButtonContainer, + RegisterCompleteCardText, + RegisterCompleteCardTextContainer +} from './teamRegistrationModal' +import { TeamRegistrationSchema } from '../../config/content/teamRegistration/registerSchema' +import { toast } from 'react-toastify' +import { MinusButtonUrl, PlusButtonUrl } from '../../config/content/teamRegistration/registermodal' + +export const TeamEventModal = ({ EventId, EventTitle }) => { + const [formData, setFormData] = useState({ + teamname: '', + teamleadid: '', + userIds: [''] + }) + + const [show, setShow] = useState(true) + const [error, setError] = useState(null) + + const [teamRegisterEvent, { loading, error: mutationError }] = + useMutation(CREATE_TEAM_REGISTRATIONS) + + const handleChange = (key, value) => { + setFormData({ + ...formData, + [key]: value + }) + setError(null) + } + + const handleUserIdChange = (index, value) => { + const newUserIds = [...formData.userIds] + newUserIds[index] = value + setFormData({ + ...formData, + userIds: newUserIds + }) + } + + const addUserId = () => { + if (formData.userIds.length > 4) { + return toast.error("you've reached maximum team limit") + } + setFormData({ + ...formData, + userIds: [...formData.userIds, ''] + }) + } + + const removeUserId = () => { + if (formData.userIds.length > 1) { + const newUserIds = [...formData.userIds] + newUserIds.pop() + setFormData({ + ...formData, + userIds: newUserIds + }) + } + } + + async function handleSubmit() { + const validationResult = TeamRegistrationSchema.safeParse(formData) + + if (!validationResult.success) { + const validationError = validationResult.error.errors[0]?.message + setError(validationError) + return + } + + try { + const response = await teamRegisterEvent({ + variables: { + orgId: '668bd9deff0327a608b9b6ea', + teamRegistration: { + eventID: EventId, + teamName: formData.teamname, + userIDs: [formData.teamleadid, ...formData.userIds] + } + } + }) + console.log('mutation response', response) + + toast.success('You have been registered successfully!') + setShow(false) + } catch (err) { + setError('Error registering. Please try again.') + } + } + + return ( + <> + {show ? ( + <> + {EventTitle} + (*Team Participation*) + + +
+ Team Name + handleChange('teamname', e.target.value)} + /> +
+
+ Team Lead ID + handleChange('teamleadid', e.target.value)} + /> +
+ + + + Add + + + Remove + + + + {formData.userIds.map((userId, index) => ( +
+ {`Member ${index + 1} ID`} + handleUserIdChange(index, e.target.value)} + /> +
+ ))} + + + + {error && setError(null)} />} + + + {loading ? 'Registering...' : 'Register'} + + + {mutationError && {mutationError.message}} + + ) : ( + + Hurray! Your Registration Completed + + )} + + ) +} + +TeamEventModal.propTypes = { + EventId: PropTypes.number.isRequired, + EventTitle: PropTypes.string.isRequired, + closeRegisterModal: PropTypes.func +} + +export default TeamEventModal diff --git a/src/components/events/eventCard.styles.jsx b/src/components/events/eventCard.styles.jsx index f526105..fd83e89 100644 --- a/src/components/events/eventCard.styles.jsx +++ b/src/components/events/eventCard.styles.jsx @@ -39,7 +39,7 @@ export const SeemoreIcon = styled.img` ` export const CardFooter = styled.div` - ${tw`items-center px-3 xxsm:px-5 w-full md:w-[95%] flex flex-row gap-5 justify-between md:absolute md:bottom-8 mb-5 md:mb-0`} + ${tw` px-3 xxsm:px-5 w-full md:w-[95%] flex flex-row gap-5 items-center justify-between md:absolute md:bottom-8 mb-5 md:mb-0`} ` export const Button = styled.button` ${tw`h-[50px] w-full diff --git a/src/components/events/eventModal.styles.jsx b/src/components/events/eventModal.styles.jsx index 0aab63c..2d727b5 100644 --- a/src/components/events/eventModal.styles.jsx +++ b/src/components/events/eventModal.styles.jsx @@ -18,11 +18,11 @@ export const Container = styled.main` ` export const Section = styled.section` - ${tw`bg-black-1 text-brown-2 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[95vh]`} + ${tw`bg-black-1 text-brown-2 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins h-[97vh] `} ` export const ContentWrapper = styled.div` - ${tw`px-2 py-8 0.8xsm:px-10`} + ${tw`px-2 py-8 0.8xsm:px-10 flex flex-col justify-between`} ` export const CardHeader = styled.div` @@ -38,7 +38,7 @@ export const CardImage = styled.img` ` export const CardTitle = styled.h1` - ${tw`mt-5 font-semibold text-2.5xl 0.8xsm:text-3.5xl leading-none text-center`} + ${tw`mt-5 font-semibold text-2xl 0.8xsm:text-2.5xl leading-none text-center`} ` export const CardSubtitle = styled.h3` @@ -46,7 +46,7 @@ export const CardSubtitle = styled.h3` ` export const CardBody = styled.div` - ${tw`my-5 h-[180px] 0.5xxsm:h-[250px] xxsm:h-[300px] overflow-y-scroll px-5`} + ${tw`my-2 h-[180px] 0.5xxsm:h-[150px] xxsm:h-[180px] overflow-y-scroll px-5`} ` export const CardList = styled.ul` @@ -58,7 +58,7 @@ export const ListItems = styled.li` ` export const CardFooter = styled.div` - ${tw`flex flex-col gap-5 xxsm:flex-row w-full justify-between mt-2 px-5`} + ${tw`flex flex-col gap-5 xxsm:flex-row w-full justify-between px-5`}; ` export const RegisterButton = styled.button` diff --git a/src/components/events/registerModal.style.jsx b/src/components/events/registerModal.style.jsx new file mode 100644 index 0000000..7380fb2 --- /dev/null +++ b/src/components/events/registerModal.style.jsx @@ -0,0 +1,109 @@ +import tw from 'twin.macro' +import styled, { keyframes } from 'styled-components' + +const fadeInAnimation = keyframes` + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +` + +export const Container = styled.main` + ${tw`fixed inset-0 z-50 bg-black-1/[0.4] bg-opacity-75 backdrop-blur-md flex justify-center items-center h-screen w-full px-[1rem] md:px-[10px] `} + animation: ${fadeInAnimation} 0.3s ease-out border-2 border-black-1 o; +` + +export const Section = styled.section` + ${tw`bg-brown-2 border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[100vh] h-auto overflow-y-auto `} +` +export const Text = styled.div` + ${tw`text-[34px] 0.8xsm:text-[37px] + 0.9xsm:text-[40px] text-center w-full mt-7 font-bold font-Poppins`} +` + +export const TextSub = styled.div` + ${tw`text-[15px] 0.8xsm:text-[18px] + 0.9xsm:text-[20px] text-center w-full text-orange-1 font-light font-Poppins`} +` + +export const TextHead = styled.div` + ${tw`text-lg mt-[5%] font-Poppins ml-[10%] font-semibold mb-3`} +` + +export const InputContainer1 = styled.div` + ${tw`relative w-full`} + &::after { + content: ''; + position: absolute; + top: 4px; + left: 4px; + right: -4px; + bottom: -4px; + border: 1.6px solid black; + border-radius: 8px; + z-index: -1; + } +` + +export const Input = styled.input` + ${tw`w-[80%] ml-[10%] h-[40px] px-2 bg-brown-2 text-brown-4 focus:outline-none font-normal flex items-center `} + border-radius: 8px; + border: 1.6px solid black; + line-height: 1.2; + letter-spacing: 0.1em; + position: relative; + z-index: 1; +` + +export const Button1 = styled.button` + ${tw` px-2 + mt-16 + mb-12 + w-[80%] + ml-[10%] + py-2 + rounded-[11.53px] + bg-orange-1 + text-brown-5 + font-semibold + text-1.5lg + md:text-2xl + border-brown-5 + border-2 + transition + duration-300 + ease-in-out + active:transform + active:translate-x-[3px] + active:translate-y-[3px] + active:shadow-none + shadow-[3px 3px 0px #1d1d1d ]`} +` +export const Button2 = styled.button` + ${tw`p-1 + + mt-6 ml-6 mr-6 + w-[20%] + + + rounded-[11.53px] + bg-orange-1 + text-brown-5 + font-semibold + text-sm + md:text-base + border-brown-5 + border-2 + transition + duration-300 + ease-in-out + active:transform + active:translate-x-[3px] + active:translate-y-[3px] + active:shadow-none + shadow-[3px 3px 0px #1d1d1d ]`} +` diff --git a/src/components/events/registeredEventModal.styles.jsx b/src/components/events/registeredEventModal.styles.jsx new file mode 100644 index 0000000..207c1a2 --- /dev/null +++ b/src/components/events/registeredEventModal.styles.jsx @@ -0,0 +1,26 @@ +import tw from "twin.macro"; +import styled from "styled-components"; + +export const Section = styled.section` + ${tw` bg-[#402E32] border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[100vh] h-auto overflow-y-auto `} +` + +export const ModalContainer = styled.div` + ${tw`p-6 flex flex-col gap-10 justify-center text-[64px] font-bold `} +` + +export const TextContainer = styled.div` + ${tw`text-[26px] mb-4 text-[#FF8911] font-semibold flex gap-2 `} +` + +export const TextHead = styled.div` + ${tw`text-[26px] text-[#FFEEDA] font-normal flex gap-2 `} +` + +export const Button = styled.button` + ${tw`p-1 w-[20%] + + + mt-6 ml-6 mr-6 rounded-[11.53px] bg-orange-1 text-brown-5 font-semibold text-sm + md:text-base shadow-button border-brown-5 border-2 transition duration-300 ease-in-out active:transform active:translate-x-[3px] active:translate-y-[3px] active:shadow-none`} +` \ No newline at end of file diff --git a/src/components/events/teamRegistrationModal.jsx b/src/components/events/teamRegistrationModal.jsx new file mode 100644 index 0000000..f045543 --- /dev/null +++ b/src/components/events/teamRegistrationModal.jsx @@ -0,0 +1,81 @@ +import styled from 'styled-components' +import tw from 'twin.macro' + +export const GridContainer = styled.div` + display: grid; + gap: 10px; +` + +export const Grid1 = styled.div` + ${tw`grid grid-cols-1 gap-4`} +` + +export const Grid2 = styled.div` + ${tw`ml-[1.5%] mr-[1.5%] gap-2 xxsm:ml-[5%] xxsm:mr-[5%] grid grid-cols-1 xxsm:grid-cols-2 h-[150px] overflow-y-auto`} +` + +export const Text = styled.div` + ${tw`text-[34px] 0.8xsm:text-[37px] 0.9xsm:text-[40px] text-center w-full mt-7 font-bold font-Poppins`} +` + +export const RegisterCompleteCardTextContainer = styled.div` + ${tw`m-[100px]`} +` +export const RegisterCompleteCardText = styled.div` + ${tw`text-[24px] 0.8xsm:text-[27px] 0.9xsm:text-[30px] text-center w-full font-bold font-Poppins`} +` + +export const TextSub = styled.div` + ${tw`text-[15px] 0.8xsm:text-[18px] 0.9xsm:text-[20px] text-center w-full text-orange-1 font-light font-Poppins`} +` + +export const TextHead = styled.div` + ${tw`text-lg font-Poppins ml-[10%] font-normal`} +` + +export const InputContainer1 = styled.div` + ${tw`relative w-full`} + &::after { + content: ''; + position: absolute; + top: 4px; + left: 4px; + right: -4px; + bottom: -4px; + border: 1.6px solid black; + border-radius: 8px; + z-index: -1; + } +` + +export const Input = styled.input` + ${tw`w-[80%] ml-[10%] h-[40px] px-2 bg-brown-2 text-brown-4 focus:outline-none font-normal flex items-center`} + border-radius: 8px; + border: 1.6px solid black; + line-height: 1.2; + letter-spacing: 0.1em; + position: relative; + z-index: 1; +` + +export const Input2 = styled.input` + ${tw`w-[80%] ml-[10%] h-[35px] text-[11px] px-2 bg-brown-2 text-brown-4 focus:outline-none font-normal flex items-center`} + border-radius: 8px; + border: 1.6px solid black; + line-height: 1.2; + letter-spacing: 0.1em; + position: relative; + z-index: 1; +` + +export const AddMemberButton = styled.button` + ${tw` text-[10px] mt-4 mb-4 shadow-button transition duration-300 ease-in-out active:transform active:translate-x-[3px] active:translate-y-[3px] active:shadow-none`} +` + +export const RemoveButton = styled.button` + ${tw`ml-2 mt-4 mb-4 shadow-button transition duration-300 ease-in-out active:transform active:translate-x-[3px] active:translate-y-[3px] active:shadow-none`} +` + +export const IconButtonContainer = styled.div` + ${tw`flex justify-center`} +` diff --git a/src/components/eventsqueries/GetRegisteredEvents.jsx b/src/components/eventsqueries/GetRegisteredEvents.jsx new file mode 100644 index 0000000..38c311c --- /dev/null +++ b/src/components/eventsqueries/GetRegisteredEvents.jsx @@ -0,0 +1,43 @@ +import { useEffect, useState } from 'react' +import { useQuery } from '@apollo/client' +import { GET_EVENTS_REGISTERED } from '../../graphQL/queries/eventRegistration' + +const useGetRegisteredEvents = (orgId,uid) => { + + const { data } = useQuery(GET_EVENTS_REGISTERED, { + variables: {orgID:orgId, userId: uid}, + }) + + console.log(orgId,uid) + + const [registeredEvents, setRegisteredEvents] = useState([]) + + useEffect(() => { + const fetchData = async () => { + + try { + console.log("112", data) + const allRegisteredEvents=await data.eventRegistration; + + + console.log("filteredEvents",allRegisteredEvents) + if (allRegisteredEvents > 0) { + setRegisteredEvents(allRegisteredEvents) + console.log(allRegisteredEvents) + } + else setRegisteredEvents([]) + + } catch (error) { + console.error('Error fetching events:', error) + } + } + + fetchData() + }, [data]) + + console.log(registeredEvents) + + return { registeredEvents } +} + +export default useGetRegisteredEvents diff --git a/src/components/eventsqueries/GetRegisteredTeamEvents.jsx b/src/components/eventsqueries/GetRegisteredTeamEvents.jsx new file mode 100644 index 0000000..44b79be --- /dev/null +++ b/src/components/eventsqueries/GetRegisteredTeamEvents.jsx @@ -0,0 +1,21 @@ +import { useEffect, useState } from 'react' +import { useQuery } from '@apollo/client' +import { GET_TEAM_REGISTRATIONS_BY_USER } from '../../graphQL/queries/teamRegistration' + +const useRegisteredTeamEvents = (orgId, uid) => { + const { data } = useQuery(GET_TEAM_REGISTRATIONS_BY_USER, { + variables: { orgId, userID: uid } + }) + + const [registeredTeamEvents, setRegisteredTeamEvents] = useState([]) + + useEffect(() => { + if (data && data.teamRegistrations) { + setRegisteredTeamEvents(data.teamRegistrations) + } + }, [data]) + + return { registeredTeamEvents, loading: false, error: null } +} + +export default useRegisteredTeamEvents diff --git a/src/components/eventsqueries/getEvents.jsx b/src/components/eventsqueries/getEvents.jsx new file mode 100644 index 0000000..20250e2 --- /dev/null +++ b/src/components/eventsqueries/getEvents.jsx @@ -0,0 +1,32 @@ +import { useQuery } from '@apollo/client' +import { GET_EVENTS_BY_ORGID } from '../../graphQL/queries/getEvents' +import { toast } from 'react-toastify' + +export const GetEvents = async () => { + const orgId="668bd9deff0327a608b9b6ea" + + const { data } = useQuery(GET_EVENTS_BY_ORGID, { + variables: { orgId: orgId} + }) + +let events=[] + +try { + const allEvents=await data.getEvents; + + const filteredEvents=allEvents.filter((event) => event.status === "ACTIVE"); + + if (filteredEvents.length > 0) { + events=filteredEvents + } + else events=[] + + } catch (error) { + console.error('Error fetching events:', error) + events=[] + toast.error('Error events') + } + + return events +} + diff --git a/src/config/content/events/events.js b/src/config/content/events/events.js index 9475b8b..1ae90f3 100644 --- a/src/config/content/events/events.js +++ b/src/config/content/events/events.js @@ -1,93 +1,99 @@ -export const events = [ +export const staticEventsData = [ { - id: 1, - img: 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', - title: 'CHEM-E-CAR', - subtitle: 'Ready Set go!! Unleash the Inner Engineer!', - details: [ + orgID: 'aiche', + prizeMoney: '', + id: '1', + poster: + 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', + name: 'CHEM-E-CAR', + subHeading: 'Ready Set go!! Unleash the Inner Engineer!', + description: [ "Calling all future chemical engineers! The AIChE's Chem-E-Car competition is a two-round challenge held at regional conferences, culminating at the annual Student Conference.", "The challenge is to design and build a miniature car propelled by the power of chemistry! The rounds include a poster competition that showcases your car's design and the know-how of the chemicals used. The ultimate test arrives when the car needs to cover a specified distance within a strict time limit. Safety comes first, and for that, teams are tested by a comprehensive safety program ensuring safe handling and disposal of chemicals throughout the competition, from preparation to operation. Chem-E-Car champions are finalized based on poster presentation, vehicle precision, safety consistency, and collaborative spirit." ], - rules: 'https://drive.google.com/file/d/1EPdT6qUFLCotilmC0hG2W-Eh2PLg_ZbS/view?usp=drivesdk' + rules: + 'https://docs.google.com/document/d/1APqVwdXNsxPZMzA3S1zQXkGnXlz-ud6j/edit?usp=sharing&ouid=100456363558753448293&rtpof=true&sd=true', + isTeamEvent: true, + maxTeamSize: 5, + minTeamSize: 2 }, { - id: 2, - img: 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', - title: 'CHEM-E-JEOPARDY', - subtitle: 'Let the battle of wits begin!', - details: [ + orgID: 'aiche', + id: '2', + prizeMoney: '', + poster: + 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', + name: 'CHEM-E-JEOPARDY', + subHeading: 'Let the battle of wits begin!', + description: [ 'Inspired by the iconic game show, Jeopardy! Chem-E-Jeopardy puts teams in a thrilling battle of wits and knowledge. From chemical engineering principles, STEM subjects to history buffs and pop culture fanatics, all disciplines are fair game.', 'Decipher the questions, strategically choose the next question on the gameboard, and race against time to claim victory! The gameboard features six categories with five questions each. Three categories delve into the field of chemical engineering, two explore the STEM fields and one ventures beyond science for a surprise twist.' ], - rules: 'https://drive.google.com/file/d/1UWffy3RflT97ghVjEuJIvD4dzwE9s-LQ/view?usp=sharing' + rules: 'https://drive.google.com/file/d/1UWffy3RflT97ghVjEuJIvD4dzwE9s-LQ/view?usp=sharing', + isTeamEvent: true, + maxTeamSize: 5, + minTeamSize: 2 }, { - id: 3, - img: 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', - title: 'K-12 STEM', - subtitle: 'Unleash the STEM genius within!', - details: [ + orgID: 'aiche', + id: '3', + prizeMoney: '', + poster: + 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', + name: 'K-12 STEM OUTREACH', + subHeading: 'Unleash the STEM genius within!', + description: [ 'The K-12 STEM Outreach Program empowers you to ignite a passion for science, technology, engineering, and math (STEM) in students from kindergarten through 12th grade.', "This interactive competition tests your teamwork, knowledge, creativity, critical thinking, and problem-solving skills – all in a fun-filled environment! It's the perfect platform to spark curiosity in young minds and inspire the next generation of STEM visionaries.", 'The competition features four grade-level categories (K-2, 3-5, 6-8, 9-12) where participants showcase their projects through either pre-recorded video demonstrations or live presentations.' ], - rules: 'https://drive.google.com/file/d/1iznteMqtb6UH8paM5_Ef-s71msodnPuS/view?usp=sharing' + rules: 'https://drive.google.com/file/d/1iznteMqtb6UH8paM5_Ef-s71msodnPuS/view?usp=sharing', + isTeamEvent: true, + maxTeamSize: 5, + minTeamSize: 2 }, { - id: 4, - img: 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', - title: 'Student Poster Competition', - subtitle: 'Unleash your poster making skills', - details: [ + orgID: 'aiche', + id: '4', + prizeMoney: '', + poster: + 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', + name: 'Student Poster Competition', + subHeading: 'Unleash ur poster making skills', + description: [ 'To stimulate student creativity, the annual AIChE Poster Competition empowers chemical engineering students to showcase their research journey – methodology, findings, and groundbreaking conclusions – through informative and visually stunning posters. Impress a panel of expert chemical engineers with your research and communication skills.', 'This event fosters a dynamic exchange of ideas, where students connect with fellow attendees and the wider audience, gaining valuable insights from industry experts who convene to discuss the latest advancements, research breakthroughs, and specific topics.', 'Compete for cash prizes (up to $200!), recognition, and a chance to present at the annual student conference!' ], - rules: 'https://drive.google.com/file/d/1M3lMX_u7Ip0ySnNo-tK5MH_wIaKFoRjo/view?usp=sharing' + rules: 'https://drive.google.com/file/d/1M3lMX_u7Ip0ySnNo-tK5MH_wIaKFoRjo/view?usp=sharing', + isTeamEvent: false, + maxTeamSize: 5, + minTeamSize: 2 }, { - id: 5, - img: 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', - title: 'Student Technical Paper Competition', - subtitle: 'Let’s explore and show the presentation', - details: [ + orgID: 'aiche', + id: '5', + prizeMoney: '', + poster: + 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', + name: 'Student Technical Paper Competition', + subHeading: 'Let’s explore and show the presentation', + description: [ 'Blending your writings on a paper with your extravagant thoughts and showcasing to others is what called, perfection. It is that time to stoke up your papers with aspiring thoughts.', 'Research plays a very pivotal role in engineering field. It is creative and systematic work done to explore knowledge. Keeping this thing in mind, we heartily welcome undergraduate students across different regions to demonstrate their oral presentations on chemical engineering topics.The subject of the paper mostly focuses on recent advances in chemical engineering field in the form of research.', 'Exposure to this event will give you an opportunity to showcase your research and ignite the knowledge of young creative minds in the field of chemical engineering.' ], - rules: 'https://drive.google.com/file/d/19YNXFWtbxc4vxN4wxaDGer64IdWjg-pu/view?usp=sharing' + rules: 'https://drive.google.com/file/d/19YNXFWtbxc4vxN4wxaDGer64IdWjg-pu/view?usp=sharing', + isTeamEvent: false + } +] + +export const eventss = [ + { + EventId: 6, + EventTitle: 'Flagship Event', + isTeamEvent: true } - // { - // id: 6, - // img: 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', - // title: 'Flagship Event', - // subtitle: '', - // details: [ - // 'It is basically a kind of MUN or student panel discussion where undergraduate students, professors and intellectuals from various regions come together to discuss and exchange thoughts about a specific topic.It will aid to broaden the minds in rational and logical way, promote the collaboration between education and industrial field.' - // ] - // }, - // { - // id: 7, - // img: 'dfdf', - // title: 'Workshop', - // subtitle: '', - // details: [ - // 'gffgfgresent dgf.', - // 'Our egfgf ur tremendous potential.' - // ], - // rules: 'https://drive.google.com/file/d/1M3lMX_u7Ip0ySnNo-tK5MH_wIaKFoRjo/view?usp=sharing' - // }, - // { - // id: 8, - // img: 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', - // title: 'Night of Networking', - // subtitle: 'Establishing connections: Night of networking', - // details: [ - // 'This is the opportunity to get to know your fellow AICHE members from different universities. Night of networking helps the participants to meet new people and get a taste of different ideas, culture and knowledge from industry experts.', - // 'This will help you to establish a professional relationship that would be fruitful for your upcoming bright career and aid in unlocking new opportunities.', - // 'Participants will get to know each other by indulging themselves in invigorating activities and turning this fun-filled night into a memorable one.' - // ] - // } ] export const seeMoreIcon = diff --git a/src/config/content/teamRegistration/registerSchema.js b/src/config/content/teamRegistration/registerSchema.js new file mode 100644 index 0000000..b46ad9f --- /dev/null +++ b/src/config/content/teamRegistration/registerSchema.js @@ -0,0 +1,12 @@ +import { z } from 'zod' + +export const RegistrationSchema = z.object({ + alcheID: z.string().min(1, 'Alche ID is required'), + eventID: z.string().min(1, 'Event ID is required') +}) + +export const TeamRegistrationSchema = z.object({ + teamname: z.string().min(1, 'Team Name is required'), + teamleadid: z.string().min(1, 'Team Lead ID is required'), + userIds: z.array(z.string().min(1, 'Member ID is required')) +}) diff --git a/src/config/content/teamRegistration/registermodal.js b/src/config/content/teamRegistration/registermodal.js new file mode 100644 index 0000000..e31205f --- /dev/null +++ b/src/config/content/teamRegistration/registermodal.js @@ -0,0 +1,5 @@ +export const PlusButtonUrl = + 'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1719477294/plus_i7e8da.svg' + +export const MinusButtonUrl = + 'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1719477023/minus_ca3opo.svg' diff --git a/src/config/index.js b/src/config/index.js index 83635f6..4e4d803 100644 --- a/src/config/index.js +++ b/src/config/index.js @@ -19,8 +19,14 @@ import { links, navLinks, DescriptionContent, heroContent } from './content/navD export { links, navLinks, DescriptionContent, heroContent } // Events data -import { events, seeMoreIcon, XIcon, nextArrowIcon, prevArrowIcon } from './content/events/events' -export { events, seeMoreIcon, XIcon, nextArrowIcon, prevArrowIcon } +import { + seeMoreIcon, + XIcon, + nextArrowIcon, + prevArrowIcon, + staticEventsData +} from './content/events/events' +export { seeMoreIcon, XIcon, nextArrowIcon, prevArrowIcon, staticEventsData } // AboutUs data import { data, srcData, data2, aicheData, aboutImage } from './content/about/about' diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx index b06bac4..3bde87e 100644 --- a/src/context/AuthContext.jsx +++ b/src/context/AuthContext.jsx @@ -68,4 +68,4 @@ export const AuthProvider = ({ children }) => { AuthProvider.propTypes = { children: PropTypes.node.isRequired -} +} \ No newline at end of file diff --git a/src/graphQL/mutations/eventRegistration.js b/src/graphQL/mutations/eventRegistration.js index 3b03a8c..7e62a98 100644 --- a/src/graphQL/mutations/eventRegistration.js +++ b/src/graphQL/mutations/eventRegistration.js @@ -3,10 +3,10 @@ import { gql } from '@apollo/client' // when user registers for an event export const CREATE_EVENT_REGISTRATION = gql` - mutation CreateEventRegistration($eventRegistration: EventRegistrationCreateInputType!) { - createEventRegistration(eventRegistration: $eventRegistration) { - eventID - userID - } +mutation Mutation($eventRegistration: EventRegistrationCreateInputType!, $orgId: ID) { + createEventRegistration(eventRegistration: $eventRegistration, orgID: $orgId) { + eventID + userID } +} ` diff --git a/src/graphQL/mutations/teamRegistration.js b/src/graphQL/mutations/teamRegistration.js index 9cf585f..941b708 100644 --- a/src/graphQL/mutations/teamRegistration.js +++ b/src/graphQL/mutations/teamRegistration.js @@ -1,11 +1,14 @@ import { gql } from '@apollo/client' -export const GET_TEAM_REGISTRATIONS_BY_USER = gql` - query GetTeamRegistrationsByUser($userID: ID!) { - teamRegistrationsByUser(userID: $userID) { - eventID - teamName +export const CREATE_TEAM_REGISTRATIONS = gql` + mutation Mutation($orgId: ID, $teamRegistration: TeamRegistrationCreateInputType!) { + createTeamRegistration(orgID: $orgId, teamRegistration: $teamRegistration) { userIDs + teamName + users { + name + college + } } } ` diff --git a/src/graphQL/queries/eventRegistration.js b/src/graphQL/queries/eventRegistration.js index 53926ca..216f7ed 100644 --- a/src/graphQL/queries/eventRegistration.js +++ b/src/graphQL/queries/eventRegistration.js @@ -3,8 +3,8 @@ import { gql } from '@apollo/client' // get list of eventIDS registered by given user export const GET_EVENTS_REGISTERED = gql` - query GetEventRegistrations($userID: ID, $orgID: ID) { - eventRegistration(userID: $userID, orgID: $orgID) { + query EventRegistration($userId: ID, $orgId: ID) { + eventRegistration(userID: $userId, orgID: $orgId) { eventID } } diff --git a/src/graphQL/queries/getEvents.js b/src/graphQL/queries/getEvents.js index 8c4e474..9208083 100644 --- a/src/graphQL/queries/getEvents.js +++ b/src/graphQL/queries/getEvents.js @@ -1,18 +1,18 @@ -import gql from 'graphql-tag' +import { gql } from "@apollo/client" export const GET_EVENTS_BY_ORGID = gql` - query GetEvents($orgID: String!, $pagination: PaginationInputType) { - getEvents(orgID: $orgID, pagination: $pagination) { - id - name - subHeading - prizeMoney - description - poster - rules - isTeamEvent - maxTeamSize - minTeamSize - } +query Query($orgId: ID) { + getEvents(orgID: $orgId) { + description + isTeamEvent + name + poster + prizeMoney + rules + status + id + subHeading } +} + ` diff --git a/src/graphQL/queries/teamRegistration.js b/src/graphQL/queries/teamRegistration.js index 254b594..1c00c27 100644 --- a/src/graphQL/queries/teamRegistration.js +++ b/src/graphQL/queries/teamRegistration.js @@ -1,11 +1,14 @@ import { gql } from '@apollo/client' export const GET_TEAM_REGISTRATIONS_BY_USER = gql` - query GetTeamRegistrationsByUser($userID: ID!) { - teamRegistrationsByUser(userID: $userID) { - teamName + query Query($orgId: ID, $userId: ID) { + teamRegistrations(orgID: $orgId, userID: $userId) { eventID - userIDs + teamName + users { + name + college + } } } ` diff --git a/src/styles/index.css b/src/styles/index.css index e67156b..2549957 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -10,7 +10,9 @@ box-sizing: border-box; -webkit-font-smoothing: antialiased; } - +body{ + overflow-x: hidden; +} html, body, div, From 9405c38f77e6d8d55d2d6546af9455c9a36dd2f1 Mon Sep 17 00:00:00 2001 From: ayussh-2 Date: Thu, 11 Jul 2024 03:08:45 +0530 Subject: [PATCH 2/7] fix: evenrs fix --- src/components/events/EventCard.jsx | 13 ++- src/components/events/EventModal.jsx | 2 +- src/components/events/Events.jsx | 85 +++++++++++-------- src/components/events/EventsWrapper.jsx | 21 +++-- .../events/IndividualEventModal.jsx | 67 +++++++-------- src/components/events/Register2Modal.jsx | 9 +- .../events/RegisteredEventModal.jsx | 84 +++++------------- src/components/events/TeamEventModal.jsx | 16 ++-- .../events/registeredEventModal.styles.jsx | 23 +++-- 9 files changed, 158 insertions(+), 162 deletions(-) diff --git a/src/components/events/EventCard.jsx b/src/components/events/EventCard.jsx index 58ea68c..ba51aeb 100644 --- a/src/components/events/EventCard.jsx +++ b/src/components/events/EventCard.jsx @@ -23,7 +23,6 @@ import { RegisteredEventModal } from './RegisteredEventModal' import { createPortal } from 'react-dom' EventCard.propTypes = { - hasRegistered: PropTypes.bool, event: PropTypes.shape({ poster: PropTypes.string, id: PropTypes.string, @@ -34,18 +33,17 @@ EventCard.propTypes = { isTeamEvent: PropTypes.bool }), handleSelectEvent: PropTypes.func, - handleRegisterEvent: PropTypes.func + handleRegisterEvent: PropTypes.func, + registeredEvent: PropTypes.any } export default function EventCard({ - combinedArray, - hasRegistered, event: { poster, id, name, subHeading, description, rules, isTeamEvent }, handleSelectEvent, - handleRegisterEvent + handleRegisterEvent, + registeredEvent }) { const [openModal, setOpenModal] = useState(false) - function genDetails(str, length) { str = str.trim() if (str.length > length) { @@ -73,6 +71,7 @@ export default function EventCard({ closeModal={() => setOpenModal(false)} isTeamEvent={isTeamEvent} eventId={id} + registerdEvent={registeredEvent} /> ), overlay @@ -111,7 +110,7 @@ export default function EventCard({ Rulebook - {!hasRegistered ? ( + {!registeredEvent ? ( ) : ( diff --git a/src/components/events/EventModal.jsx b/src/components/events/EventModal.jsx index 65c01fc..74e11ac 100644 --- a/src/components/events/EventModal.jsx +++ b/src/components/events/EventModal.jsx @@ -32,7 +32,7 @@ function EventModal({ closeModal, event: { poster, name, subHeading, description function redirectToRules() { window.open(rules, '_blank') } - console.log(event) + return (
diff --git a/src/components/events/Events.jsx b/src/components/events/Events.jsx index 33b9cc1..daa5fc3 100644 --- a/src/components/events/Events.jsx +++ b/src/components/events/Events.jsx @@ -15,6 +15,7 @@ import { GET_EVENTS_BY_ORGID } from '../../graphQL/queries/getEvents' import { skipToken, useSuspenseQuery } from '@apollo/client' import { GET_EVENTS_REGISTERED } from '../../graphQL/queries/eventRegistration' import { GET_TEAM_REGISTRATIONS_BY_USER } from '../../graphQL/queries/teamRegistration' +import { GET_USER_BY_ID } from '../../graphQL/queries/userQueries' export default function Events() { const [isModalOpen, setIsModalOpen] = useState(false) @@ -22,8 +23,10 @@ export default function Events() { const [isFlagshipEventModalOpen, setIsFlagshipEventModalOpen] = useState(false) const [event, setEvent] = useState(null) const [events, setEvents] = useState([]) - const [registeredEvents, setRegisteredEvents] = useState([]) - const [registeredTeamEvents, setRegisteredTeamEvents] = useState([]) + const [mongoId, setMongoId] = useState(null) + const [soloRegistration, setSoloRegistration] = useState([]) + const [teamRegistration, setTeamRegistration] = useState([]) + const [combinedRegistrations, setCombinedRegistrations] = useState([]) const [loading, setLoading] = useState(true) const [uid, setUid] = useState(null) @@ -34,38 +37,60 @@ export default function Events() { const orgId = '668bd9deff0327a608b9b6ea' - const { data } = useSuspenseQuery(GET_EVENTS_BY_ORGID, uid ? { variables: { orgId } } : skipToken) - const { data: registeredData } = useSuspenseQuery( + const { data: allEventsMade } = useSuspenseQuery( + GET_EVENTS_BY_ORGID, + uid ? { variables: { orgId } } : skipToken + ) + const { data: soloRegistrations } = useSuspenseQuery( GET_EVENTS_REGISTERED, - uid ? { variables: { orgId, userId: '668c3707b8cca2f5e9a5d6f8' } } : skipToken + mongoId ? { variables: { orgId, userId: mongoId } } : skipToken ) - const { data: registeredTeamData } = useSuspenseQuery( + const { data: teamRegistrations } = useSuspenseQuery( GET_TEAM_REGISTRATIONS_BY_USER, - uid ? { variables: { orgId, userId: '668c3707b8cca2f5e9a5d6f8' } } : skipToken + mongoId ? { variables: { orgId, userId: mongoId } } : skipToken + ) + + const { data: userDataInDb } = useSuspenseQuery( + GET_USER_BY_ID, + uid ? { variables: { uid: uid, orgId } } : skipToken ) useEffect(() => { - if (userInfo.name) { - setUid(userInfo.name) - const details = data - const registeredEventDetails = registeredData - const registeredTeamEventDetails = registeredTeamData - if (details?.getEvents) { - const allEvents = details.getEvents - const allRegisteredEvents = registeredEventDetails.eventRegistration - const allRegisteredTeamEvents = registeredTeamEventDetails.teamRegistrations - getAllEvents(allEvents, allRegisteredEvents, allRegisteredTeamEvents) + if (userInfo.uid) { + setUid(userInfo.uid) + if (allEventsMade) { + getAllEvents(allEventsMade.getEvents) + } + + if (userDataInDb) { + setMongoId(userDataInDb.getUser.id) + } + if (soloRegistrations) { + setSoloRegistration(soloRegistrations.eventRegistration) + } + + if (teamRegistrations) { + setTeamRegistration(teamRegistrations.teamRegistrations) } - } - }, [userInfo, data, registeredData, registeredTeamData]) - async function getAllEvents(allEvents, allRegisteredEvents, allRegisteredTeamEvents) { + const combinedRegistrations = [...(soloRegistration || []), ...(teamRegistration || [])] + setCombinedRegistrations(combinedRegistrations) + } + }, [ + userInfo, + allEventsMade, + soloRegistrations, + teamRegistrations, + userDataInDb, + soloRegistration, + teamRegistration + ]) + + async function getAllEvents(allEvents) { try { const filteredEvents = allEvents.filter((event) => event.status === 'ACTIVE') if (filteredEvents.length > 0) { setEvents(filteredEvents) - setRegisteredEvents(allRegisteredEvents) - setRegisteredTeamEvents(allRegisteredTeamEvents) } else setEvents([]) } catch (error) { console.error('Error fetching events:', error) @@ -74,12 +99,6 @@ export default function Events() { setLoading(false) } } - console.log(events) - console.log(registeredEvents) - console.log(registeredTeamEvents) - - const combinedAray = registeredEvents.concat(registeredTeamEvents) - console.log('ca', combinedAray) function handleRegisterModalOpen(EventId) { setIsRegisterModalOpen(true) @@ -139,7 +158,7 @@ export default function Events() { )} {createPortal( isRegisterModalOpen && ( - + ), overlay )} @@ -154,8 +173,8 @@ export default function Events() {
) } - -/* Events.propTypes = { - eventsArr: PropTypes.array -} */ diff --git a/src/components/events/EventsWrapper.jsx b/src/components/events/EventsWrapper.jsx index a6f6c99..5ad6b14 100644 --- a/src/components/events/EventsWrapper.jsx +++ b/src/components/events/EventsWrapper.jsx @@ -24,8 +24,17 @@ function EventsWrapper({ } }, [swiperRef]) - // const combinedArray = [...registeredEventsArray, ...registeredTeamEventsarray] - console.log('cs2', combinedArray) + function giveRegisteredEvent(currEvent) { + let registeredEvent = null + + combinedArray.forEach((event) => { + if (currEvent.id === event.eventID) { + registeredEvent = event + } + }) + + return registeredEvent + } return ( @@ -46,15 +55,11 @@ function EventsWrapper({ }} > {events.map((event) => { - const hasRegistered = - combinedArray.find((item) => item.eventID === event.id) !== undefined - console.log('cs3', hasRegistered) - console.log('cs4', event.id) + const registeredEvent = giveRegisteredEvent(event) return ( { + const [alcheID, setAlcheID] = useState(mongoId) + const [show, setShow] = useState(true) + const [error, setError] = useState(null) + const [registerEvent, { loading, error: mutationError }] = useMutation(CREATE_EVENT_REGISTRATION) -export const IndiEventModal = ({ EventId, EventTitle }) => { - const [alcheID, setAlcheID] = useState(''); - const [show, setShow] = useState(true); - const [error, setError] = useState(null); - const [registerEvent, { loading, error: mutationError }] = useMutation(CREATE_EVENT_REGISTRATION); - - const orgId="668bd9deff0327a608b9b6ea"; + const orgId = '668bd9deff0327a608b9b6ea' async function handleSubmit() { const validationResult = RegistrationSchema.safeParse({ alcheID, eventID: EventId - }); + }) if (!validationResult.success) { - const validationError = validationResult.error.errors[0]?.message; - setError(validationError); - return; + const validationError = validationResult.error.errors[0]?.message + setError(validationError) + return } try { - console.log('Submitting Registration: ', { eventID: EventId, userID: alcheID }); + console.log('Submitting Registration: ', { eventID: EventId, userID: alcheID }) const response = await registerEvent({ - variables: { eventRegistration: { eventID: EventId, userID: alcheID },orgId:orgId } - }); + variables: { eventRegistration: { eventID: EventId, userID: alcheID }, orgId: orgId } + }) - console.log('Mutation Response: ', response); + console.log('Mutation Response: ', response) setTimeout(() => { window.location.reload() - }, 2000); - - setShow(false); + }, 2000) + + setShow(false) } catch (error) { - console.error('Error registering:', error); - setError(error.message || 'Error registering. Please try again.'); + console.error('Error registering:', error) + setError(error.message || 'Error registering. Please try again.') } } @@ -64,8 +63,8 @@ export const IndiEventModal = ({ EventId, EventTitle }) => { placeholder="Enter your alche id" value={alcheID} onChange={(e) => { - setAlcheID(e.target.value); - setError(null); + setAlcheID(e.target.value) + setError(null) }} /> @@ -83,12 +82,12 @@ export const IndiEventModal = ({ EventId, EventTitle }) => { )} - ); -}; - + ) +} IndiEventModal.propTypes = { EventId: PropTypes.string.isRequired, EventTitle: PropTypes.string.isRequired, - closeRegisterModal: PropTypes.func + closeRegisterModal: PropTypes.func, + mongoId: PropTypes.string } diff --git a/src/components/events/Register2Modal.jsx b/src/components/events/Register2Modal.jsx index 69b371b..acb86f8 100644 --- a/src/components/events/Register2Modal.jsx +++ b/src/components/events/Register2Modal.jsx @@ -3,15 +3,15 @@ import { Button2, Container, Section } from './registerModal.style' import TeamEventModal from './TeamEventModal' import { IndiEventModal } from './IndividualEventModal' -export const RegisterModal = ({ event: { id, name, isTeamEvent }, closeModal }) => { +export const RegisterModal = ({ event: { id, name, isTeamEvent }, closeModal, mongoId }) => { return (
Back {isTeamEvent ? ( - + ) : ( - + )}
@@ -24,5 +24,6 @@ RegisterModal.propTypes = { name: PropTypes.string.isRequired, isTeamEvent: PropTypes.bool }), - closeModal: PropTypes.func + closeModal: PropTypes.func, + mongoId: PropTypes.string } diff --git a/src/components/events/RegisteredEventModal.jsx b/src/components/events/RegisteredEventModal.jsx index 0a44f74..81881e6 100644 --- a/src/components/events/RegisteredEventModal.jsx +++ b/src/components/events/RegisteredEventModal.jsx @@ -1,81 +1,42 @@ -import { useEffect, useState } from 'react' -import useGetRegisteredEvents from '../eventsqueries/GetRegisteredEvents' -import useRegisteredTeamEvents from '../eventsqueries/GetRegisteredTeamEvents' import { Button, ModalContainer, Section, TextContainer, - TextHead + TextContent, + TextHead, + TextHead1, + TextContainer2 } from './registeredEventModal.styles' import { Container } from './registerModal.style' import PropTypes from 'prop-types' -export const RegisteredEventModal = ({ closeModal, isTeamEvent, eventId }) => { - const [clickedCardArr, setClickedCardArr] = useState([]) - - const { - registeredEvents: eventsArr, - loading, - error - } = useGetRegisteredEvents('668bd9deff0327a608b9b6ea', '668c3707b8cca2f5e9a5d6f8') - const { - registeredTeamEvents: registeredTeamEventsArr, - loading: loading3, - error: error3 - } = useRegisteredTeamEvents('668bd9deff0327a608b9b6ea', '668c3707b8cca2f5e9a5d6f8') - - useEffect(() => { - const checkEvent = (eventId) => { - const combinedArray = eventsArr.concat(registeredTeamEventsArr) - console.log('carray', combinedArray) - const event = combinedArray.find((event) => event.eventID === eventId) - - if (event) { - setClickedCardArr([event]) - } - } - - if (eventsArr.length > 0 || registeredTeamEventsArr.length > 0) { - checkEvent(eventId) - } - }, [eventId, eventsArr, registeredTeamEventsArr]) - - if (loading3 || loading) return

Loading...

- if (error3 || error) return

Error: {error3 ? error3.message : error.message}

- - console.log(clickedCardArr) - +export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent }) => { return (
- ( - {isTeamEvent - ? clickedCardArr.map((event) => ( -
+ {isTeamEvent ? ( +
+ + TeamName:  + {registerdEvent.teamName} + + {registerdEvent.users.map((user, index) => ( +
- TeamName: {event.teamName} + {index === 0 ? 'Team Lead:' : `Member ${index + 1}:`} + {user.name + ' - ' + user.college} - {event.userIDs.map((userID, index) => ( -
- - {index === 0 ? 'Team Lead ID:' : `Member ${index}:`} - {userID} - {event.users[index].name} - {event.users[index].college} - -
- ))}
- )) - : clickedCardArr.map((event) => ( - - UserID: {event.userID} - ))} - ) +
+ ) : ( + + Congratulations you have registered! + + )}
@@ -85,5 +46,6 @@ export const RegisteredEventModal = ({ closeModal, isTeamEvent, eventId }) => { RegisteredEventModal.propTypes = { closeModal: PropTypes.func.isRequired, isTeamEvent: PropTypes.bool.isRequired, - eventId: PropTypes.string.isRequired + eventId: PropTypes.string.isRequired, + registerdEvent: PropTypes.any } diff --git a/src/components/events/TeamEventModal.jsx b/src/components/events/TeamEventModal.jsx index 96e2453..5b52e49 100644 --- a/src/components/events/TeamEventModal.jsx +++ b/src/components/events/TeamEventModal.jsx @@ -84,25 +84,31 @@ export const TeamEventModal = ({ EventId, EventTitle }) => { } try { - const response = await teamRegisterEvent({ + const uIds = [splitId(formData.teamleadid), ...formData.userIds.map(splitId)] + await teamRegisterEvent({ variables: { orgId: '668bd9deff0327a608b9b6ea', teamRegistration: { eventID: EventId, teamName: formData.teamname, - userIDs: [formData.teamleadid, ...formData.userIds] + userIDs: uIds } } }) - console.log('mutation response', response) - - toast.success('You have been registered successfully!') setShow(false) + setTimeout(() => { + window.location.reload() + }, 2000) } catch (err) { + console.error(err) setError('Error registering. Please try again.') } } + function splitId(id) { + return id.split('-')[1] + } + return ( <> {show ? ( diff --git a/src/components/events/registeredEventModal.styles.jsx b/src/components/events/registeredEventModal.styles.jsx index 207c1a2..e50178c 100644 --- a/src/components/events/registeredEventModal.styles.jsx +++ b/src/components/events/registeredEventModal.styles.jsx @@ -1,20 +1,29 @@ -import tw from "twin.macro"; -import styled from "styled-components"; +import tw from 'twin.macro' +import styled from 'styled-components' export const Section = styled.section` ${tw` bg-[#402E32] border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[100vh] h-auto overflow-y-auto `} ` export const ModalContainer = styled.div` - ${tw`p-6 flex flex-col gap-10 justify-center text-[64px] font-bold `} + ${tw`p-6 flex flex-col gap-10 justify-center text-[64px] font-bold `} ` export const TextContainer = styled.div` - ${tw`text-[26px] mb-4 text-[#FF8911] font-semibold flex gap-2 `} + ${tw`text-[20px] mb-4 text-[#FF8911] font-semibold flex gap-2 capitalize`} +` +export const TextContainer2 = styled(TextContainer)` + ${tw`text-[26px] underline`} ` - export const TextHead = styled.div` - ${tw`text-[26px] text-[#FFEEDA] font-normal flex gap-2 `} + ${tw`text-[20px] text-[#FFEEDA] font-normal flex gap-2 `} +` +export const TextHead1 = styled(TextHead)` + ${tw`text-[26px] underline`} +` + +export const TextContent = styled.h1` + ${tw`text-[20px] text-[#FFEEDA] font-semibold w-full text-center`} ` export const Button = styled.button` @@ -23,4 +32,4 @@ export const Button = styled.button` mt-6 ml-6 mr-6 rounded-[11.53px] bg-orange-1 text-brown-5 font-semibold text-sm md:text-base shadow-button border-brown-5 border-2 transition duration-300 ease-in-out active:transform active:translate-x-[3px] active:translate-y-[3px] active:shadow-none`} -` \ No newline at end of file +` From a0519e0e0e202679ddc987165eb1033bf4a5c9fe Mon Sep 17 00:00:00 2001 From: ayussh-2 Date: Thu, 11 Jul 2024 03:34:31 +0530 Subject: [PATCH 3/7] fix: prettier:fix --- .../eventsqueries/GetRegisteredEvents.jsx | 21 ++++++--------- src/components/eventsqueries/getEvents.jsx | 25 ++++++++--------- src/context/AuthContext.jsx | 2 +- src/graphQL/mutations/eventRegistration.js | 10 +++---- src/graphQL/queries/getEvents.js | 27 +++++++++---------- src/styles/index.css | 2 +- 6 files changed, 39 insertions(+), 48 deletions(-) diff --git a/src/components/eventsqueries/GetRegisteredEvents.jsx b/src/components/eventsqueries/GetRegisteredEvents.jsx index 38c311c..44663ba 100644 --- a/src/components/eventsqueries/GetRegisteredEvents.jsx +++ b/src/components/eventsqueries/GetRegisteredEvents.jsx @@ -2,31 +2,26 @@ import { useEffect, useState } from 'react' import { useQuery } from '@apollo/client' import { GET_EVENTS_REGISTERED } from '../../graphQL/queries/eventRegistration' -const useGetRegisteredEvents = (orgId,uid) => { - - const { data } = useQuery(GET_EVENTS_REGISTERED, { - variables: {orgID:orgId, userId: uid}, +const useGetRegisteredEvents = (orgId, uid) => { + const { data } = useQuery(GET_EVENTS_REGISTERED, { + variables: { orgID: orgId, userId: uid } }) - console.log(orgId,uid) + console.log(orgId, uid) const [registeredEvents, setRegisteredEvents] = useState([]) useEffect(() => { const fetchData = async () => { - try { - console.log("112", data) - const allRegisteredEvents=await data.eventRegistration; - + console.log('112', data) + const allRegisteredEvents = await data.eventRegistration - console.log("filteredEvents",allRegisteredEvents) + console.log('filteredEvents', allRegisteredEvents) if (allRegisteredEvents > 0) { setRegisteredEvents(allRegisteredEvents) console.log(allRegisteredEvents) - } - else setRegisteredEvents([]) - + } else setRegisteredEvents([]) } catch (error) { console.error('Error fetching events:', error) } diff --git a/src/components/eventsqueries/getEvents.jsx b/src/components/eventsqueries/getEvents.jsx index 20250e2..7ce828c 100644 --- a/src/components/eventsqueries/getEvents.jsx +++ b/src/components/eventsqueries/getEvents.jsx @@ -3,30 +3,27 @@ import { GET_EVENTS_BY_ORGID } from '../../graphQL/queries/getEvents' import { toast } from 'react-toastify' export const GetEvents = async () => { - const orgId="668bd9deff0327a608b9b6ea" - + const orgId = '668bd9deff0327a608b9b6ea' + const { data } = useQuery(GET_EVENTS_BY_ORGID, { - variables: { orgId: orgId} + variables: { orgId: orgId } }) -let events=[] + let events = [] -try { - const allEvents=await data.getEvents; + try { + const allEvents = await data.getEvents - const filteredEvents=allEvents.filter((event) => event.status === "ACTIVE"); + const filteredEvents = allEvents.filter((event) => event.status === 'ACTIVE') if (filteredEvents.length > 0) { - events=filteredEvents - } - else events=[] - + events = filteredEvents + } else events = [] } catch (error) { console.error('Error fetching events:', error) - events=[] + events = [] toast.error('Error events') } - return events + return events } - diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx index 3bde87e..b06bac4 100644 --- a/src/context/AuthContext.jsx +++ b/src/context/AuthContext.jsx @@ -68,4 +68,4 @@ export const AuthProvider = ({ children }) => { AuthProvider.propTypes = { children: PropTypes.node.isRequired -} \ No newline at end of file +} diff --git a/src/graphQL/mutations/eventRegistration.js b/src/graphQL/mutations/eventRegistration.js index 7e62a98..d3fb4e6 100644 --- a/src/graphQL/mutations/eventRegistration.js +++ b/src/graphQL/mutations/eventRegistration.js @@ -3,10 +3,10 @@ import { gql } from '@apollo/client' // when user registers for an event export const CREATE_EVENT_REGISTRATION = gql` -mutation Mutation($eventRegistration: EventRegistrationCreateInputType!, $orgId: ID) { - createEventRegistration(eventRegistration: $eventRegistration, orgID: $orgId) { - eventID - userID + mutation Mutation($eventRegistration: EventRegistrationCreateInputType!, $orgId: ID) { + createEventRegistration(eventRegistration: $eventRegistration, orgID: $orgId) { + eventID + userID + } } -} ` diff --git a/src/graphQL/queries/getEvents.js b/src/graphQL/queries/getEvents.js index 9208083..61ba7dd 100644 --- a/src/graphQL/queries/getEvents.js +++ b/src/graphQL/queries/getEvents.js @@ -1,18 +1,17 @@ -import { gql } from "@apollo/client" +import { gql } from '@apollo/client' export const GET_EVENTS_BY_ORGID = gql` -query Query($orgId: ID) { - getEvents(orgID: $orgId) { - description - isTeamEvent - name - poster - prizeMoney - rules - status - id - subHeading + query Query($orgId: ID) { + getEvents(orgID: $orgId) { + description + isTeamEvent + name + poster + prizeMoney + rules + status + id + subHeading + } } -} - ` diff --git a/src/styles/index.css b/src/styles/index.css index 2549957..faef79c 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -10,7 +10,7 @@ box-sizing: border-box; -webkit-font-smoothing: antialiased; } -body{ +body { overflow-x: hidden; } html, From aab01a2e438d4e787d6b6a3f242f79f57b05c700 Mon Sep 17 00:00:00 2001 From: ayussh-2 Date: Thu, 11 Jul 2024 04:33:51 +0530 Subject: [PATCH 4/7] add userid check and updated events --- .../events/IndividualEventModal.jsx | 24 ++++++++++++------- src/config/content/events/events.js | 19 +++++++-------- .../teamRegistration/registerSchema.js | 4 ++-- 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/components/events/IndividualEventModal.jsx b/src/components/events/IndividualEventModal.jsx index 98863c1..f2bf3da 100644 --- a/src/components/events/IndividualEventModal.jsx +++ b/src/components/events/IndividualEventModal.jsx @@ -12,7 +12,7 @@ import { import { RegistrationSchema } from '../../config/content/teamRegistration/registerSchema' export const IndiEventModal = ({ EventId, EventTitle, mongoId }) => { - const [alcheID, setAlcheID] = useState(mongoId) + const [aicheID, setAicheID] = useState('') const [show, setShow] = useState(true) const [error, setError] = useState(null) const [registerEvent, { loading, error: mutationError }] = useMutation(CREATE_EVENT_REGISTRATION) @@ -21,7 +21,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId }) => { async function handleSubmit() { const validationResult = RegistrationSchema.safeParse({ - alcheID, + aicheID, eventID: EventId }) @@ -32,10 +32,16 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId }) => { } try { - console.log('Submitting Registration: ', { eventID: EventId, userID: alcheID }) + console.log('aicheID:', mongoId) + if (aicheID.split('-')[1] !== mongoId) { + setError('Invalid aicheID') + } const response = await registerEvent({ - variables: { eventRegistration: { eventID: EventId, userID: alcheID }, orgId: orgId } + variables: { + eventRegistration: { eventID: EventId, userID: aicheID.split('-')[1] }, + orgId: orgId + } }) console.log('Mutation Response: ', response) @@ -46,7 +52,9 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId }) => { setShow(false) } catch (error) { console.error('Error registering:', error) - setError(error.message || 'Error registering. Please try again.') + setError( + 'Error registering. Please check your Aiche ID again. If the problem persists, please try again later.' + ) } } @@ -60,10 +68,10 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId }) => { { - setAlcheID(e.target.value) + setAicheID(e.target.value) setError(null) }} /> diff --git a/src/config/content/events/events.js b/src/config/content/events/events.js index 1ae90f3..7ea67cb 100644 --- a/src/config/content/events/events.js +++ b/src/config/content/events/events.js @@ -4,15 +4,14 @@ export const staticEventsData = [ prizeMoney: '', id: '1', poster: - 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', + 'https://res.cloudinary.com/dhv234qct/image/upload/v1720612216/AICHE_SRC/event_icons/chem-e-car_b98oeu.svg', name: 'CHEM-E-CAR', subHeading: 'Ready Set go!! Unleash the Inner Engineer!', description: [ "Calling all future chemical engineers! The AIChE's Chem-E-Car competition is a two-round challenge held at regional conferences, culminating at the annual Student Conference.", "The challenge is to design and build a miniature car propelled by the power of chemistry! The rounds include a poster competition that showcases your car's design and the know-how of the chemicals used. The ultimate test arrives when the car needs to cover a specified distance within a strict time limit. Safety comes first, and for that, teams are tested by a comprehensive safety program ensuring safe handling and disposal of chemicals throughout the competition, from preparation to operation. Chem-E-Car champions are finalized based on poster presentation, vehicle precision, safety consistency, and collaborative spirit." ], - rules: - 'https://docs.google.com/document/d/1APqVwdXNsxPZMzA3S1zQXkGnXlz-ud6j/edit?usp=sharing&ouid=100456363558753448293&rtpof=true&sd=true', + rules: 'https://drive.google.com/file/d/1GC9f3G18VwRlLm2hph7NH1CmSKv2xSYg/view?usp=drivesdk', isTeamEvent: true, maxTeamSize: 5, minTeamSize: 2 @@ -22,7 +21,7 @@ export const staticEventsData = [ id: '2', prizeMoney: '', poster: - 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', + 'https://res.cloudinary.com/dhv234qct/image/upload/v1720612216/AICHE_SRC/event_icons/chem-e-jeopardy_l6aeai.svg', name: 'CHEM-E-JEOPARDY', subHeading: 'Let the battle of wits begin!', description: [ @@ -39,7 +38,7 @@ export const staticEventsData = [ id: '3', prizeMoney: '', poster: - 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', + 'https://res.cloudinary.com/dhv234qct/image/upload/v1720612217/AICHE_SRC/event_icons/k-12_sys_avc6dc.svg', name: 'K-12 STEM OUTREACH', subHeading: 'Unleash the STEM genius within!', description: [ @@ -47,7 +46,7 @@ export const staticEventsData = [ "This interactive competition tests your teamwork, knowledge, creativity, critical thinking, and problem-solving skills – all in a fun-filled environment! It's the perfect platform to spark curiosity in young minds and inspire the next generation of STEM visionaries.", 'The competition features four grade-level categories (K-2, 3-5, 6-8, 9-12) where participants showcase their projects through either pre-recorded video demonstrations or live presentations.' ], - rules: 'https://drive.google.com/file/d/1iznteMqtb6UH8paM5_Ef-s71msodnPuS/view?usp=sharing', + rules: 'https://drive.google.com/file/d/1GEnENRbQTcb6Gn5DyWzv7GM2M5J9xdKq/view?usp=drivesdk', isTeamEvent: true, maxTeamSize: 5, minTeamSize: 2 @@ -57,7 +56,7 @@ export const staticEventsData = [ id: '4', prizeMoney: '', poster: - 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655995/kspdwtblyqcwoqqqeddc.svg', + 'https://res.cloudinary.com/dhv234qct/image/upload/v1720612218/AICHE_SRC/event_icons/student-poster_taas8p.svg', name: 'Student Poster Competition', subHeading: 'Unleash ur poster making skills', description: [ @@ -65,7 +64,7 @@ export const staticEventsData = [ 'This event fosters a dynamic exchange of ideas, where students connect with fellow attendees and the wider audience, gaining valuable insights from industry experts who convene to discuss the latest advancements, research breakthroughs, and specific topics.', 'Compete for cash prizes (up to $200!), recognition, and a chance to present at the annual student conference!' ], - rules: 'https://drive.google.com/file/d/1M3lMX_u7Ip0ySnNo-tK5MH_wIaKFoRjo/view?usp=sharing', + rules: 'https://drive.google.com/file/d/1GFzZdEIxOKpDySfzAbxoJSeddxGcJKXt/view?usp=drivesdk', isTeamEvent: false, maxTeamSize: 5, minTeamSize: 2 @@ -75,7 +74,7 @@ export const staticEventsData = [ id: '5', prizeMoney: '', poster: - 'https://res.cloudinary.com/dmvdbpyqk/image/upload/v1717655996/ndoqb3l9m6no38kehat8.svg', + 'https://res.cloudinary.com/dhv234qct/image/upload/v1720612218/AICHE_SRC/event_icons/student-technical-paper_tbxcxq.svg', name: 'Student Technical Paper Competition', subHeading: 'Let’s explore and show the presentation', description: [ @@ -83,7 +82,7 @@ export const staticEventsData = [ 'Research plays a very pivotal role in engineering field. It is creative and systematic work done to explore knowledge. Keeping this thing in mind, we heartily welcome undergraduate students across different regions to demonstrate their oral presentations on chemical engineering topics.The subject of the paper mostly focuses on recent advances in chemical engineering field in the form of research.', 'Exposure to this event will give you an opportunity to showcase your research and ignite the knowledge of young creative minds in the field of chemical engineering.' ], - rules: 'https://drive.google.com/file/d/19YNXFWtbxc4vxN4wxaDGer64IdWjg-pu/view?usp=sharing', + rules: 'https://drive.google.com/file/d/1GDRUakpoeSL6r-KfTiKh66FWQU79C99i/view?usp=drivesdk', isTeamEvent: false } ] diff --git a/src/config/content/teamRegistration/registerSchema.js b/src/config/content/teamRegistration/registerSchema.js index b46ad9f..f408e1a 100644 --- a/src/config/content/teamRegistration/registerSchema.js +++ b/src/config/content/teamRegistration/registerSchema.js @@ -1,12 +1,12 @@ import { z } from 'zod' export const RegistrationSchema = z.object({ - alcheID: z.string().min(1, 'Alche ID is required'), + aicheID: z.string().min(24, 'Invalid Aiche ID').regex(/.*-.*/, 'Invalid Aiche ID'), eventID: z.string().min(1, 'Event ID is required') }) export const TeamRegistrationSchema = z.object({ teamname: z.string().min(1, 'Team Name is required'), teamleadid: z.string().min(1, 'Team Lead ID is required'), - userIds: z.array(z.string().min(1, 'Member ID is required')) + userIds: z.array(z.string().min(1, 'Member ID is required').regex(/.*-.*/, 'Invalid Aiche ID')) }) From d5dcaf21e2285ecc40dd7a96b87ad587bcbb4b01 Mon Sep 17 00:00:00 2001 From: ayanSCYY Date: Thu, 11 Jul 2024 17:06:30 +0530 Subject: [PATCH 5/7] feat: add changes --- .../events/IndividualEventModal.jsx | 2 +- src/components/events/Register2Modal.jsx | 11 ++++++-- src/components/events/TeamEventModal.jsx | 23 +++++++++++++---- .../events/teamRegistrationModal.jsx | 25 +++++++++++++++++++ src/graphQL/queries/getEvents.js | 1 + 5 files changed, 54 insertions(+), 8 deletions(-) diff --git a/src/components/events/IndividualEventModal.jsx b/src/components/events/IndividualEventModal.jsx index e87c07c..81637ad 100644 --- a/src/components/events/IndividualEventModal.jsx +++ b/src/components/events/IndividualEventModal.jsx @@ -145,7 +145,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) = {errorContent && {errorContent}} {hasPdfUpload && ( - Upload PDF + Submit your abstracts here { +export const RegisterModal = ({ + event: { id, name, isTeamEvent, maxTeamSize }, + closeModal, + mongoId +}) => { const hasPdfUpload = eventsWithPdfs.includes(name) return ( @@ -15,6 +19,7 @@ export const RegisterModal = ({ event: { id, name, isTeamEvent }, closeModal, mo EventId={id} EventTitle={name} mongoId={mongoId} + maxTeamSize={maxTeamSize} hasPdfUpload={hasPdfUpload} /> ) : ( @@ -22,6 +27,7 @@ export const RegisterModal = ({ event: { id, name, isTeamEvent }, closeModal, mo EventId={id} EventTitle={name} mongoId={mongoId} + maxTeamSize={maxTeamSize} hasPdfUpload={hasPdfUpload} /> )} @@ -34,7 +40,8 @@ RegisterModal.propTypes = { event: PropTypes.shape({ id: PropTypes.string.isRequired, name: PropTypes.string.isRequired, - isTeamEvent: PropTypes.bool + isTeamEvent: PropTypes.bool, + maxTeamSize: PropTypes.number }), closeModal: PropTypes.func, mongoId: PropTypes.string diff --git a/src/components/events/TeamEventModal.jsx b/src/components/events/TeamEventModal.jsx index 620ca3f..4c39d66 100644 --- a/src/components/events/TeamEventModal.jsx +++ b/src/components/events/TeamEventModal.jsx @@ -1,6 +1,6 @@ import { useState } from 'react' import PropTypes from 'prop-types' -import { Button1 } from './registerModal.style' +// import { Button1 } from './registerModal.style' import { useMutation } from '@apollo/client' import { CREATE_TEAM_REGISTRATIONS } from '../../graphQL/mutations/teamRegistration' import CustomAlert from '../customcomponents/CustomAlert' @@ -18,7 +18,8 @@ import { IconButtonContainer, RegisterCompleteCardText, RegisterCompleteCardTextContainer, - Container + Container, + Button1 } from './teamRegistrationModal' import { TeamRegistrationSchema } from '../../config/content/teamRegistration/registerSchema' import { toast } from 'react-toastify' @@ -26,7 +27,7 @@ import { MinusButtonUrl, PlusButtonUrl } from '../../config/content/teamRegistra import { InputContainer1, FileUpload } from './registerModal.style' import { uploadToCloudinary } from '../../utils/uploadToCloudinary' -export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) => { +export const TeamEventModal = ({ EventId, EventTitle, maxTeamSize, hasPdfUpload, mongoId }) => { const [formData, setFormData] = useState({ teamname: '', teamleadid: '', @@ -40,6 +41,8 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = const [teamRegisterEvent] = useMutation(CREATE_TEAM_REGISTRATIONS) + const maxUsers = maxTeamSize + const handleChange = (key, value) => { setFormData({ ...formData, @@ -60,7 +63,7 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = } const addUserId = () => { - if (formData.userIds.length > 4) { + if (formData.userIds.length > maxUsers - 2) { return toast.error("you've reached maximum team limit") } setFormData({ @@ -218,6 +221,15 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) = ))} + {EventTitle === 'CHEM-E-CAR' ? ( + { + window.open('https://aiche.app.box.com/f/a00482e56d334db7846454bacc43cdce') + }} + > + Click to submit your EDPs here + + ) : null} {hasPdfUpload && ( @@ -246,7 +258,8 @@ TeamEventModal.propTypes = { EventTitle: PropTypes.string.isRequired, closeRegisterModal: PropTypes.func, hasPdfUpload: PropTypes.bool, - mongoId: PropTypes.string + mongoId: PropTypes.string, + maxTeamSize: PropTypes.number } export default TeamEventModal diff --git a/src/components/events/teamRegistrationModal.jsx b/src/components/events/teamRegistrationModal.jsx index daede66..63bdc5a 100644 --- a/src/components/events/teamRegistrationModal.jsx +++ b/src/components/events/teamRegistrationModal.jsx @@ -83,3 +83,28 @@ export const RemoveButton = styled.button` export const IconButtonContainer = styled.div` ${tw`flex justify-center`} ` + +export const Button1 = styled.button` + ${tw` px-2 + mt-10 + mb-12 + w-[80%] + ml-[10%] + py-2 + rounded-[11.53px] + bg-orange-1 + text-brown-5 + font-semibold + text-1.5lg + md:text-2xl + border-brown-5 + border-2 + transition + duration-300 + ease-in-out + active:transform + active:translate-x-[3px] + active:translate-y-[3px] + active:shadow-none + shadow-[3px 3px 0px #1d1d1d ]`} +` diff --git a/src/graphQL/queries/getEvents.js b/src/graphQL/queries/getEvents.js index 61ba7dd..a185f88 100644 --- a/src/graphQL/queries/getEvents.js +++ b/src/graphQL/queries/getEvents.js @@ -12,6 +12,7 @@ export const GET_EVENTS_BY_ORGID = gql` status id subHeading + maxTeamSize } } ` From 91a9179001c51a8a8547f8d2acb1946c8273aa51 Mon Sep 17 00:00:00 2001 From: ayanSCYY Date: Thu, 11 Jul 2024 18:26:31 +0530 Subject: [PATCH 6/7] feat:add changes --- .../events/IndividualEventModal.jsx | 10 ++++---- src/components/events/Register2Modal.jsx | 14 +++++++++++ src/components/events/TeamEventModal.jsx | 24 ++++++++++++------- src/components/events/eventModal.styles.jsx | 4 ++-- src/components/events/registerModal.style.jsx | 6 +++-- .../events/teamRegistrationModal.jsx | 1 + 6 files changed, 43 insertions(+), 16 deletions(-) diff --git a/src/components/events/IndividualEventModal.jsx b/src/components/events/IndividualEventModal.jsx index 81637ad..e6b3a2c 100644 --- a/src/components/events/IndividualEventModal.jsx +++ b/src/components/events/IndividualEventModal.jsx @@ -16,12 +16,13 @@ import CustomAlert from '../customcomponents/CustomAlert' import { uploadToCloudinary } from '../../utils/uploadToCloudinary' import { + Container, RegisterCompleteCardText, RegisterCompleteCardTextContainer } from './teamRegistrationModal' import { RegistrationSchema } from '../../config/content/teamRegistration/registerSchema' -export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) => { +export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload, handleScroll }) => { const [aicheID, setAicheID] = useState('') const [show, setShow] = useState(true) const [error, setError] = useState(null) @@ -117,7 +118,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) = return ( <> {show ? ( -
+ {EventTitle} (*single member Participation*) User ID @@ -160,7 +161,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) = {loading ? 'Registering...' : 'Register'} -
+ ) : ( Hurray! Ur Registration Completed @@ -175,5 +176,6 @@ IndiEventModal.propTypes = { EventTitle: PropTypes.string.isRequired, closeRegisterModal: PropTypes.func, mongoId: PropTypes.string, - hasPdfUpload: PropTypes.bool + hasPdfUpload: PropTypes.bool, + handleScroll: PropTypes.func } diff --git a/src/components/events/Register2Modal.jsx b/src/components/events/Register2Modal.jsx index b42a9e8..66d4a9d 100644 --- a/src/components/events/Register2Modal.jsx +++ b/src/components/events/Register2Modal.jsx @@ -3,19 +3,32 @@ import { Button2, Container, Section } from './registerModal.style' import TeamEventModal from './TeamEventModal' import { IndiEventModal } from './IndividualEventModal' import { eventsWithPdfs } from '../../config/content/events/events' +import { useState } from 'react' +import { ProgressBar } from './eventModal.styles' export const RegisterModal = ({ event: { id, name, isTeamEvent, maxTeamSize }, closeModal, mongoId }) => { + const [scrollPosition, setScrollPosition] = useState(0) + + function handleScroll(e) { + const element = e.target + const scrollTop = element.scrollTop + const scrollHeight = element.scrollHeight - element.clientHeight + const scrollPercentage = (scrollTop / scrollHeight) * 100 + setScrollPosition(scrollPercentage) + } const hasPdfUpload = eventsWithPdfs.includes(name) return (
+ Back {isTeamEvent ? ( ) : ( { +export const TeamEventModal = ({ + EventId, + EventTitle, + maxTeamSize, + hasPdfUpload, + mongoId, + handleScroll +}) => { const [formData, setFormData] = useState({ teamname: '', teamleadid: '', @@ -51,8 +59,6 @@ export const TeamEventModal = ({ EventId, EventTitle, maxTeamSize, hasPdfUpload, setError(null) } - console.log(mongoId) - const handleUserIdChange = (index, value) => { const newUserIds = [...formData.userIds] newUserIds[index] = value @@ -172,10 +178,11 @@ export const TeamEventModal = ({ EventId, EventTitle, maxTeamSize, hasPdfUpload, return id.split('-')[1] } + const doesContainEDP = edpEvents.includes(EventTitle) return ( <> {show ? ( - + {EventTitle} (*Team Participation*) @@ -221,15 +228,15 @@ export const TeamEventModal = ({ EventId, EventTitle, maxTeamSize, hasPdfUpload, ))} - {EventTitle === 'CHEM-E-CAR' ? ( + {doesContainEDP && ( { - window.open('https://aiche.app.box.com/f/a00482e56d334db7846454bacc43cdce') + window.open(edpLink, '_blank') }} > Click to submit your EDPs here - ) : null} + )} {hasPdfUpload && ( @@ -259,7 +266,8 @@ TeamEventModal.propTypes = { closeRegisterModal: PropTypes.func, hasPdfUpload: PropTypes.bool, mongoId: PropTypes.string, - maxTeamSize: PropTypes.number + maxTeamSize: PropTypes.number, + handleScroll: PropTypes.func } export default TeamEventModal diff --git a/src/components/events/eventModal.styles.jsx b/src/components/events/eventModal.styles.jsx index 16a6d1e..5a2f649 100644 --- a/src/components/events/eventModal.styles.jsx +++ b/src/components/events/eventModal.styles.jsx @@ -17,7 +17,7 @@ export const Container = styled.main` ` export const Section = styled.section` - ${tw`bg-black-1 text-brown-2 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins h-[97vh] h-auto overflow-scroll`} + ${tw`bg-black-1 text-brown-2 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[97vh] overflow-scroll`} padding-top: 10px; scrollbar-width: none; ` @@ -25,7 +25,7 @@ export const Section = styled.section` export const ProgressBar = styled.div` ${tw`fixed top-0 left-0 h-1 bg-orange-500`} width: ${({ width }) => width}%; - transition: width 0.1s ease-out; + transition: width 0.3s ease-in; ` export const ContentWrapper = styled.div` diff --git a/src/components/events/registerModal.style.jsx b/src/components/events/registerModal.style.jsx index f10ec09..68b0e49 100644 --- a/src/components/events/registerModal.style.jsx +++ b/src/components/events/registerModal.style.jsx @@ -27,8 +27,10 @@ export const FileUpload = styled.input` ` export const Section = styled.section` - ${tw`bg-brown-2 border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[100vh] h-auto overflow-y-auto `} + ${tw`bg-brown-2 border-4 border-black-1 relative max-w-[600px] w-full rounded-[23.06px] font-Poppins max-h-[97vh] overflow-scroll `} + scrollbar-width: none; ` + export const Text = styled.div` ${tw`text-[34px] 0.8xsm:text-[37px] 0.9xsm:text-[40px] text-center w-full mt-7 font-bold font-Poppins`} @@ -98,7 +100,7 @@ export const Button1 = styled.button` export const Button2 = styled.button` ${tw`p-1 - mt-6 ml-6 mr-6 + m-6 w-[20%] diff --git a/src/components/events/teamRegistrationModal.jsx b/src/components/events/teamRegistrationModal.jsx index 63bdc5a..144c929 100644 --- a/src/components/events/teamRegistrationModal.jsx +++ b/src/components/events/teamRegistrationModal.jsx @@ -3,6 +3,7 @@ import tw from 'twin.macro' export const Container = styled.div` ${tw`max-h-[85vh] overflow-scroll`} + scrollbar-width: none; ` export const GridContainer = styled.div` From 3ee8ac349966ced40d5d328cd75916ffb1c31741 Mon Sep 17 00:00:00 2001 From: ayanSCYY Date: Thu, 11 Jul 2024 18:31:04 +0530 Subject: [PATCH 7/7] feat: add changes --- src/components/events/eventModal.styles.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/events/eventModal.styles.jsx b/src/components/events/eventModal.styles.jsx index 5a2f649..b67ddd6 100644 --- a/src/components/events/eventModal.styles.jsx +++ b/src/components/events/eventModal.styles.jsx @@ -25,7 +25,7 @@ export const Section = styled.section` export const ProgressBar = styled.div` ${tw`fixed top-0 left-0 h-1 bg-orange-500`} width: ${({ width }) => width}%; - transition: width 0.3s ease-in; + transition: width 0.5s linear; ` export const ContentWrapper = styled.div`