Merge pull request #349 from bruin-tennis-consulting/318-website-ux

318 website ux

Author: Fredenck

app/AuthWrapper.js

@@ -1,17 +1,13 @@
 'use client'
-import React, {
-  createContext,
-  useContext,
-  useEffect,
-  useState,
-  useMemo
-} from 'react'
-import { onAuthStateChanged, signOut } from 'firebase/auth'
 
+import { createContext, useContext, useEffect, useState, useMemo } from 'react'
+import { onAuthStateChanged, signOut } from 'firebase/auth'
 import { auth } from '@/app/services/initializeFirebase'
 import { getUserProfile } from '@/app/services/userInfo'
 import LandingPage from '@/app/components/LandingPage'
 import Loading from './components/Loading'
+import styles from '@/app/styles/Navbar.module.css'
+
 const AuthContext = createContext()
 
 export const AuthProvider = ({ children }) => {
@@ -36,14 +32,6 @@ export const AuthProvider = ({ children }) => {
 
   const memoizedUserProfile = useMemo(() => userProfile, [userProfile])
 
-  if (loading) {
-    return (
-      <div>
-        <Loading prompt={'Logging In...'} />
-      </div>
-    )
-  }
-
   const handleSignOut = () => {
     signOut(auth)
       .then(() => {
@@ -55,6 +43,21 @@ export const AuthProvider = ({ children }) => {
       })
   }
 
+  if (loading) {
+    return (
+      <div>
+        <div className={styles.container} style={{ marginBottom: '100px' }}>
+          <header className={styles.header}>
+            <div className={styles.titleBar}>
+              <h1 className={styles.noUnderline}>BSA | Tennis Consulting</h1>
+            </div>
+            <Loading prompt={'Logging In...'} />
+          </header>
+        </div>
+      </div>
+    )
+  }
+
   return (
     <div style={{ width: '100%' }}>
       <AuthContext.Provider

app/DataProvider.js

@@ -6,7 +6,15 @@ import React, {
   useCallback,
   useContext
 } from 'react'
-import { collection, getDocs, doc, updateDoc, addDoc } from 'firebase/firestore'
+import {
+  collection,
+  getDocs,
+  doc,
+  updateDoc,
+  addDoc,
+  query,
+  where
+} from 'firebase/firestore'
 import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
 
 import { db, storage } from '@/app/services/initializeFirebase.js'
@@ -31,36 +39,38 @@ export const DataProvider = ({ children }) => {
 
   const { userProfile } = useAuth()
 
+  // Optmized fetchMatches version
   const fetchMatches = useCallback(async () => {
-    if (userProfile && userProfile.collections) {
-      setLoading(true)
-      setError(null)
-      const allMatches = []
+    if (!userProfile?.collections?.length) return
 
-      try {
-        for (const col of userProfile.collections) {
-          const colRef = collection(db, col)
-          const querySnapshot = await getDocs(colRef)
-
-          querySnapshot.docs.forEach((doc) => {
-            const matchData = doc.data()
-            // Only add matches that are not marked as deleted
-            if (!matchData._deleted) {
-              allMatches.push({
-                id: doc.id,
-                collection: col, // Track which collection this match belongs to
-                ...matchData
-              })
-            }
-          })
-        }
+    setLoading(true)
+    setError(null)
 
-        setMatches(allMatches)
-      } catch (err) {
-        setError(err)
-      } finally {
-        setLoading(false)
-      }
+    try {
+      // Create all promises at once instead of awaiting each one sequentially
+      const collectionPromises = userProfile.collections.map(async (col) => {
+        const colRef = collection(db, col)
+        const filteredQuery = query(colRef, where('_deleted', '==', false))
+        const querySnapshot = await getDocs(filteredQuery)
+
+        // Process documents in bulk rather than in forEach
+        return querySnapshot.docs.map((doc) => ({
+          id: doc.id,
+          collection: col,
+          ...doc.data()
+        }))
+      })
+
+      // Wait for all promises to resolve
+      const matchesArrays = await Promise.all(collectionPromises)
+
+      // Flatten the array of arrays
+      setMatches(matchesArrays.flat())
+    } catch (err) {
+      console.error('Error fetching matches:', err)
+      setError(err)
+    } finally {
+      setLoading(false)
     }
   }, [userProfile])
 
@@ -110,6 +120,7 @@ export const DataProvider = ({ children }) => {
         }
         console.log(pdfUrl)
         newMatchData.pdfFile = pdfUrl
+        newMatchData._deleted = false
 
         const newMatch = {
           id: 'temp-id',