fix: fixes for server timeout and sitecrashes.

src/components/events/EventCard.jsx

@@ -71,7 +71,6 @@ export default function EventCard({
       toast.info('Please complete your profile to register for the event')
       return
     }
-
     if (!userSrcId) {
       toast.info('Please complete your payment to register for the event')
       return

src/components/events/Events.jsx

@@ -12,7 +12,7 @@ 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 { skipToken, useSuspenseQuery, useQuery } 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'
@@ -39,10 +39,10 @@ export default function Events() {
 
   const orgId = '668bd9deff0327a608b9b6ea'
 
-  const { data: allEventsMade } = useSuspenseQuery(
-    GET_EVENTS_BY_ORGID,
-    uid ? { variables: { orgId } } : skipToken
-  )
+  const { refetch: refechEvents } = useQuery(GET_EVENTS_BY_ORGID, {
+    variables: { orgId },
+    skip: true
+  })
   const { data: soloRegistrations } = useSuspenseQuery(
     GET_EVENTS_REGISTERED,
     mongoId ? { variables: { orgId, userId: mongoId } } : skipToken
@@ -52,22 +52,37 @@ export default function Events() {
     mongoId ? { variables: { orgId, userId: mongoId } } : skipToken
   )
 
-  const { data: userDataInDb } = useSuspenseQuery(
-    GET_USER_BY_ID,
-    uid ? { variables: { uid: uid, orgId } } : skipToken
-  )
+  const { refetch: getUserInDB } = useQuery(GET_USER_BY_ID, {
+    variables: { uid: uid, orgId },
+    skip: true
+  })
+
+  async function refetchAllEvents() {
+    try {
+      const { data } = await refechEvents({ orgId })
+      if (data) {
+        getAllEvents(data.getEvents)
+      }
+    } catch (error) {
+      console.error('Error fetching events:', error)
+    }
+  }
+
+  async function refetchUserDetails() {
+    try {
+      const { data } = await getUserInDB({ uid: userInfo.uid, orgId })
+      setMongoId(data.getUser.id)
+      setUserSrcId(data.getUser.srcID)
+    } catch (error) {
+      console.error('Error fetching user data:', error)
+    }
+  }
 
   useEffect(() => {
     if (userInfo.uid) {
       setUid(userInfo.uid)
-      if (allEventsMade) {
-        getAllEvents(allEventsMade?.getEvents)
-      }
-
-      if (userDataInDb) {
-        setMongoId(userDataInDb?.getUser?.id)
-        setUserSrcId(userDataInDb?.getUser?.srcID)
-      }
+      refetchAllEvents()
+      refetchUserDetails()
       if (soloRegistrations) {
         setSoloRegistration(soloRegistrations?.eventRegistration)
       }
@@ -79,15 +94,8 @@ export default function Events() {
       const combinedRegistrations = [...(soloRegistration || []), ...(teamRegistration || [])]
       setCombinedRegistrations(combinedRegistrations)
     }
-  }, [
-    userInfo,
-    allEventsMade,
-    soloRegistrations,
-    teamRegistrations,
-    userDataInDb,
-    soloRegistration,
-    teamRegistration
-  ])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userInfo, soloRegistrations, teamRegistrations, soloRegistration, teamRegistration])
 
   async function getAllEvents(allEvents) {
     try {

src/components/marginals/Nav_Hero/ProfileMenu.jsx

@@ -3,7 +3,7 @@ import { createPortal } from 'react-dom'
 
 import propTypes from 'prop-types'
 
-import { skipToken, useSuspenseQuery } from '@apollo/client'
+import { useQuery } from '@apollo/client'
 
 import { AuthContext } from '../../../context/AuthContext'
 import { GET_USER_BY_ID } from '../../../graphQL/queries/userQueries'
@@ -19,24 +19,38 @@ function ProfileMenu({ isProfileOpen, setProfileOpen }) {
   const { userInfo } = useContext(AuthContext)
   const [uid, setUid] = useState(null)
   const [user, setUser] = useState({})
-  const { data: userDataInDb } = useSuspenseQuery(
-    GET_USER_BY_ID,
-    uid ? { variables: { uid: uid, orgId } } : skipToken
-  )
+  const [loading, setLoading] = useState(false)
+  const { refetch: refetchUser } = useQuery(GET_USER_BY_ID, {
+    variables: { uid: uid, orgId },
+    skip: true
+  })
   useEffect(() => {
     if (userInfo.uid) {
       setUid(userInfo.uid)
-      if (userDataInDb?.getUser) {
-        setUser(userDataInDb.getUser)
-      }
+      getUserData()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [userInfo, uid])
+
+  async function getUserData() {
+    setLoading(true)
+    try {
+      const { data } = await refetchUser({ uid: userInfo.uid, orgId })
+      setUser(data.getUser)
+      setLoading(false)
+    } catch (err) {
+      // console.log('Error fetching user data', err)
     }
-  }, [userInfo, userDataInDb, uid])
+  }
+
   const overlay = document.getElementById('overlay')
 
   return (
     <>
       {createPortal(
-        isProfileOpen && <ProfileMenuDropDown setProfileOpen={setProfileOpen} user={user} />,
+        isProfileOpen && (
+          <ProfileMenuDropDown setProfileOpen={setProfileOpen} user={user} loading={loading} />
+        ),
         overlay
       )}
       <div>

src/components/marginals/Nav_Hero/ProfileMenu.styles.jsx

@@ -153,6 +153,15 @@ export const PaymentButton = styled.button`
   active:scale-95
   `}
 `
+
+export const LoaderContainer = styled.div`
+  ${tw`
+  flex
+  items-center
+  justify-center
+  mb-5`}
+`
+
 export const CopyButton = styled.button`
   ${tw`
   cursor-pointer

src/components/marginals/Nav_Hero/ProfileMenuDropDown.jsx

@@ -1,4 +1,5 @@
 import { useContext } from 'react'
+import { tailspin } from 'ldrs'
 import { CopyToClipboard } from 'react-copy-to-clipboard'
 import propTypes from 'prop-types'
 import { toast } from 'react-toastify'
@@ -17,16 +18,20 @@ import {
   ProfileDropDownItem,
   Value,
   PaymentButton,
+  LoaderContainer,
   CopyButton
 } from './ProfileMenu.styles'
 
 import { DescriptionContent } from '../../../config/index'
 
 ProfileMenuDropDown.propTypes = {
   setProfileOpen: propTypes.func,
-  user: propTypes.object
+  user: propTypes.object,
+  loading: propTypes.bool
 }
-function ProfileMenuDropDown({ setProfileOpen, user }) {
+function ProfileMenuDropDown({ setProfileOpen, user, loading }) {
+  tailspin.register()
+
   const navigate = useNavigate()
   const userDetails = [
     { label: 'Name', value: user.name },
@@ -46,7 +51,11 @@ function ProfileMenuDropDown({ setProfileOpen, user }) {
         <CloseButton onClick={() => setProfileOpen(false)}>
           <img src={XIcon} alt="X" />
         </CloseButton>
-        {userDetails[0].value ? (
+        {loading ? (
+          <LoaderContainer>
+            <l-tailspin size="40" stroke="5" speed="0.9" color="#ff8911"></l-tailspin>
+          </LoaderContainer>
+        ) : userDetails[0].value ? (
           <>
             {userDetails.map((detail, index) =>
               detail.label == 'Src Id' ? (
@@ -81,7 +90,7 @@ function ProfileMenuDropDown({ setProfileOpen, user }) {
           </>
         ) : (
           <NotRegistered>
-            <Link to={'/register'}>Finalize Your Registration Now</Link>{' '}
+            You are not registered yet. Please contact the admin for registration.
           </NotRegistered>
         )}
       </ProfileDropDown>

src/components/registrationForm/RegistrationForm.jsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useState } from 'react'
 
 import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import { skipToken, useMutation, useSuspenseQuery } from '@apollo/client'
+import { useMutation, useQuery } from '@apollo/client'
 
 import { formSchema } from '../../config/content/registrationForm/formSchema'
 import {
@@ -68,14 +68,15 @@ export default function RegistrationForm() {
   const [formErrors, setFormErrors] = useState(initialFormErrors)
   const [isloading, setIsLoading] = useState(false)
   const [isLoggedIn, setIsLoggedIn] = useState(false)
+  const [userDataInDb, setUserDataInDb] = useState(null)
   const [uid, setUid] = useState(null)
   const { userInfo, handleGoogleSignIn } = useContext(AuthContext)
   const [createUser, { loading: createUserLoading, data: createUserData }] =
     useMutation(CREATE_USER)
-  const { data: userDataInDb } = useSuspenseQuery(
-    GET_USER_BY_ID,
-    uid ? { variables: { uid: uid, orgId } } : skipToken
-  )
+  const { refetch: refetchUser } = useQuery(GET_USER_BY_ID, {
+    variables: { uid: uid, orgId },
+    skip: true
+  })
 
   const navigate = useNavigate()
 
@@ -91,14 +92,25 @@ export default function RegistrationForm() {
     }
   }
 
+  async function getUserData() {
+    setIsLoading(true)
+    try {
+      const { data } = await refetchUser({ uid: userInfo.uid, orgId })
+      setUserDataInDb(data.getUser)
+      setIsLoading(false)
+    } catch (err) {
+      console.error('Error fetching user data', err)
+    }
+  }
+
   const loading = createUserLoading
 
   useEffect(() => {
     if (userInfo.uid) {
       setIsLoggedIn(true)
       setUid(userInfo.uid)
-      const userData = userDataInDb
-      if (userData?.getUser) {
+      getUserData()
+      if (userDataInDb) {
         toast.info('You have already registered!')
         navigate(`/`)
       }
@@ -110,6 +122,7 @@ export default function RegistrationForm() {
         window.location.href = '/'
       }, 2000)
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userInfo, createUserData, navigate, userDataInDb])
 
   async function handleSubmit(e) {

src/main.jsx

@@ -10,8 +10,36 @@ import { setContext } from '@apollo/client/link/context'
 import App from './App.jsx'
 import GlobalStyles from './styles/global.jsx'
 
+const MAX_RETRIES = 3
+const RETRY_TIMEOUT = 8000
+
+const customFetch = (uri, options, retries = 0) => {
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), RETRY_TIMEOUT)
+
+  return fetch(uri, { ...options, signal: controller.signal })
+    .then((response) => {
+      clearTimeout(timeoutId)
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`)
+      }
+      return response
+    })
+    .catch((error) => {
+      clearTimeout(timeoutId)
+      if (retries < MAX_RETRIES) {
+        console.log(`Retrying (${retries + 1}/${MAX_RETRIES})...`)
+        return new Promise((resolve) =>
+          setTimeout(() => resolve(customFetch(uri, options, retries + 1)), RETRY_TIMEOUT)
+        )
+      }
+      throw error
+    })
+}
+
 const httpLink = new HttpLink({
-  uri: import.meta.env.VITE_PUBLIC_APOLLO_URI
+  uri: import.meta.env.VITE_PUBLIC_APOLLO_URI,
+  fetch: customFetch
 })
 const authLink = setContext((_, { headers }) => {
   const token = localStorage.getItem('auth-token')