Added cache expiry time, fixes stale cache issue for logos

.github/workflows/firebase-hosting-merge.yml

@@ -26,6 +26,9 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - name: Install Firebase CLI
+        run: npm install -g firebase-tools
+
       - name: Build
         run: npm run build
 

.github/workflows/firebase-hosting-pull-request.yml

@@ -10,10 +10,12 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - run: npm ci && npm run build
+      - name: Install Firebase CLI
+        run: npm install -g firebase-tools
       - uses: FirebaseExtended/action-hosting-deploy@v0
         with:
           repoToken: '${{ secrets.GITHUB_TOKEN }}'
           firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MATCH_VIEWING_DASHBOARD }}'
           projectId: match-viewing-dashboard
         env:
-          FIREBASE_CLI_EXPERIMENTS: webframeworks
+          FIREBASE_CLI_EXPERIMENTS: webframeworks

.gitignore

@@ -30,4 +30,6 @@ yarn-error.log*
 .env.production.local
 
 # Firebase cache
-.firebase/
+.firebase/
+
+.vscode/launch.json

app/components/Dashboard.js

@@ -40,17 +40,16 @@ const Dashboard = () => {
   // }, [formattedMatches])
 
   // Fuzzy search
-  const fuse = useMemo(
-    () =>
-      new Fuse(formattedMatches, {
-        keys: searchableProperties,
-        threshold: 0.3
-      }),
-    [formattedMatches]
-  )
+  const fuse = useMemo(() => {
+    if (!formattedMatches.length) return null
+    return new Fuse(formattedMatches, {
+      keys: searchableProperties,
+      threshold: 0.3
+    })
+  }, [formattedMatches])
 
   const filteredMatchSets = useMemo(() => {
-    if (!searchTerm) return []
+    if (!searchTerm || !fuse) return []
     const result = fuse.search(searchTerm).map((result) => {
       const match = result.item
       return `${match.matchDate}#${match.teams.opponentTeam}`

app/components/DataProvider.js

@@ -89,35 +89,39 @@ export const DataProvider = ({ children }) => {
     [fetchMatches, matches]
   )
 
-  const createMatch = useCallback(
-    async (collectionName, newMatchData) => {
-      try {
-        const newMatch = {
-          id: 'temp-id',
-          collection: collectionName,
-          ...newMatchData
-        }
-
-        setMatches((prevMatches) => [...prevMatches, newMatch])
-
-        const colRef = collection(db, collectionName)
-        await addDoc(colRef, newMatchData)
-
-        await fetchMatches()
-      } catch (err) {
-        setError(err)
-        console.error('Error creating new match:', err)
+  const createMatch = useCallback(async (collectionName, newMatchData) => {
+    try {
+      const newMatch = {
+        id: 'temp-id',
+        collection: collectionName,
+        ...newMatchData
       }
-    },
-    [fetchMatches]
-  )
+      setMatches((prevMatches) => [...prevMatches, newMatch])
+
+      // Actual Firestore addition
+      const colRef = collection(db, collectionName)
+      await addDoc(colRef, newMatchData)
+      await fetchMatches()
+    } catch (err) {
+      setError(err)
+      console.error('Error creating new match:', err)
+    }
+  }, [])
 
   const fetchLogos = useCallback(async () => {
+    // Cache expiry time, currently 24 hours
+    const CACHE_EXPIRY_MS = 24 * 60 * 60 * 1000
     const storedLogos = localStorage.getItem('teamLogos')
-    if (storedLogos) {
-      setLogos(JSON.parse(storedLogos))
-      setLogosLoading(false)
-      return
+    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)
@@ -132,6 +136,7 @@ export const DataProvider = ({ children }) => {
 
       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)
@@ -172,9 +177,6 @@ export const useData = () => {
   const { matches, logos, loading, error, refresh, updateMatch, createMatch } =
     context
 
-  useEffect(() => {
-    refresh()
-  }, [refresh])
-
+  // Optionally keep `refresh` available for manual use in components
   return { matches, logos, loading, error, refresh, updateMatch, createMatch }
 }

app/services/upload.js

@@ -11,71 +11,6 @@ import {
 } from 'firebase/firestore'
 import { ref, uploadBytes, getDownloadURL } from 'firebase/storage' // Import storage functions
 import { db, storage } from '../services/initializeFirebase.js' // Ensure storage is exported from initializeFirebase.js
-import { useData } from '../components/DataProvider.js' // Import the hook
-
-async function useUploadMatch(
-  sets,
-  videoId,
-  pointsJson,
-  pdfFile,
-  teams,
-  players,
-  matchDate,
-  singles,
-  matchDetails,
-  collectionName
-) {
-  // Use the createMatch function from the useMatchData hook
-  const { createMatch } = useData()
-  if (
-    !sets ||
-    !videoId ||
-    !teams ||
-    !players ||
-    !matchDate ||
-    !singles ||
-    !matchDetails ||
-    !collectionName
-  ) {
-    console.error('All fields are required.')
-    return // Exit the function if any field is empty
-  }
-
-  try {
-    let pdfUrl = null
-    if (pdfFile) {
-      // First, upload the PDF to Firebase Storage
-      const pdfRef = ref(storage, `match-pdfs/${pdfFile.name}`)
-      const snapshot = await uploadBytes(pdfRef, pdfFile)
-      pdfUrl = await getDownloadURL(snapshot.ref)
-    }
-
-    // untagged matches
-    let published = true
-    if (pointsJson === null) published = false
-
-    // matchName: P1 T1 vs. P2 T2
-    const matchName = `${players.client.firstName} ${players.client.lastName} ${teams.clientTeam} vs. ${players.opponent.firstName} ${players.opponent.lastName} ${teams.opponentTeam}`
-
-    await createMatch(collectionName, {
-      name: matchName,
-      videoId,
-      sets,
-      pdfUrl,
-      matchDate,
-      teams,
-      players,
-      published,
-      singles,
-      matchDetails,
-      points: pointsJson || []
-    })
-
-    console.log('Match Document uploaded successfully.')
-  } catch (e) {
-    console.error('Error uploading Match Document: ', e)
-  }
-}
 
 async function uploadTeam(teamName, logoFile) {
   if (!teamName || !logoFile) {
@@ -179,4 +114,4 @@ async function uploadPlayer(
   }
 }
 
-export { useUploadMatch, uploadTeam, uploadPlayer }
+export { uploadTeam, uploadPlayer }