From 7e6fb90453676132b0deab049386ac1de64887cb Mon Sep 17 00:00:00 2001
From: Leo Cardozo <leonardocardozo14@gmail.com>
Date: Sun, 24 Nov 2024 22:36:14 -0800
Subject: [PATCH 01/10] added unforcedError and server and returner start
 location

---
 app/services/taggerButtonData.js | 397 ++++++++++++++++++++-----------
 1 file changed, 253 insertions(+), 144 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index 6bc1b4b..177c46c 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -222,7 +222,7 @@ export const getTaggerButtonData = (
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -230,19 +230,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '0-15')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -250,19 +255,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '15-0')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -270,19 +280,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '15-15')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -290,19 +305,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '30-0')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -310,19 +330,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '0-30')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -330,19 +355,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '30-15')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -350,19 +380,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '0-40')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -370,19 +405,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '40-0')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -390,19 +430,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '15-30')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -410,19 +455,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '30-30')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -430,19 +480,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '40-15')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -450,20 +505,25 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '15-40')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('isBreakPoint', 1)
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -471,20 +531,25 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '30-40')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('isBreakPoint', 1)
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -492,19 +557,24 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '40-30')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -512,20 +582,25 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '40-40')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Ad')
         updateActiveRow('isBreakPoint', 1)
         updateActiveRow('pointStartTime', data.videoTimestamp)
-        setCurrentPage('FirstServe')
+        setCurrentPage('ServerLocation')
       }
     },
     {
@@ -533,19 +608,44 @@ export const getTaggerButtonData = (
       action: (data) => {
         addNewRow()
         updateActiveRow('pointScore', '40-40')
-        updateActiveRow(
-          'gameScore',
-          data.table[data.activeRowIndex - 1].gameScore
-        )
-        updateActiveRow(
-          'setScore',
-          data.table[data.activeRowIndex - 1].setScore
-        )
+        if (data.activeRowIndex > 1) {
+          updateActiveRow(
+            'gameScore',
+            data.table[data.activeRowIndex - 1].gameScore
+          )
+          updateActiveRow(
+            'setScore',
+            data.table[data.activeRowIndex - 1].setScore
+          )
+        } else {
+          updateActiveRow('gameScore', '0-0')
+          updateActiveRow('setScore', '0-0')
+        }
         updateActiveRow('isPointStart', 1)
         updateActiveRow('shotInRally', 1)
         updateActiveRow('side', 'Deuce')
         updateActiveRow('isBreakPoint', 1)
         updateActiveRow('pointStartTime', data.videoTimestamp)
+        setCurrentPage('ServerLocation')
+      }
+    }
+  ],
+  ServerLocation: [
+    {
+      courtImage: true,
+      label: 'Select Server Location',
+      action: (data) => {
+        updateActiveRow('serverStartLocation', data.x)
+        setCurrentPage('ReturnerLocation')
+      }
+    }
+  ],
+  ReturnerLocation: [
+    {
+      courtImage: true,
+      label: 'Select Returner Location',
+      action: (data) => {
+        updateActiveRow('returnerStartLocation', data.x)
         setCurrentPage('FirstServe')
       }
     }
@@ -1222,6 +1322,12 @@ export const getTaggerButtonData = (
         updateActiveRow('isExcitingPoint', '1')
       }
     },
+    {
+      label: 'Unforced Error',
+      action: () => {
+        updateActiveRow('isUnforcedError', '1')
+      }
+    },
     {
       courtImage: true,
       label: 'Select Shot Result Location',
@@ -1391,6 +1497,8 @@ export const columnNames = [
   'side',
   'serverName',
   'serverFarNear',
+  'serverStartLocation',
+  'returnerStartLocation',
   'firstServeIn',
   'firstServeZone',
   'firstServeXCoord',
@@ -1420,6 +1528,7 @@ export const columnNames = [
   'isErrorWideL',
   'isErrorNet',
   'isErrorLong',
+  'isUnforcedError',
   'clientTeam',
   'Date',
   'Division',

From 76e09fbd86ea8d91f4c37778872663ccd46964e3 Mon Sep 17 00:00:00 2001
From: Leo Cardozo <leonardocardozo14@gmail.com>
Date: Mon, 25 Nov 2024 14:12:30 -0800
Subject: [PATCH 02/10] added server and returner location

---
 app/services/taggerButtonData.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/app/services/taggerButtonData.js b/app/services/taggerButtonData.js
index 177c46c..fe5cbc3 100644
--- a/app/services/taggerButtonData.js
+++ b/app/services/taggerButtonData.js
@@ -34,8 +34,6 @@ Additional Properties of 'data':
 
 let serverScore = 0
 let returnerScore = 0
-// const player1SetScore = 0
-// const player2SetScore = 0
 let player1GameScore = 0
 let player2GameScore = 0
 let isAce = false

From 43089f3e982d3a8af194a350ccc9ab354eea4f08 Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Sun, 1 Dec 2024 18:28:49 -0800
Subject: [PATCH 03/10] @routing problems

---
 app/upload-match/page.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/upload-match/page.js b/app/upload-match/page.js
index 9614b77..0c31288 100644
--- a/app/upload-match/page.js
+++ b/app/upload-match/page.js
@@ -8,8 +8,8 @@ import getTeams from '@/app/services/getTeams.js'
 import { initialSchema, uiSchema } from '@/app/services/matchSchemas.js'
 import { searchableProperties } from '@/app/services/searchableProperties.js'
 
-import { useData } from '@/app/components/DataProvider.js'
-import { useAuth } from '@/app/components/AuthWrapper.js'
+import { useData } from '@/app/DataProvider.js'
+import { useAuth } from '@/app/AuthWrapper.js'
 
 import styles from '@/app/styles/Upload.module.css'
 

From 41c277e9c66ce77037d3832b93bf31df3f763278 Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Mon, 2 Dec 2024 19:01:41 -0800
Subject: [PATCH 04/10] display pdf

---
 app/DataProvider.js          | 21 +++++++++++++++++-
 app/matches/[slug]/page.js   |  2 +-
 app/services/matchSchemas.js | 42 ++++++++++++++++++++++++++++--------
 app/upload-match/page.js     |  4 +++-
 4 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/app/DataProvider.js b/app/DataProvider.js
index 6bd7204..13e8ce7 100644
--- a/app/DataProvider.js
+++ b/app/DataProvider.js
@@ -7,8 +7,9 @@ import React, {
   useContext
 } from 'react'
 import { collection, getDocs, doc, updateDoc, addDoc } from 'firebase/firestore'
+import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'
 
-import { db } from '@/app/services/initializeFirebase.js'
+import { db, storage } from '@/app/services/initializeFirebase.js'
 import { useAuth } from '@/app/AuthWrapper.js'
 import getTeams from '@/app/services/getTeams.js'
 
@@ -92,6 +93,24 @@ export const DataProvider = ({ children }) => {
 
   const createMatch = useCallback(async (collectionName, newMatchData) => {
     try {
+      console.log(newMatchData.pdfFile)
+      let pdfUrl = null
+      if (newMatchData.pdfFile) {
+        // First, upload the PDF to Firebase Storage
+        const pdfRef = ref(storage, `match-pdfs/${newMatchData.pdfFile.name}`)
+        // const metadata = {
+        //   contentType: 'application/pdf'
+        // }
+
+        const snapshot = await uploadBytes(
+          pdfRef,
+          newMatchData.pdfFile
+          // metadata
+        )
+        pdfUrl = await getDownloadURL(snapshot.ref)
+      }
+      newMatchData.pdfFile = pdfUrl
+
       const newMatch = {
         id: 'temp-id',
         collection: collectionName,
diff --git a/app/matches/[slug]/page.js b/app/matches/[slug]/page.js
index deb8421..da53932 100644
--- a/app/matches/[slug]/page.js
+++ b/app/matches/[slug]/page.js
@@ -429,7 +429,7 @@ const MatchPage = () => {
             {showPDF ? (
               <iframe
                 className={styles.pdfView}
-                src={matchData.pdfUrl}
+                src={matchData.pdfFile}
                 width="90%"
                 height="1550"
               />
diff --git a/app/services/matchSchemas.js b/app/services/matchSchemas.js
index bfb0e68..925ffca 100644
--- a/app/services/matchSchemas.js
+++ b/app/services/matchSchemas.js
@@ -148,9 +148,13 @@ const initialSchema = {
       format: 'data-url'
     },
     pdfFile: {
-      type: 'string',
+      type: 'object',
       title: 'PDF File',
-      format: 'data-url'
+      properties: {
+        file: {
+          type: 'string'
+        }
+      }
     }
   },
   required: [
@@ -170,31 +174,51 @@ const uiSchema = {
     'ui:widget': 'file'
   },
   pdfFile: {
-    'ui:widget': 'file'
+    file: {
+      'ui:widget': 'file'
+    }
   },
   matchScore: {
     set1: {
       clientTiebreak: {
-        'ui:widget': 'updown'
+        'ui:widget': 'text',
+        'ui:options': {
+          inputType: 'number'
+        }
       },
       opponentTiebreak: {
-        'ui:widget': 'updown'
+        'ui:widget': 'text',
+        'ui:options': {
+          inputType: 'number'
+        }
       }
     },
     set2: {
       clientTiebreak: {
-        'ui:widget': 'updown'
+        'ui:widget': 'text',
+        'ui:options': {
+          inputType: 'number'
+        }
       },
       opponentTiebreak: {
-        'ui:widget': 'updown'
+        'ui:widget': 'text',
+        'ui:options': {
+          inputType: 'number'
+        }
       }
     },
     set3: {
       clientTiebreak: {
-        'ui:widget': 'updown'
+        'ui:widget': 'text',
+        'ui:options': {
+          inputType: 'number'
+        }
       },
       opponentTiebreak: {
-        'ui:widget': 'updown'
+        'ui:widget': 'text',
+        'ui:options': {
+          inputType: 'number'
+        }
       }
     }
   }
diff --git a/app/upload-match/page.js b/app/upload-match/page.js
index 0c31288..341e9b7 100644
--- a/app/upload-match/page.js
+++ b/app/upload-match/page.js
@@ -101,6 +101,7 @@ export default function UploadMatchForm() {
 
   const handleSubmit = async ({ formData }) => {
     try {
+      let published = true
       const pointsJson = formData.jsonFile
         ? JSON.parse(atob(formData.jsonFile.split(',')[1]))
         : []
@@ -109,6 +110,7 @@ export default function UploadMatchForm() {
           "You're currently uploading an UNTAGGED match. Proceed?"
         )
         if (!result) throw new Error('Upload cancelled by user.')
+        published = false
       }
       const teams = {
         clientTeam: formData.clientTeam,
@@ -161,7 +163,7 @@ export default function UploadMatchForm() {
         matchDetails,
         searchableProperties,
         version: 'v1', // Current version for new matches added
-        published: false
+        published
       })
 
       alert('Match uploaded successfully!')

From 382def846633c89de741679555fd13058916f49f Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Tue, 17 Dec 2024 16:54:13 -0800
Subject: [PATCH 05/10] correct upload and default show all matches dashboard

---
 app/DataProvider.js          | 13 ++++++-------
 app/components/Dashboard.js  | 11 ++++++++++-
 app/services/matchSchemas.js | 14 ++++----------
 app/upload-match/page.js     |  3 ++-
 package-lock.json            | 27 ++++++++-------------------
 package.json                 |  1 +
 6 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/app/DataProvider.js b/app/DataProvider.js
index 13e8ce7..1b2be2b 100644
--- a/app/DataProvider.js
+++ b/app/DataProvider.js
@@ -93,22 +93,21 @@ export const DataProvider = ({ children }) => {
 
   const createMatch = useCallback(async (collectionName, newMatchData) => {
     try {
-      console.log(newMatchData.pdfFile)
       let pdfUrl = null
       if (newMatchData.pdfFile) {
-        // First, upload the PDF to Firebase Storage
         const pdfRef = ref(storage, `match-pdfs/${newMatchData.pdfFile.name}`)
-        // const metadata = {
-        //   contentType: 'application/pdf'
-        // }
+        const metadata = {
+          contentType: 'application/pdf'
+        }
 
         const snapshot = await uploadBytes(
           pdfRef,
-          newMatchData.pdfFile
-          // metadata
+          newMatchData.pdfFile.blob,
+          metadata
         )
         pdfUrl = await getDownloadURL(snapshot.ref)
       }
+      console.log(pdfUrl)
       newMatchData.pdfFile = pdfUrl
 
       const newMatch = {
diff --git a/app/components/Dashboard.js b/app/components/Dashboard.js
index d55c06e..e2edc60 100644
--- a/app/components/Dashboard.js
+++ b/app/components/Dashboard.js
@@ -75,7 +75,16 @@ const Dashboard = () => {
     )
   }
 
-  const displayMatchSets = searchTerm ? filteredMatchSets : selectedMatchSets
+  // A: Search Results
+  // B: Carousel Results
+  // Default: All
+  const displayMatchSets = useMemo(() => {
+    if (searchTerm) return filteredMatchSets
+    if (selectedMatchSets.length > 0) return selectedMatchSets
+    return formattedMatches.map(
+      (match) => `${match.matchDate}#${match.teams.opponentTeam}`
+    )
+  }, [searchTerm, filteredMatchSets, selectedMatchSets, formattedMatches])
 
   return (
     <div className={styles.container}>
diff --git a/app/services/matchSchemas.js b/app/services/matchSchemas.js
index 925ffca..4a84d02 100644
--- a/app/services/matchSchemas.js
+++ b/app/services/matchSchemas.js
@@ -148,13 +148,9 @@ const initialSchema = {
       format: 'data-url'
     },
     pdfFile: {
-      type: 'object',
-      title: 'PDF File',
-      properties: {
-        file: {
-          type: 'string'
-        }
-      }
+      type: 'string',
+      title: 'PDF File'
+      // format: 'data-url'
     }
   },
   required: [
@@ -174,9 +170,7 @@ const uiSchema = {
     'ui:widget': 'file'
   },
   pdfFile: {
-    file: {
-      'ui:widget': 'file'
-    }
+    'ui:widget': 'file'
   },
   matchScore: {
     set1: {
diff --git a/app/upload-match/page.js b/app/upload-match/page.js
index 341e9b7..9dd3f7d 100644
--- a/app/upload-match/page.js
+++ b/app/upload-match/page.js
@@ -3,6 +3,7 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import Form from '@rjsf/core'
 import validator from '@rjsf/validator-ajv8'
+import { dataURItoBlob } from '@rjsf/utils'
 
 import getTeams from '@/app/services/getTeams.js'
 import { initialSchema, uiSchema } from '@/app/services/matchSchemas.js'
@@ -155,7 +156,7 @@ export default function UploadMatchForm() {
         sets,
         videoId: formData.videoID,
         pointsJson,
-        pdfFile: formData.pdfFile || null,
+        pdfFile: dataURItoBlob(formData.pdfFile) || null,
         teams,
         players,
         matchDate: formData.date,
diff --git a/package-lock.json b/package-lock.json
index 50692f3..e48a292 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@rjsf/core": "^5.19.3",
+        "@rjsf/utils": "^5.23.1",
         "@rjsf/validator-ajv8": "^5.19.3",
         "firebase": "^10.7.1",
         "fuse.js": "^7.0.0",
@@ -2776,10 +2777,9 @@
       }
     },
     "node_modules/@rjsf/utils": {
-      "version": "5.22.4",
-      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.22.4.tgz",
-      "integrity": "sha512-yQTdz5ryiYy258xCVthVPQ3DeaMzrRNrFcO8xvGHorp0/bLUxdTZ0iidXop49m3y8SaxxTZd398ZKWg2cqxiIA==",
-      "peer": true,
+      "version": "5.23.1",
+      "resolved": "https://registry.npmjs.org/@rjsf/utils/-/utils-5.23.1.tgz",
+      "integrity": "sha512-cXnWgUdfeWWCsTIKamMdaP8q8lfFTvJfNQ8UyQlAumU/+hQQMOzVcyd/cVOlqWyV/JyTKrQMZOuQc9yXkka9FA==",
       "dependencies": {
         "json-schema-merge-allof": "^0.8.1",
         "jsonpointer": "^5.0.1",
@@ -3852,7 +3852,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/compute-gcd/-/compute-gcd-1.2.1.tgz",
       "integrity": "sha512-TwMbxBNz0l71+8Sc4czv13h4kEqnchV9igQZBi6QUaz09dnz13juGnnaWWJTRsP3brxOoxeB4SA2WELLw1hCtg==",
-      "peer": true,
       "dependencies": {
         "validate.io-array": "^1.0.3",
         "validate.io-function": "^1.0.2",
@@ -3863,7 +3862,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/compute-lcm/-/compute-lcm-1.1.2.tgz",
       "integrity": "sha512-OFNPdQAXnQhDSKioX8/XYT6sdUlXwpeMjfd6ApxMJfyZ4GxmLR1xvMERctlYhlHwIiz6CSpBc2+qYKjHGZw4TQ==",
-      "peer": true,
       "dependencies": {
         "compute-gcd": "^1.2.1",
         "validate.io-array": "^1.0.3",
@@ -6232,7 +6230,6 @@
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/json-schema-compare/-/json-schema-compare-0.2.2.tgz",
       "integrity": "sha512-c4WYmDKyJXhs7WWvAWm3uIYnfyWFoIp+JEoX34rctVvEkMYCPGhXtvmFFXiffBbxfZsvQ0RNnV5H7GvDF5HCqQ==",
-      "peer": true,
       "dependencies": {
         "lodash": "^4.17.4"
       }
@@ -6241,7 +6238,6 @@
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/json-schema-merge-allof/-/json-schema-merge-allof-0.8.1.tgz",
       "integrity": "sha512-CTUKmIlPJbsWfzRRnOXz+0MjIqvnleIXwFTzz+t9T86HnYX/Rozria6ZVGLktAU9e+NygNljveP+yxqtQp/Q4w==",
-      "peer": true,
       "dependencies": {
         "compute-lcm": "^1.1.2",
         "json-schema-compare": "^0.2.2",
@@ -6279,7 +6275,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
       "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7395,8 +7390,7 @@
     "node_modules/react-is": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
-      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
-      "peer": true
+      "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
     },
     "node_modules/react-select": {
       "version": "5.8.3",
@@ -8525,20 +8519,17 @@
     "node_modules/validate.io-array": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/validate.io-array/-/validate.io-array-1.0.6.tgz",
-      "integrity": "sha512-DeOy7CnPEziggrOO5CZhVKJw6S3Yi7e9e65R1Nl/RTN1vTQKnzjfvks0/8kQ40FP/dsjRAOd4hxmJ7uLa6vxkg==",
-      "peer": true
+      "integrity": "sha512-DeOy7CnPEziggrOO5CZhVKJw6S3Yi7e9e65R1Nl/RTN1vTQKnzjfvks0/8kQ40FP/dsjRAOd4hxmJ7uLa6vxkg=="
     },
     "node_modules/validate.io-function": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/validate.io-function/-/validate.io-function-1.0.2.tgz",
-      "integrity": "sha512-LlFybRJEriSuBnUhQyG5bwglhh50EpTL2ul23MPIuR1odjO7XaMLFV8vHGwp7AZciFxtYOeiSCT5st+XSPONiQ==",
-      "peer": true
+      "integrity": "sha512-LlFybRJEriSuBnUhQyG5bwglhh50EpTL2ul23MPIuR1odjO7XaMLFV8vHGwp7AZciFxtYOeiSCT5st+XSPONiQ=="
     },
     "node_modules/validate.io-integer": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/validate.io-integer/-/validate.io-integer-1.0.5.tgz",
       "integrity": "sha512-22izsYSLojN/P6bppBqhgUDjCkr5RY2jd+N2a3DCAUey8ydvrZ/OkGvFPR7qfOpwR2LC5p4Ngzxz36g5Vgr/hQ==",
-      "peer": true,
       "dependencies": {
         "validate.io-number": "^1.0.3"
       }
@@ -8547,7 +8538,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/validate.io-integer-array/-/validate.io-integer-array-1.0.0.tgz",
       "integrity": "sha512-mTrMk/1ytQHtCY0oNO3dztafHYyGU88KL+jRxWuzfOmQb+4qqnWmI+gykvGp8usKZOM0H7keJHEbRaFiYA0VrA==",
-      "peer": true,
       "dependencies": {
         "validate.io-array": "^1.0.3",
         "validate.io-integer": "^1.0.4"
@@ -8556,8 +8546,7 @@
     "node_modules/validate.io-number": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/validate.io-number/-/validate.io-number-1.0.3.tgz",
-      "integrity": "sha512-kRAyotcbNaSYoDnXvb4MHg/0a1egJdLwS6oJ38TJY7aw9n93Fl/3blIXdyYvPOp55CNxywooG/3BcrwNrBpcSg==",
-      "peer": true
+      "integrity": "sha512-kRAyotcbNaSYoDnXvb4MHg/0a1egJdLwS6oJ38TJY7aw9n93Fl/3blIXdyYvPOp55CNxywooG/3BcrwNrBpcSg=="
     },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
diff --git a/package.json b/package.json
index 9b2f64b..f4883c1 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@rjsf/core": "^5.19.3",
+    "@rjsf/utils": "^5.23.1",
     "@rjsf/validator-ajv8": "^5.19.3",
     "firebase": "^10.7.1",
     "fuse.js": "^7.0.0",

From 04c5057f78b0acf2584e3398455c8b716f142a38 Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Wed, 18 Dec 2024 14:55:27 -0800
Subject: [PATCH 06/10] unfinished + duel upload

---
 app/matches/[slug]/page.js   | 4 ++--
 app/services/matchSchemas.js | 8 ++++++++
 app/upload-match/page.js     | 6 ++++--
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/app/matches/[slug]/page.js b/app/matches/[slug]/page.js
index da53932..d50751a 100644
--- a/app/matches/[slug]/page.js
+++ b/app/matches/[slug]/page.js
@@ -215,7 +215,7 @@ const MatchPage = () => {
             player2TieScores={matchData.pointsJson.map(
               (point) => point.player2TiebreakScore
             )}
-            isUnfinished={matchData.matchDetails.status === 'unfinished'}
+            isUnfinished={matchData.matchDetails.unfinished}
             displaySections={{ score: true, info: true, matchup: true }}
           />
           <div className={styles.headerRow}>
@@ -399,7 +399,7 @@ const MatchPage = () => {
                   player2TieScores={matchData.pointsJson.map(
                     (point) => point.player2TiebreakScore
                   )}
-                  isUnfinished={matchData.matchDetails.status === 'unfinished'}
+                  isUnfinished={matchData.matchDetails.unfinished}
                   displaySections={{ score: true, info: true, matchup: true }}
                 />
               </div>
diff --git a/app/services/matchSchemas.js b/app/services/matchSchemas.js
index 4a84d02..2d7802b 100644
--- a/app/services/matchSchemas.js
+++ b/app/services/matchSchemas.js
@@ -39,6 +39,14 @@ const initialSchema = {
       title: 'Date',
       format: 'date'
     },
+    unfinished: {
+      type: 'boolean',
+      title: 'Unfinished'
+    },
+    duel: {
+      type: 'boolean',
+      title: 'Duel'
+    },
     matchScore: {
       type: 'object',
       title: 'Match Score',
diff --git a/app/upload-match/page.js b/app/upload-match/page.js
index 9dd3f7d..c6e9345 100644
--- a/app/upload-match/page.js
+++ b/app/upload-match/page.js
@@ -142,7 +142,9 @@ export default function UploadMatchForm() {
         matchVenue: formData.matchVenue || null,
         round: formData.round || null,
         indoor: formData.court ? formData.court === 'Indoor' : null,
-        surface: formData.surface || null
+        surface: formData.surface || null,
+        unfinished: formData.unfinished || false,
+        duel: formData.duel || false
       }
       // const sets = parseMatchScore(formData.matchScore);
       const sets = [
@@ -156,7 +158,7 @@ export default function UploadMatchForm() {
         sets,
         videoId: formData.videoID,
         pointsJson,
-        pdfFile: dataURItoBlob(formData.pdfFile) || null,
+        pdfFile: formData.pdfFile ? dataURItoBlob(formData.pdfFile) : null,
         teams,
         players,
         matchDate: formData.date,

From 20ffbd814021b42e56be3af57bf004b67e767d6a Mon Sep 17 00:00:00 2001
From: Frederick Zhang <frederickzhang@ucla.edu>
Date: Wed, 18 Dec 2024 15:58:13 -0800
Subject: [PATCH 07/10] Event hashing: ignore date when grouping event

---
 app/components/Dashboard.js | 43 ++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/app/components/Dashboard.js b/app/components/Dashboard.js
index e2edc60..e8fe404 100644
--- a/app/components/Dashboard.js
+++ b/app/components/Dashboard.js
@@ -29,14 +29,6 @@ const Dashboard = () => {
   const formattedMatches = formatMatches(matches)
   console.log(formattedMatches)
 
-  // default show latest match: TODO BUG causes infinite re-rendering
-  // useEffect(() => {
-  //   if (formattedMatches.length > 0) {
-  //     const latestMatchKey = `${formattedMatches[0].matchDate}#${formattedMatches[0].teams.opponentTeam}`
-  //     setSelectedMatchSets([latestMatchKey])
-  //   }
-  // }, [formattedMatches])
-
   // Fuzzy search
   const fuse = useMemo(() => {
     if (!formattedMatches.length) return null
@@ -81,9 +73,17 @@ const Dashboard = () => {
   const displayMatchSets = useMemo(() => {
     if (searchTerm) return filteredMatchSets
     if (selectedMatchSets.length > 0) return selectedMatchSets
-    return formattedMatches.map(
-      (match) => `${match.matchDate}#${match.teams.opponentTeam}`
-    )
+
+    // fetch all, arr(set(matches))
+    return [
+      ...new Set(
+        formattedMatches.map((match) =>
+          match.matchDetails.duel
+            ? `${match.matchDate}#${match.teams.opponentTeam}`
+            : `_#${match.matchDetails.event}`
+        )
+      )
+    ]
   }, [searchTerm, filteredMatchSets, selectedMatchSets, formattedMatches])
 
   return (
@@ -120,7 +120,11 @@ const Dashboard = () => {
 
       <div className={styles.carousel}>
         {formattedMatches.map((match, index) => {
-          const matchKey = `${match.matchDate}#${match.teams.opponentTeam}`
+          let matchKey = `${match.matchDate}#${match.teams.opponentTeam}`
+          if (!match.matchDetails.duel) {
+            console.log('EVENT')
+            matchKey = `_#${match.matchDetails.event}`
+          }
 
           return (
             <div
@@ -145,19 +149,28 @@ const Dashboard = () => {
             const singlesMatches = formattedMatches.filter(
               (match) =>
                 match.singles &&
-                matchKey === `${match.matchDate}#${match.teams.opponentTeam}`
+                ((match.matchDetails.duel &&
+                  matchKey ===
+                    `${match.matchDate}#${match.teams.opponentTeam}`) ||
+                  (!match.matchDetails.duel &&
+                    matchKey === `_#${match.matchDetails.event}`))
             )
             const doublesMatches = formattedMatches.filter(
               (match) =>
                 !match.singles &&
-                matchKey === `${match.matchDate}#${match.teams.opponentTeam}`
+                ((match.matchDetails.duel &&
+                  matchKey ===
+                    `${match.matchDate}#${match.teams.opponentTeam}`) ||
+                  (!match.matchDetails.duel &&
+                    matchKey === `_#${match.matchDetails.event}`))
             )
+            console.log(matchKey)
             const [matchDate, matchName] = matchKey.split('#')
             return (
               <div key={index} className={styles.matchSection}>
                 <div className={styles.matchContainer}>
                   <div className={styles.matchHeader}>
-                    <h3>{`v ${matchName}`}</h3>
+                    <h3>{matchName}</h3>
                     <span className={styles.date}>{matchDate}</span>
                   </div>
                   <DashTileContainer

From e93e0613dd39339b3c9b0becb99bbb0a1bfb1ffc Mon Sep 17 00:00:00 2001
From: kesdlvi <kesdlvi12@gmail.com>
Date: Tue, 7 Jan 2025 15:38:55 -0800
Subject: [PATCH 08/10] feat: add loading placeholders for Auth Verification
 and Dashboard fetch

---
 app/AuthWrapper.js            |  8 +++-
 app/components/Dashboard.js   | 89 +++++++++++++++++++----------------
 app/components/Loading.js     | 31 ++++++++++++
 app/styles/Loading.module.css | 12 +++++
 4 files changed, 97 insertions(+), 43 deletions(-)
 create mode 100644 app/components/Loading.js
 create mode 100644 app/styles/Loading.module.css

diff --git a/app/AuthWrapper.js b/app/AuthWrapper.js
index 5089b1e..84eced7 100644
--- a/app/AuthWrapper.js
+++ b/app/AuthWrapper.js
@@ -11,7 +11,7 @@ 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'
 const AuthContext = createContext()
 
 export const AuthProvider = ({ children }) => {
@@ -37,7 +37,11 @@ export const AuthProvider = ({ children }) => {
   const memoizedUserProfile = useMemo(() => userProfile, [userProfile])
 
   if (loading) {
-    return <div>Loading...</div>
+    return (
+      <div>
+        <Loading />
+      </div>
+    )
   }
 
   const handleSignOut = () => {
diff --git a/app/components/Dashboard.js b/app/components/Dashboard.js
index e8fe404..7e079ec 100644
--- a/app/components/Dashboard.js
+++ b/app/components/Dashboard.js
@@ -10,6 +10,7 @@ import styles from '@/app/styles/Dashboard.module.css'
 import DashTileContainer from '@/app/components/DashTileContainer'
 // import getTeams from '@/app/services/getTeams.js'
 import RosterList from '@/app/components/RosterList.js'
+import Loading from './Loading'
 
 import { searchableProperties } from '@/app/services/searchableProperties.js'
 import SearchIcon from '@/public/search'
@@ -25,7 +26,9 @@ const Dashboard = () => {
   const { matches, logos } = useData()
   const [searchTerm, setSearchTerm] = useState('')
   const [selectedMatchSets, setSelectedMatchSets] = useState([])
-  console.log(matches)
+
+  console.log('matches', matches)
+  console.log(matches.length)
   const formattedMatches = formatMatches(matches)
   console.log(formattedMatches)
 
@@ -145,48 +148,52 @@ const Dashboard = () => {
 
       <div className={styles.mainContent}>
         <div className={styles.matchesSection}>
-          {displayMatchSets.map((matchKey, index) => {
-            const singlesMatches = formattedMatches.filter(
-              (match) =>
-                match.singles &&
-                ((match.matchDetails.duel &&
-                  matchKey ===
-                    `${match.matchDate}#${match.teams.opponentTeam}`) ||
-                  (!match.matchDetails.duel &&
-                    matchKey === `_#${match.matchDetails.event}`))
-            )
-            const doublesMatches = formattedMatches.filter(
-              (match) =>
-                !match.singles &&
-                ((match.matchDetails.duel &&
-                  matchKey ===
-                    `${match.matchDate}#${match.teams.opponentTeam}`) ||
-                  (!match.matchDetails.duel &&
-                    matchKey === `_#${match.matchDetails.event}`))
-            )
-            console.log(matchKey)
-            const [matchDate, matchName] = matchKey.split('#')
-            return (
-              <div key={index} className={styles.matchSection}>
-                <div className={styles.matchContainer}>
-                  <div className={styles.matchHeader}>
-                    <h3>{matchName}</h3>
-                    <span className={styles.date}>{matchDate}</span>
+          {matches.length === 0 ? (
+            <Loading />
+          ) : (
+            displayMatchSets.map((matchKey, index) => {
+              const singlesMatches = formattedMatches.filter(
+                (match) =>
+                  match.singles &&
+                  ((match.matchDetails.duel &&
+                    matchKey ===
+                      `${match.matchDate}#${match.teams.opponentTeam}`) ||
+                    (!match.matchDetails.duel &&
+                      matchKey === `_#${match.matchDetails.event}`))
+              )
+              const doublesMatches = formattedMatches.filter(
+                (match) =>
+                  !match.singles &&
+                  ((match.matchDetails.duel &&
+                    matchKey ===
+                      `${match.matchDate}#${match.teams.opponentTeam}`) ||
+                    (!match.matchDetails.duel &&
+                      matchKey === `_#${match.matchDetails.event}`))
+              )
+              const [matchDate, matchName] = matchKey.split('#')
+
+              return (
+                <div key={index} className={styles.matchSection}>
+                  <div className={styles.matchContainer}>
+                    <div className={styles.matchHeader}>
+                      <h3>{matchName}</h3>
+                      <span className={styles.date}>{matchDate}</span>
+                    </div>
+                    <DashTileContainer
+                      matches={singlesMatches}
+                      matchType="Singles"
+                      onTileClick={handleTileClick}
+                    />
+                    <DashTileContainer
+                      matches={doublesMatches}
+                      matchType="Doubles"
+                      onTileClick={handleTileClick}
+                    />
                   </div>
-                  <DashTileContainer
-                    matches={singlesMatches}
-                    matchType="Singles"
-                    onTileClick={handleTileClick}
-                  />
-                  <DashTileContainer
-                    matches={doublesMatches}
-                    matchType="Doubles"
-                    onTileClick={handleTileClick}
-                  />
                 </div>
-              </div>
-            )
-          })}
+              )
+            })
+          )}
         </div>
 
         <div className={styles.rosterContainer}>
diff --git a/app/components/Loading.js b/app/components/Loading.js
new file mode 100644
index 0000000..1dfdafd
--- /dev/null
+++ b/app/components/Loading.js
@@ -0,0 +1,31 @@
+import styles from '@/app/styles/Loading.module.css'
+
+export default function Loading() {
+  return (
+    <div className={styles.loadingContainer}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid"
+        className={styles.spinner}
+      >
+        <g>
+          <path
+            stroke="none"
+            fill="#2774ae"
+            d="M10 50A40 40 0 0 0 90 50A40 41.4 0 0 1 10 50"
+          >
+            <animateTransform
+              values="0 50 50.7;360 50 50.7"
+              keyTimes="0;1"
+              repeatCount="indefinite"
+              dur="1s"
+              type="rotate"
+              attributeName="transform"
+            />
+          </path>
+        </g>
+      </svg>
+    </div>
+  )
+}
diff --git a/app/styles/Loading.module.css b/app/styles/Loading.module.css
new file mode 100644
index 0000000..ffdc495
--- /dev/null
+++ b/app/styles/Loading.module.css
@@ -0,0 +1,12 @@
+.loadingContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.spinner {
+  width: 200px;
+  height: 200px;
+}

From d5b97deadfa72fb6f8a2d9219a588d8131900bc6 Mon Sep 17 00:00:00 2001
From: kesdlvi <kesdlvi12@gmail.com>
Date: Tue, 14 Jan 2025 20:12:18 -0800
Subject: [PATCH 09/10] Changed animation and included specific text

---
 app/AuthWrapper.js            |  2 +-
 app/components/Dashboard.js   |  4 ++--
 app/components/Loading.js     | 39 +++++++++++++++++------------------
 app/styles/Loading.module.css | 28 ++++++++++++++++++++++---
 4 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/app/AuthWrapper.js b/app/AuthWrapper.js
index 84eced7..13dd49f 100644
--- a/app/AuthWrapper.js
+++ b/app/AuthWrapper.js
@@ -39,7 +39,7 @@ export const AuthProvider = ({ children }) => {
   if (loading) {
     return (
       <div>
-        <Loading />
+        <Loading prompt = {"Logging In..."}/>
       </div>
     )
   }
diff --git a/app/components/Dashboard.js b/app/components/Dashboard.js
index 7e079ec..4c34af1 100644
--- a/app/components/Dashboard.js
+++ b/app/components/Dashboard.js
@@ -148,8 +148,8 @@ const Dashboard = () => {
 
       <div className={styles.mainContent}>
         <div className={styles.matchesSection}>
-          {matches.length === 0 ? (
-            <Loading />
+          {matches.length === 0 ? (  
+              <Loading prompt = {"Fetching Matches..."}/>
           ) : (
             displayMatchSets.map((matchKey, index) => {
               const singlesMatches = formattedMatches.filter(
diff --git a/app/components/Loading.js b/app/components/Loading.js
index 1dfdafd..17fa887 100644
--- a/app/components/Loading.js
+++ b/app/components/Loading.js
@@ -1,30 +1,29 @@
 import styles from '@/app/styles/Loading.module.css'
 
-export default function Loading() {
+export default function Loading({ prompt }) {
   return (
     <div className={styles.loadingContainer}>
       <svg
+        width="400"
+        height="400"
+        viewBox="0 0 400 400"
+        fill="none"
         xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 100 100"
-        preserveAspectRatio="xMidYMid"
-        className={styles.spinner}
       >
-        <g>
-          <path
-            stroke="none"
-            fill="#2774ae"
-            d="M10 50A40 40 0 0 0 90 50A40 41.4 0 0 1 10 50"
-          >
-            <animateTransform
-              values="0 50 50.7;360 50 50.7"
-              keyTimes="0;1"
-              repeatCount="indefinite"
-              dur="1s"
-              type="rotate"
-              attributeName="transform"
-            />
-          </path>
-        </g>
+        <circle
+          cx="200"
+          cy="200"
+          r="100"
+          stroke="#2774ae"
+          strokeWidth="6"
+          strokeLinecap="round"
+          strokeDasharray="628.32" /* Circumference of the circle */
+          strokeDashoffset="628.32" /* Initially hidden */
+          className={styles.animatedCircle}
+        />
+        <text x="200" y="350" className={styles.customText}>
+          {prompt}
+        </text>
       </svg>
     </div>
   )
diff --git a/app/styles/Loading.module.css b/app/styles/Loading.module.css
index ffdc495..019b4b2 100644
--- a/app/styles/Loading.module.css
+++ b/app/styles/Loading.module.css
@@ -4,9 +4,31 @@
   align-items: center;
   width: 100%;
   height: 100%;
+  font-family: 'DM Sans', sans-serif;
 }
 
-.spinner {
-  width: 200px;
-  height: 200px;
+.customText {
+  fill: #2774ae;
+  font-family: 'DM Sans', sans-serif;
+  font-size: 1.2rem;
+  text-anchor: middle;
+}
+
+.animatedCircle {
+  animation: animateCircle 1s linear infinite;
+}
+
+@keyframes animateCircle {
+  0% {
+    stroke-dashoffset: 628.32; /* Start hidden */
+  }
+  30% {
+    stroke-dashoffset: 314.16; /* Halfway drawn (half of the circle) */
+  }
+  75% {
+    stroke-dashoffset: -471.24;
+  }
+  100% {
+    stroke-dashoffset: -628.32; /* Fully drawn (circle completed) */
+  }
 }

From bf8646206d9d4c032d6f0423ebc24f01a18903d8 Mon Sep 17 00:00:00 2001
From: kesdlvi <kesdlvi12@gmail.com>
Date: Tue, 14 Jan 2025 20:12:48 -0800
Subject: [PATCH 10/10] Linting

---
 app/AuthWrapper.js          | 2 +-
 app/components/Dashboard.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/AuthWrapper.js b/app/AuthWrapper.js
index 13dd49f..7cb1a87 100644
--- a/app/AuthWrapper.js
+++ b/app/AuthWrapper.js
@@ -39,7 +39,7 @@ export const AuthProvider = ({ children }) => {
   if (loading) {
     return (
       <div>
-        <Loading prompt = {"Logging In..."}/>
+        <Loading prompt={'Logging In...'} />
       </div>
     )
   }
diff --git a/app/components/Dashboard.js b/app/components/Dashboard.js
index 4c34af1..8708242 100644
--- a/app/components/Dashboard.js
+++ b/app/components/Dashboard.js
@@ -148,8 +148,8 @@ const Dashboard = () => {
 
       <div className={styles.mainContent}>
         <div className={styles.matchesSection}>
-          {matches.length === 0 ? (  
-              <Loading prompt = {"Fetching Matches..."}/>
+          {matches.length === 0 ? (
+            <Loading prompt={'Fetching Matches...'} />
           ) : (
             displayMatchSets.map((matchKey, index) => {
               const singlesMatches = formattedMatches.filter(