From 9644e3b1eea025731bff1de72ac8b9b421271f92 Mon Sep 17 00:00:00 2001 From: Ayush <135319056+ayussh-2@users.noreply.github.com> Date: Sat, 20 Jul 2024 18:01:11 +0530 Subject: [PATCH] chore: added grades for k12 (#100) * chore: added grades for k12 * chore: added abilty to register again --- src/components/events/EventCard.jsx | 11 ++- src/components/events/Events.jsx | 5 +- src/components/events/EventsWrapper.jsx | 17 +++- .../events/IndividualEventModal.jsx | 2 +- src/components/events/Register2Modal.jsx | 7 +- .../events/RegisteredEventModal.jsx | 77 ++++++++++--------- src/components/events/RegisteredTeam.jsx | 65 ++++++++++++++++ src/components/events/TeamEventModal.jsx | 32 ++++++-- .../events/registeredEventModal.styles.jsx | 10 +++ .../events/teamRegistrationModal.jsx | 10 +++ src/graphQL/queries/teamRegistration.js | 1 + 11 files changed, 189 insertions(+), 48 deletions(-) create mode 100644 src/components/events/RegisteredTeam.jsx diff --git a/src/components/events/EventCard.jsx b/src/components/events/EventCard.jsx index 047179e..118e489 100644 --- a/src/components/events/EventCard.jsx +++ b/src/components/events/EventCard.jsx @@ -66,7 +66,7 @@ export default function EventCard({ setOpenModal(true) } - function handleClick(id) { + function handleClick(id, registeredGrades) { if (!mongoId) { toast.info('Please complete your profile to register for the event') return @@ -77,7 +77,11 @@ export default function EventCard({ return } - handleRegisterEvent(id) + handleRegisterEvent(id, registeredGrades) + } + + function openEventRegistration(registeredGrades) { + handleClick(id, registeredGrades) } const overlay = document.getElementById('overlay') @@ -90,6 +94,7 @@ export default function EventCard({ closeModal={() => setOpenModal(false)} isTeamEvent={isTeamEvent} eventId={id} + openEventRegistration={openEventRegistration} registerdEvent={registeredEvent} eventName={name} /> @@ -132,7 +137,7 @@ export default function EventCard({ Rulebook {!registeredEvent ? ( - + ) : ( )} diff --git a/src/components/events/Events.jsx b/src/components/events/Events.jsx index 237a15d..166e73f 100644 --- a/src/components/events/Events.jsx +++ b/src/components/events/Events.jsx @@ -28,6 +28,7 @@ export default function Events() { const [soloRegistration, setSoloRegistration] = useState([]) const [teamRegistration, setTeamRegistration] = useState([]) const [combinedRegistrations, setCombinedRegistrations] = useState([]) + const [grades, setGrades] = useState(null) const [loading, setLoading] = useState(true) const [uid, setUid] = useState(null) @@ -102,7 +103,8 @@ export default function Events() { } } - function handleRegisterModalOpen(EventId) { + function handleRegisterModalOpen(EventId, registeredGrades) { + setGrades(registeredGrades) setIsRegisterModalOpen(true) const event = events.find((event) => event.id === EventId) if (event) { @@ -168,6 +170,7 @@ export default function Events() { closeModal={handleRegisterModalClose} userSrcId={userSrcId} event={event} + grades={grades} /> ), overlay diff --git a/src/components/events/EventsWrapper.jsx b/src/components/events/EventsWrapper.jsx index 96e3f06..ef99e63 100644 --- a/src/components/events/EventsWrapper.jsx +++ b/src/components/events/EventsWrapper.jsx @@ -28,6 +28,13 @@ function EventsWrapper({ function giveRegisteredEvent(currEvent) { let registeredEvent = null + let k12Events = [] + const k12EventId = '668d1b221b94b9c9625372b2' + const isK12Event = currEvent.id === k12EventId + + if (isK12Event) { + k12Events = combinedArray.filter((event) => event.eventID === k12EventId) + } combinedArray.forEach((event) => { if (currEvent.id === event.eventID) { @@ -35,7 +42,15 @@ function EventsWrapper({ } }) - return registeredEvent + if (isK12Event) { + if (k12Events.length > 0) { + return k12Events + } else { + return null + } + } else { + return registeredEvent + } } return ( diff --git a/src/components/events/IndividualEventModal.jsx b/src/components/events/IndividualEventModal.jsx index f3a74d2..a78470b 100644 --- a/src/components/events/IndividualEventModal.jsx +++ b/src/components/events/IndividualEventModal.jsx @@ -127,7 +127,7 @@ export const IndiEventModal = ({ {show ? ( {EventTitle} - (*single member Participation*) + (*Single Member Participation*) Enter srcID { const [scrollPosition, setScrollPosition] = useState(0) @@ -36,6 +37,7 @@ export const RegisterModal = ({ maxTeamSize={maxTeamSize} hasPdfUpload={hasPdfUpload} userSrcId={userSrcId} + grades={grades} /> ) : ( { +export const RegisteredEventModal = ({ + closeModal, + isTeamEvent, + registerdEvent, + eventName, + openEventRegistration +}) => { const doesContainEDP = edpEvents.includes(eventName) - const teamLeadId = registerdEvent.userIDs[0] - - const sortedUsers = [...registerdEvent.users].sort((a, b) => { - if (a.id === teamLeadId) return -1 - if (b.id === teamLeadId) return 1 - return 0 - }) + const isK12 = eventName.includes('K-12') + const [currentEvent, setCurrEvent] = useState(isK12 ? registerdEvent[0] : registerdEvent) + const [grade, setGrade] = useState(currentEvent?.grade) + useEffect(() => { + if (isK12) { + const findEvent = registerdEvent.find((event) => event.grade === grade) + const registerdGrades = registerdEvent.map((event) => event.grade) + const notRegisterdGrades = ['0', '1', '2', '3'].filter( + (grade) => !registerdGrades.includes(grade) + ) + const options = ['Kindergarten - Grade 2', 'Grade 3-5', 'Grade 6-8', 'Grade 9-12'] + const optionsResult = notRegisterdGrades.map((gradeIndex) => { + return { value: gradeIndex, label: options[Number(gradeIndex)] } + }) + if (findEvent) { + setCurrEvent(findEvent) + } else { + openEventRegistration(optionsResult) + } + } + // eslint-disable-next-line + }, [grade]) return ( @@ -30,28 +51,13 @@ export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent, {eventName} {isTeamEvent ? ( -
- - Team Name:  - {registerdEvent.teamName} - - {sortedUsers.map((user, index) => ( -
- - {index === 0 ? 'Team Lead:' : `Member ${index + 1}:`} - {user.name + ' - ' + user.college} - -
- ))} - {doesContainEDP && ( - - Submit your EDPs here: - - Link - - - )} -
+ ) : ( Congratulations, you have registered! @@ -67,5 +73,6 @@ RegisteredEventModal.propTypes = { closeModal: PropTypes.func.isRequired, isTeamEvent: PropTypes.bool.isRequired, registerdEvent: PropTypes.any, - eventName: PropTypes.string + eventName: PropTypes.string, + openEventRegistration: PropTypes.func } diff --git a/src/components/events/RegisteredTeam.jsx b/src/components/events/RegisteredTeam.jsx new file mode 100644 index 0000000..8bd2f3b --- /dev/null +++ b/src/components/events/RegisteredTeam.jsx @@ -0,0 +1,65 @@ +import { + TextContainer, + TextHead, + TextHead1, + TextContainer2, + Select +} from './registeredEventModal.styles' +import { edpLink } from '../../config/content/events/events' +import PropTypes from 'prop-types' + +RegisteredTeam.propTypes = { + currentEvent: PropTypes.any, + doesContainEDP: PropTypes.bool, + isK12: PropTypes.bool, + setGrade: PropTypes.func, + grade: PropTypes.string, + allEvents: PropTypes.array +} + +function RegisteredTeam({ currentEvent, doesContainEDP, isK12, setGrade, grade }) { + const teamLeadId = currentEvent.userIDs[0] + const sortedUsers = [...currentEvent.users].sort((a, b) => { + if (a.id === teamLeadId) return -1 + if (b.id === teamLeadId) return 1 + return 0 + }) + + return ( +
+ {isK12 && ( +
+ Registered Grades + +
+ )} + + Team Name:  + {currentEvent.teamName} + + {sortedUsers.map((user, index) => ( +
+ + {index === 0 ? 'Team Lead:' : `Member ${index + 1}:`} + {user.name + ' - ' + user.college} + +
+ ))} + {doesContainEDP && ( + + Submit your EDPs here: + + Link + + + )} +
+ ) +} + +export default RegisteredTeam diff --git a/src/components/events/TeamEventModal.jsx b/src/components/events/TeamEventModal.jsx index 4405072..51d9ae5 100644 --- a/src/components/events/TeamEventModal.jsx +++ b/src/components/events/TeamEventModal.jsx @@ -19,7 +19,8 @@ import { RegisterCompleteCardText, RegisterCompleteCardTextContainer, Container, - Button1 + Button1, + Select } from './teamRegistrationModal' import { TeamRegistrationSchema } from '../../config/content/teamRegistration/registerSchema' import { toast } from 'react-toastify' @@ -35,14 +36,17 @@ export const TeamEventModal = ({ hasPdfUpload, mongoId, handleScroll, - userSrcId + userSrcId, + grades }) => { const [formData, setFormData] = useState({ teamname: '', teamleadid: userSrcId, - userIds: [''] + userIds: [''], + grade: grades && grades[0].value ? grades[0].value : '' }) + const isK12 = EventTitle.includes('K-12') const [show, setShow] = useState(true) const [error, setError] = useState(null) const [pdf, setPdf] = useState(null) @@ -132,6 +136,7 @@ export const TeamEventModal = ({ if (hasPdfUpload) { pdfUrl = await uploadToCloudinary(pdf) } + // console.log('formData', formData) await teamRegisterEvent({ variables: { orgId: '668bd9deff0327a608b9b6ea', @@ -139,7 +144,8 @@ export const TeamEventModal = ({ eventID: EventId, teamName: formData.teamname, userIDs: uIds, - submittedPDF: pdfUrl + submittedPDF: pdfUrl, + grade: formData.grade } } }) @@ -206,6 +212,21 @@ export const TeamEventModal = ({ onChange={(e) => handleChange('teamleadid', e.target.value)} /> + {isK12 && ( +
+ Select Grade + +
+ )} @@ -269,7 +290,8 @@ TeamEventModal.propTypes = { mongoId: PropTypes.string, maxTeamSize: PropTypes.number, handleScroll: PropTypes.func, - userSrcId: PropTypes.string + userSrcId: PropTypes.string, + grades: PropTypes.array } export default TeamEventModal diff --git a/src/components/events/registeredEventModal.styles.jsx b/src/components/events/registeredEventModal.styles.jsx index 1fbf3c3..416c5a9 100644 --- a/src/components/events/registeredEventModal.styles.jsx +++ b/src/components/events/registeredEventModal.styles.jsx @@ -37,3 +37,13 @@ export const TextContent = styled.h1` export const Button = styled.button` ${tw`p-1 w-full md:w-[20%] mt-4 md:mt-6 mx-auto md:ml-6 md: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`} ` + +export const Select = styled.select` + ${tw`w-[80%] my-5 ml-[10%] h-[40px] px-2 bg-brown-2 text-brown-4 text-base 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; +` diff --git a/src/components/events/teamRegistrationModal.jsx b/src/components/events/teamRegistrationModal.jsx index 144c929..903fa48 100644 --- a/src/components/events/teamRegistrationModal.jsx +++ b/src/components/events/teamRegistrationModal.jsx @@ -63,6 +63,16 @@ export const Input = styled.input` z-index: 1; ` +export const Select = styled.select` + ${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; diff --git a/src/graphQL/queries/teamRegistration.js b/src/graphQL/queries/teamRegistration.js index c6df55a..86b717e 100644 --- a/src/graphQL/queries/teamRegistration.js +++ b/src/graphQL/queries/teamRegistration.js @@ -6,6 +6,7 @@ export const GET_TEAM_REGISTRATIONS_BY_USER = gql` eventID teamName userIDs + grade users { name college