Merge pull request #357 from bruin-tennis-consulting/development

Development

Author: Fredenck

app/DataProvider.js

@@ -12,6 +12,7 @@ import {
   doc,
   updateDoc,
   addDoc,
+  getDoc,
   query,
   where
 } from 'firebase/firestore'
@@ -20,6 +21,7 @@ import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
 import { db, storage } from '@/app/services/initializeFirebase.js'
 import { useAuth } from '@/app/AuthWrapper.js'
 import getTeams from '@/app/services/getTeams.js'
+import { getLogoFromCache, setLogoInCache } from '@/app/services/logoCache'
 
 const DataContext = createContext()
 
@@ -39,7 +41,7 @@ export const DataProvider = ({ children }) => {
 
   const { userProfile } = useAuth()
 
-  // Optmized fetchMatches version
+  // Optimized fetchMatches version with query filtering
   const fetchMatches = useCallback(async () => {
     if (!userProfile?.collections?.length) return
 
@@ -74,6 +76,21 @@ export const DataProvider = ({ children }) => {
     }
   }, [userProfile])
 
+  // Function to fetch detailed match data including points
+  const fetchMatchDetails = useCallback(async (matchId, collectionName) => {
+    try {
+      const matchRef = doc(db, collectionName, matchId)
+      const matchDoc = await getDoc(matchRef)
+      if (matchDoc.exists()) {
+        return matchDoc.data()
+      }
+      return null
+    } catch (error) {
+      console.error('Error fetching match details:', error)
+      return null
+    }
+  }, [])
+
   const updateMatch = useCallback(
     async (matchId, updatedData) => {
       try {
@@ -143,34 +160,25 @@ export const DataProvider = ({ children }) => {
   )
 
   const fetchLogos = useCallback(async () => {
-    // Cache expiry time, currently 24 hours
-    const CACHE_EXPIRY_MS = 24 * 60 * 60 * 1000
-    const storedLogos = localStorage.getItem('teamLogos')
-    const storedTimeStamp = localStorage.getItem('teamLogosTimestamp')
-
-    if (storedLogos && storedTimeStamp) {
-      // check if cache expired
-      const cacheAge = Date.now() - parseInt(storedTimeStamp, 10)
-      if (cacheAge < CACHE_EXPIRY_MS) {
-        setLogos(JSON.parse(storedLogos))
-        setLogosLoading(false)
-        return
-      }
-    }
-
     setLogosLoading(true)
     setLogosError(null)
 
     try {
       const teams = await getTeams()
       const logosMap = teams.reduce((acc, team) => {
-        acc[team.name] = team.logoUrl
+        // Check cache first
+        const cachedLogo = getLogoFromCache(team.name)
+        if (cachedLogo) {
+          acc[team.name] = cachedLogo
+        } else {
+          acc[team.name] = team.logoUrl
+          // Cache the logo
+          setLogoInCache(team.name, team.logoUrl)
+        }
         return acc
       }, {})
 
       setLogos(logosMap)
-      localStorage.setItem('teamLogos', JSON.stringify(logosMap))
-      localStorage.setItem('teamLogosTimestamp', Date.now().toString())
     } catch (err) {
       setLogosError(err)
       console.error('Error fetching team logos:', err)
@@ -192,6 +200,7 @@ export const DataProvider = ({ children }) => {
         loading: loading || logosLoading,
         error: error || logosError,
         refresh: fetchMatches,
+        fetchMatchDetails,
         updateMatch,
         createMatch
       }}
@@ -208,9 +217,26 @@ export const useData = () => {
     throw new Error('useData must be used within a MatchDataProvider')
   }
 
-  const { matches, logos, loading, error, refresh, updateMatch, createMatch } =
-    context
+  const {
+    matches,
+    logos,
+    loading,
+    error,
+    refresh,
+    fetchMatchDetails,
+    updateMatch,
+    createMatch
+  } = context
 
   // Optionally keep `refresh` available for manual use in components
-  return { matches, logos, loading, error, refresh, updateMatch, createMatch }
+  return {
+    matches,
+    logos,
+    loading,
+    error,
+    refresh,
+    fetchMatchDetails,
+    updateMatch,
+    createMatch
+  }
 }

app/components/Dashboard.js

@@ -17,7 +17,7 @@ import { searchableProperties } from '@/app/services/searchableProperties.js'
 import SearchIcon from '@/public/search'
 
 const cleanTeamName = (teamName) => {
-  return teamName.replace(/\s*\([MmWw]\)\s*$/, '').trim()
+  return teamName ? teamName.replace(/\s*\([MmWw]\)\s*$/, '').trim() : teamName
 }
 
 const getUniqueMatches = (matches, cleanTeamName) => {
@@ -55,7 +55,7 @@ const CarouselItem = React.memo(({ match, isSelected, onClick, logo }) => {
       onClick={() => onClick(matchKey)}
     >
       <Image
-        src={imageSrc}
+        src={imageSrc || '/images/default-logo.svg'}
         loading="lazy"
         alt="Team Logo"
         width={50}
@@ -64,6 +64,13 @@ const CarouselItem = React.memo(({ match, isSelected, onClick, logo }) => {
         // Add blur placeholder for faster perceived loading
         placeholder="blur"
         blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg=="
+        onError={(e) => {
+          if (e.target.src !== '/images/default-logo.svg') {
+            e.target.src = '/images/default-logo.svg'
+          } else {
+            e.target.style.display = 'none'
+          }
+        }}
       />
       <span className={styles.matchDate}>{match.matchDate}</span>
     </div>
@@ -401,7 +408,9 @@ const Dashboard = () => {
 
               const matchName = matchKey.split('#')[1]
               const displayName =
-                matchName === '_' ? matchName : cleanTeamName(matchName)
+                matchName === '_'
+                  ? matchName
+                  : matchName.replace(/\s+\([MW]\)$/, '')
 
               const parseLocalDate = (dateString) => {
                 const [year, month, day] = dateString.split('-').map(Number)

app/components/DashboardTile.js

@@ -3,6 +3,7 @@ import Image from 'next/image'
 
 import styles from '@/app/styles/DashboardTile.module.css'
 import { useData } from '@/app/DataProvider'
+import { getLogoFromCache, setLogoInCache } from '@/app/services/logoCache'
 
 const DashboardTile = ({
   clientTeam,
@@ -53,9 +54,27 @@ const DashboardTile = ({
   }
 
   useEffect(() => {
-    setClientLogo(logos[clientTeam])
-    setOpponentLogo(logos[opponentTeam])
+    // Check cache first
+    const cachedClientLogo = getLogoFromCache(clientTeam)
+    const cachedOpponentLogo = getLogoFromCache(opponentTeam)
+
+    if (cachedClientLogo && cachedOpponentLogo) {
+      setClientLogo(cachedClientLogo)
+      setOpponentLogo(cachedOpponentLogo)
+      return
+    }
+
+    // If not in cache, use the logos from DataProvider
+    if (logos[clientTeam]) {
+      setClientLogo(logos[clientTeam])
+      setLogoInCache(clientTeam, logos[clientTeam])
+    }
+    if (logos[opponentTeam]) {
+      setOpponentLogo(logos[opponentTeam])
+      setLogoInCache(opponentTeam, logos[opponentTeam])
+    }
   }, [clientTeam, opponentTeam, logos])
+
   // Render function for scores
   const renderScore = (score, index, isPlayer1, tieScores) => {
     const lastSetIndex =
@@ -129,10 +148,17 @@ const DashboardTile = ({
           <div className={styles.playerSchoolImgcontainerhome}>
             {clientLogo ? (
               <Image
-                src={clientLogo}
+                src={clientLogo || '/images/default-logo.svg'}
                 alt={`${clientTeam} logo`}
                 width={100}
                 height={100}
+                onError={(e) => {
+                  if (e.target.src !== '/images/default-logo.svg') {
+                    e.target.src = '/images/default-logo.svg'
+                  } else {
+                    e.target.style.display = 'none'
+                  }
+                }}
               />
             ) : (
               <p>Logo not available</p>
@@ -154,10 +180,17 @@ const DashboardTile = ({
           <div className={styles.playerSchoolImgcontainer}>
             {opponentLogo ? (
               <Image
-                src={opponentLogo}
+                src={opponentLogo || '/images/default-logo.svg'}
                 alt={`${opponentTeam} logo`}
                 width={100}
                 height={100}
+                onError={(e) => {
+                  if (e.target.src !== '/images/default-logo.svg') {
+                    e.target.src = '/images/default-logo.svg'
+                  } else {
+                    e.target.style.display = 'none'
+                  }
+                }}
               />
             ) : (
               <p>Logo not available</p>

app/components/ExtendedList.js

@@ -1,9 +1,7 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import Image from 'next/image'
-
 import styles from '@/app/styles/ExtendedList.module.css'
-import getTeams from '@/app/services/getTeams.js'
-
+import { useTeamLogos } from '@/app/hooks/useTeamLogos'
 import Winner from '@/public/Winner.js'
 import Error from '@/public/Error.js'
 import DoubleFault from '@/public/DoubleFault'
@@ -16,29 +14,15 @@ const ExtendedList = ({
   onPointSelect,
   iframe
 }) => {
-  const [clientLogo, setClientLogo] = useState('')
-  const [opponentLogo, setOpponentLogo] = useState('')
+  const { clientLogo, opponentLogo, loading } = useTeamLogos(
+    clientTeam,
+    opponentTeam
+  )
 
-  useEffect(() => {
-    const fetchLogos = async () => {
-      try {
-        const allTeams = await getTeams()
-        console.log(allTeams)
-        const clientLogoURL = allTeams.find(
-          (team) => team.name === clientTeam
-        ).logoUrl
-        const opponentLogoURL = allTeams.find(
-          (team) => team.name === opponentTeam
-        ).logoUrl
-        setClientLogo(clientLogoURL)
-        setOpponentLogo(opponentLogoURL)
-      } catch (error) {
-        console.error('Error fetching data:', error)
-      }
-    }
+  if (loading) {
+    return <div>Loading logos...</div>
+  }
 
-    fetchLogos()
-  })
   const keys = [
     '',
     'serverName',
@@ -62,7 +46,6 @@ const ExtendedList = ({
   ]
 
   const Scroll = (point) => {
-    // useref
     onPointSelect(point.Position)
     if (iframe.current) {
       iframe.current.scrollIntoView({ behavior: 'smooth' })
@@ -87,49 +70,68 @@ const ExtendedList = ({
               {keys.map((key, cellIndex) => (
                 <td className={styles.TD} key={cellIndex}>
                   {cellIndex === 0 ? (
-                    <div className={styles.imageWrapper}>
+                    <div className={styles.playerSchoolImg}>
                       <Image
                         src={
                           item.player1Name === item.serverName
-                            ? clientLogo
-                            : opponentLogo
+                            ? clientLogo || '/images/default-logo.svg'
+                            : opponentLogo || '/images/default-logo.svg'
                         }
                         alt={
                           item.player1Name === item.serverName
                             ? `${clientTeam} logo`
                             : `${opponentTeam} logo`
                         }
-                        layout="fill"
-                        objectFit="contain"
                         className={styles.IMG}
+                        width={30}
+                        height={30}
+                        onError={(e) => {
+                          if (e.target.src !== '/images/default-logo.svg') {
+                            e.target.src = '/images/default-logo.svg'
+                          } else {
+                            e.target.style.display = 'none'
+                          }
+                        }}
                       />
                     </div>
-                  ) : (
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                      {cellIndex === keys.length - 2 ? (
-                        <>
-                          {item.lastShotResult === 'Winner' && <Winner />}
-                          {item.lastShotResult === 'Error' && <Error />}
-                          {item.lastShotResult === 'DoubleFault' && (
-                            <DoubleFault />
-                          )}
-                          <span style={{ marginLeft: '4px' }}>
-                            {item.lastShotResult}
-                          </span>
-                        </>
+                  ) : cellIndex === 1 ? (
+                    <div className={styles.serverIcon}>
+                      {item.serverName === item.player1Name ? (
+                        <PlayButton />
                       ) : (
-                        item[key]
+                        <PlayButton />
                       )}
                     </div>
+                  ) : cellIndex === 5 ? (
+                    <div className={styles.winnerIcon}>
+                      {item.pointWonBy === item.player1Name ? (
+                        <Winner />
+                      ) : (
+                        <Winner />
+                      )}
+                    </div>
+                  ) : cellIndex === 6 ? (
+                    <div className={styles.errorIcon}>
+                      {item.lastShotResult === 'Error' ? (
+                        <Error />
+                      ) : item.lastShotResult === 'Double Fault' ? (
+                        <DoubleFault />
+                      ) : null}
+                    </div>
+                  ) : cellIndex === 7 ? (
+                    <div className={styles.rallyCount}>{item.rallyCount}</div>
+                  ) : cellIndex === 8 ? (
+                    <button
+                      className={styles.scrollButton}
+                      onClick={() => Scroll(item)}
+                    >
+                      Go to Point
+                    </button>
+                  ) : (
+                    item[key]
                   )}
                 </td>
               ))}
-
-              <td className={styles.TD2}>
-                <button className={styles.button} onClick={() => Scroll(item)}>
-                  <PlayButton />
-                </button>
-              </td>
             </tr>
           ))}
         </tbody>