fix: enforce gender participation constraint during registration (#244)

* fix: add prefilled details from firebase * fix: enforce gender participation constraint during registration * chore: improve logic
dscnitrourkela · Nov 5, 2024 · c62b073 · c62b073
1 parent 8df0c0c
commit c62b073
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 13 deletions.
diff --git a/src/app/register/page.jsx b/src/app/register/page.jsx
@@ -17,6 +17,8 @@ import SelectField from '@/components/Register/SelectField/SelectField';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import {
   formFields,
+  innoOrgID,
+  maxRegistrations,
   nitrID,
   notNitrFields,
   undertakingContent,
@@ -25,12 +27,12 @@ import { userSchema } from '@/config/zodd/userDetailsSchema';
 import { AuthContext } from '@/context/auth-context';
 import { REGISTER_ORG } from '@/graphql/mutations/organizationMutations';
 import { REGISTER_USER } from '@/graphql/mutations/userMutations';
-import { GET_USER_BY_UID } from '@/graphql/queries/userQueries';
+import { GET_USER_BY_UID, GET_USERS } from '@/graphql/queries/userQueries';
 import { useIsLoggedIn } from '@/hooks/useIsLoggedIn';
 import { useUserDetails } from '@/hooks/useUserDetails';
 import handleLoadingAndToast from '@/utils/handleLoadingToast';
 import { uploadToCloudinary } from '@/utils/uploadToCloudinary';
-import { useMutation, useSuspenseQuery } from '@apollo/client';
+import { useMutation, useQuery } from '@apollo/client';
 
 import {
   DisclaimerPara,
@@ -67,14 +69,27 @@ function Page() {
   const [errors, setErrors] = useState({});
   const isLoggedIn = useIsLoggedIn();
   const [loading, setLoading] = useState(false);
-  const { handleGoogleSignIn, authLoading } = useContext(AuthContext);
+  const [queryLoading, setQueryLoading] = useState(false);
+  const { handleGoogleSignIn, authLoading, handleSignOut } = useContext(AuthContext);
   const [registerUser] = useMutation(REGISTER_USER);
   const [registerCollege] = useMutation(REGISTER_ORG);
+  const [genderStats, setGenderStats] = useState(null);
   const router = useRouter();
   const storedUserId = getUserDetails().uid;
   const isNitR = userDetails.instituteId === nitrID;
 
-  const { data: userDataDB, error: userErr } = useSuspenseQuery(GET_USER_BY_UID, {
+  const { data: totalRegistrations, loading: totalRegistrationsLoading } = useQuery(GET_USERS, {
+    variables: storedUserId ? { orgId: innoOrgID } : undefined,
+    skip: !storedUserId,
+    errorPolicy: 'all',
+    onError: (error) => {
+      toast.error('Login failed! try logging in again.');
+      handleSignOut(false);
+      console.error('Total registrations query error:', error);
+    },
+  });
+
+  const { data: userDataDB, error: userErr } = useQuery(GET_USER_BY_UID, {
     variables: storedUserId ? { uid: storedUserId } : undefined,
     skip: !storedUserId,
     errorPolicy: 'all',
@@ -177,6 +192,7 @@ function Page() {
             error={errors[field.id]}
             setErrors={setErrors}
             allowedRegistrations={0}
+            genderStats={genderStats}
           />
         );
       case 'file':
@@ -300,6 +316,18 @@ function Page() {
       return;
     }
 
+    if (totalRegistrationsLoading) {
+      setQueryLoading(true);
+    } else {
+      setQueryLoading(false);
+    }
+
+    if (totalRegistrations?.user?.data?.length > 0) {
+      const registrationArray = totalRegistrations.user.data;
+      const genderStatistics = getTotalGenderRegistrations(registrationArray);
+      setGenderStats(genderStatistics);
+    }
+
     const userCookie = Cookies.get('userDataDB');
     const userGoogleData = Cookies.get('userData');
 
@@ -326,13 +354,31 @@ function Page() {
         duration: 5000,
       });
     }
-  }, [userErr, userDataDB, router]);
+  }, [userErr, userDataDB, router, totalRegistrationsLoading, totalRegistrations]);
+
+  function getTotalGenderRegistrations(array) {
+    let maleCount = 0;
+    let femaleCount = 0;
+    array.forEach((registration) => {
+      if (registration.gender === 'MALE') {
+        maleCount++;
+      } else {
+        femaleCount++;
+      }
+    });
+    const allowedRegistrations = {
+      MALE: maxRegistrations.MALE - maleCount,
+      FEMALE: maxRegistrations.FEMALE - femaleCount,
+    };
+
+    return allowedRegistrations;
+  }
 
   return (
     <RegisterContainer>
       <Moon />
 
-      {isLoggedIn ? (
+      {isLoggedIn && !queryLoading ? (
         <RegisterInnerContainer>
           <RegisterHeading>Register</RegisterHeading>
           <RegisterForm>
@@ -369,8 +415,8 @@ function Page() {
           </RegsiterButton>
         </RegisterInnerContainer>
       ) : (
-        <PrimaryButton onClick={handleGoogleSignIn} disabled={authLoading}>
-          {authLoading ? 'Loading...' : 'Sign In with Google'}
+        <PrimaryButton onClick={handleGoogleSignIn} disabled={authLoading || queryLoading}>
+          {authLoading || queryLoading ? 'Loading...' : 'Sign In with Google'}
         </PrimaryButton>
       )}
     </RegisterContainer>

diff --git a/src/components/Register/SelectField/SelectField.jsx b/src/components/Register/SelectField/SelectField.jsx
@@ -1,10 +1,12 @@
 'use client';
 import { useEffect, useRef, useState } from 'react';
+
 import { toast } from 'react-hot-toast';
+
 import { Label } from '../FileInput/FileInput.styles';
 import InputField from '../InputField/InputField';
-import SearchField from './SearchField/SearchField';
 import { ErrorMessage } from '../InputField/InputField.styles';
+import SearchField from './SearchField/SearchField';
 import {
   DropdownIcon,
   DropdownItem,
@@ -25,6 +27,7 @@ function SelectField({
   label,
   error,
   setErrors,
+  genderStats,
 }) {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(value || '');
@@ -71,7 +74,18 @@ function SelectField({
       return;
     }
 
-    handleSelect((prev) => ({ ...prev, [name]: option }));
+    if (name === 'gender') {
+      if (genderStats[option] <= 0) {
+        toast.error(
+          `We're sorry, but we have reached the maximum number of ${option} participants`,
+        );
+        setSelectedOption('');
+        handleSelect((prev) => ({ ...prev, [name]: '' }));
+        return;
+      } else {
+        handleSelect((prev) => ({ ...prev, [name]: option }));
+      }
+    }
   };
 
   useEffect(() => {

diff --git a/src/config/content/Registration/details.js b/src/config/content/Registration/details.js
@@ -424,3 +424,9 @@ export const undertakingContent = {
 
 export const QrImgUrl =
   'https://res.cloudinary.com/dfe8sdlkc/image/upload/v1729884328/85002429435_sbi_gt1in2.webp';
+
+export const innoOrgID = '671bb67e578281c65287a545';
+export const maxRegistrations = {
+  MALE: 748,
+  FEMALE: 248,
+};
diff --git a/src/context/auth-context.jsx b/src/context/auth-context.jsx
@@ -41,13 +41,15 @@ export const AuthProvider = ({ children }) => {
     }
   };
 
-  const handleSignOut = async () => {
+  const handleSignOut = async (showToast = true) => {
     try {
       await signOutUser();
       setUserInfo({});
       Cookies.remove('userData');
       Cookies.remove('userDataDB');
-      toast.success('Successfully signed out.');
+      if (showToast) {
+        toast.success('Successfully signed out.');
+      }
     } catch (error) {
       console.error('Error signing out:', error);
       toast.error('Error signing out. Please try again.');

diff --git a/src/firebase/auth.js b/src/firebase/auth.js
@@ -1,4 +1,5 @@
-import { signInWithPopup, GoogleAuthProvider, signOut } from 'firebase/auth';
+import { GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth';
+
 import { auth } from './firebase';
 
 export const signInWithGoogle = async () => {

diff --git a/src/graphql/queries/userQueries.js b/src/graphql/queries/userQueries.js
@@ -12,3 +12,14 @@ export const GET_USER_BY_UID = gql`
     }
   }
 `;
+
+export const GET_USERS = gql`
+  query Query($orgId: ID) {
+    user(orgID: $orgId) {
+      data {
+        college
+        gender
+      }
+    }
+  }
+`;