Ayan11

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 ? (
-        <div>
+        <Container onScroll={handleScroll}>
           <Text>{EventTitle}</Text>
           <TextSub>(*single member Participation*)</TextSub>
           <TextHead className="text-lg font-bold">User ID</TextHead>
@@ -145,7 +146,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) =
           {errorContent && <Err className="error">{errorContent}</Err>}
           {hasPdfUpload && (
             <InputContainer1>
-              <TextHead className="text-lg font-bold">Upload PDF</TextHead>
+              <TextHead className="text-lg font-bold">Submit your abstracts here</TextHead>
               <FileUpload
                 type="file"
                 placeholder="Upload PDF here"
@@ -160,7 +161,7 @@ export const IndiEventModal = ({ EventId, EventTitle, mongoId, hasPdfUpload }) =
           <Button1 onClick={handleSubmit} disabled={loading}>
             {loading ? 'Registering...' : 'Register'}
           </Button1>
-        </div>
+        </Container>
       ) : (
         <RegisterCompleteCardTextContainer>
           <RegisterCompleteCardText>Hurray! Ur Registration Completed</RegisterCompleteCardText>
@@ -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
 }

src/components/events/Register2Modal.jsx

@@ -3,25 +3,45 @@ 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 }, closeModal, mongoId }) => {
+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 (
     <Container>
       <Section>
+        <ProgressBar width={scrollPosition} />
         <Button2 onClick={closeModal}>Back</Button2>
         {isTeamEvent ? (
           <TeamEventModal
+            handleScroll={handleScroll}
             EventId={id}
             EventTitle={name}
             mongoId={mongoId}
+            maxTeamSize={maxTeamSize}
             hasPdfUpload={hasPdfUpload}
           />
         ) : (
           <IndiEventModal
+            handleScroll={handleScroll}
             EventId={id}
             EventTitle={name}
             mongoId={mongoId}
+            maxTeamSize={maxTeamSize}
             hasPdfUpload={hasPdfUpload}
           />
         )}
@@ -34,7 +54,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

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,15 +18,24 @@ import {
   IconButtonContainer,
   RegisterCompleteCardText,
   RegisterCompleteCardTextContainer,
-  Container
+  Container,
+  Button1
 } from './teamRegistrationModal'
 import { TeamRegistrationSchema } from '../../config/content/teamRegistration/registerSchema'
 import { toast } from 'react-toastify'
 import { MinusButtonUrl, PlusButtonUrl } from '../../config/content/teamRegistration/registermodal'
 import { InputContainer1, FileUpload } from './registerModal.style'
 import { uploadToCloudinary } from '../../utils/uploadToCloudinary'
+import { edpEvents, edpLink } from '../../config/content/events/events'
 
-export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) => {
+export const TeamEventModal = ({
+  EventId,
+  EventTitle,
+  maxTeamSize,
+  hasPdfUpload,
+  mongoId,
+  handleScroll
+}) => {
   const [formData, setFormData] = useState({
     teamname: '',
     teamleadid: '',
@@ -40,6 +49,8 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) =
 
   const [teamRegisterEvent] = useMutation(CREATE_TEAM_REGISTRATIONS)
 
+  const maxUsers = maxTeamSize
+
   const handleChange = (key, value) => {
     setFormData({
       ...formData,
@@ -48,8 +59,6 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) =
     setError(null)
   }
 
-  console.log(mongoId)
-
   const handleUserIdChange = (index, value) => {
     const newUserIds = [...formData.userIds]
     newUserIds[index] = value
@@ -60,7 +69,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({
@@ -169,10 +178,11 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) =
     return id.split('-')[1]
   }
 
+  const doesContainEDP = edpEvents.includes(EventTitle)
   return (
     <>
       {show ? (
-        <Container>
+        <Container onScroll={handleScroll}>
           <Text>{EventTitle}</Text>
           <TextSub>(*Team Participation*)</TextSub>
           <GridContainer>
@@ -218,6 +228,15 @@ export const TeamEventModal = ({ EventId, EventTitle, hasPdfUpload, mongoId }) =
               ))}
             </Grid2>
           </GridContainer>
+          {doesContainEDP && (
+            <Button1
+              onClick={() => {
+                window.open(edpLink, '_blank')
+              }}
+            >
+              Click to submit your EDPs here
+            </Button1>
+          )}
 
           {hasPdfUpload && (
             <InputContainer1>
@@ -246,7 +265,9 @@ TeamEventModal.propTypes = {
   EventTitle: PropTypes.string.isRequired,
   closeRegisterModal: PropTypes.func,
   hasPdfUpload: PropTypes.bool,
-  mongoId: PropTypes.string
+  mongoId: PropTypes.string,
+  maxTeamSize: PropTypes.number,
+  handleScroll: PropTypes.func
 }
 
 export default TeamEventModal

src/components/events/eventModal.styles.jsx

@@ -17,15 +17,15 @@ 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;
 `
 
 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.5s linear;
 `
 
 export const ContentWrapper = styled.div`

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%]
 
 

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`
@@ -83,3 +84,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 ]`}
+`

src/graphQL/queries/getEvents.js

@@ -12,6 +12,7 @@ export const GET_EVENTS_BY_ORGID = gql`
       status
       id
       subHeading
+      maxTeamSize
     }
   }
 `