chore: added grades for k12 (#100)

* chore: added grades for k12

* chore: added abilty to register again

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({
             <CardFooter>
               <ButtonRules onClick={redirectToRules}>Rulebook</ButtonRules>
               {!registeredEvent ? (
-                <Button onClick={() => handleClick(id)}>Register</Button>
+                <Button onClick={() => handleClick(id, null)}>Register</Button>
               ) : (
                 <Button onClick={handleRegisteredEvents}>Registered</Button>
               )}

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

src/components/events/EventsWrapper.jsx

@@ -28,14 +28,29 @@ 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) {
         registeredEvent = event
       }
     })
 
-    return registeredEvent
+    if (isK12Event) {
+      if (k12Events.length > 0) {
+        return k12Events
+      } else {
+        return null
+      }
+    } else {
+      return registeredEvent
+    }
   }
 
   return (

src/components/events/IndividualEventModal.jsx

@@ -127,7 +127,7 @@ export const IndiEventModal = ({
       {show ? (
         <Container onScroll={handleScroll}>
           <Text>{EventTitle}</Text>
-          <TextSub>(*single member Participation*)</TextSub>
+          <TextSub>(*Single Member Participation*)</TextSub>
           <TextHead className="text-lg font-bold">Enter srcID</TextHead>
           <InputContainer1>
             <Input

src/components/events/Register2Modal.jsx

@@ -10,7 +10,8 @@ export const RegisterModal = ({
   event: { id, name, isTeamEvent, maxTeamSize },
   closeModal,
   mongoId,
-  userSrcId
+  userSrcId,
+  grades
 }) => {
   const [scrollPosition, setScrollPosition] = useState(0)
 
@@ -36,6 +37,7 @@ export const RegisterModal = ({
             maxTeamSize={maxTeamSize}
             hasPdfUpload={hasPdfUpload}
             userSrcId={userSrcId}
+            grades={grades}
           />
         ) : (
           <IndiEventModal
@@ -62,5 +64,6 @@ RegisterModal.propTypes = {
   }),
   closeModal: PropTypes.func,
   mongoId: PropTypes.string,
-  userSrcId: PropTypes.string
+  userSrcId: PropTypes.string,
+  grades: PropTypes.array
 }

src/components/events/RegisteredEventModal.jsx

@@ -1,27 +1,48 @@
-import { edpEvents, edpLink } from '../../config/content/events/events'
+import { useState } from 'react'
+import { edpEvents } from '../../config/content/events/events'
 import {
   Button,
   ModalContainer,
   Section,
   TextContainer,
   TextContent,
-  TextHead,
-  TextHead1,
-  TextContainer2,
   EventName
 } from './registeredEventModal.styles'
 import { Container } from './registerModal.style'
 import PropTypes from 'prop-types'
+import RegisteredTeam from './RegisteredTeam'
+import { useEffect } from 'react'
 
-export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent, eventName }) => {
+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 (
     <Container>
@@ -30,28 +51,13 @@ export const RegisteredEventModal = ({ closeModal, isTeamEvent, registerdEvent,
         <ModalContainer>
           <EventName>{eventName}</EventName>
           {isTeamEvent ? (
-            <div>
-              <TextContainer2>
-                <TextHead1>Team Name:&nbsp;</TextHead1>
-                {registerdEvent.teamName}
-              </TextContainer2>
-              {sortedUsers.map((user, index) => (
-                <div key={index}>
-                  <TextContainer>
-                    <TextHead>{index === 0 ? 'Team Lead:' : `Member ${index + 1}:`}</TextHead>
-                    {user.name + ' - ' + user.college}
-                  </TextContainer>
-                </div>
-              ))}
-              {doesContainEDP && (
-                <TextContainer>
-                  <TextHead>Submit your EDPs here: </TextHead>
-                  <a href={edpLink} target="_blank" rel="noreferrer">
-                    Link
-                  </a>
-                </TextContainer>
-              )}
-            </div>
+            <RegisteredTeam
+              currentEvent={currentEvent}
+              doesContainEDP={doesContainEDP}
+              setGrade={setGrade}
+              isK12={isK12}
+              grade={grade}
+            />
           ) : (
             <TextContainer>
               <TextContent>Congratulations, you have registered!</TextContent>
@@ -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
 }

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 (
+    <div>
+      {isK12 && (
+        <div>
+          <TextHead>Registered Grades</TextHead>
+          <Select value={grade} onChange={(e) => setGrade(e.target.value)}>
+            <option value="0">Kindergarten - Grade 2</option>
+            <option value="1">Grade 3-5</option>
+            <option value="2">Grade 6-8</option>
+            <option value="3">Grade 9-12</option>
+          </Select>
+        </div>
+      )}
+      <TextContainer2>
+        <TextHead1>Team Name:&nbsp;</TextHead1>
+        {currentEvent.teamName}
+      </TextContainer2>
+      {sortedUsers.map((user, index) => (
+        <div key={index}>
+          <TextContainer>
+            <TextHead>{index === 0 ? 'Team Lead:' : `Member ${index + 1}:`}</TextHead>
+            {user.name + ' - ' + user.college}
+          </TextContainer>
+        </div>
+      ))}
+      {doesContainEDP && (
+        <TextContainer>
+          <TextHead>Submit your EDPs here: </TextHead>
+          <a href={edpLink} target="_blank" rel="noreferrer">
+            Link
+          </a>
+        </TextContainer>
+      )}
+    </div>
+  )
+}
+
+export default RegisteredTeam

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,14 +136,16 @@ export const TeamEventModal = ({
       if (hasPdfUpload) {
         pdfUrl = await uploadToCloudinary(pdf)
       }
+      // console.log('formData', formData)
       await teamRegisterEvent({
         variables: {
           orgId: '668bd9deff0327a608b9b6ea',
           teamRegistration: {
             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)}
                 />
               </div>
+              {isK12 && (
+                <div>
+                  <TextHead>Select Grade</TextHead>
+                  <Select
+                    value={formData.grade}
+                    onChange={(e) => handleChange('grade', e.target.value)}
+                  >
+                    {grades.map((grade) => (
+                      <option key={grade.label} value={grade.value}>
+                        {grade.label}
+                      </option>
+                    ))}
+                  </Select>
+                </div>
+              )}
             </Grid1>
             <IconButtonContainer>
               <AddMemberButton onClick={addUserId}>
@@ -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

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;
+`