Merge branch 'main' of https://github.com/awest25/Tennis-Video-Viewer

jerryshi042003 · Feb 7, 2024 · f8cf46c · f8cf46c
2 parents 6c2ba59 + 8398c15
commit f8cf46c
Show file tree

Hide file tree

Showing 8 changed files with 1,618 additions and 113 deletions.
diff --git a/components/FilterList.js b/components/FilterList.js
@@ -6,12 +6,15 @@ import styles from '../styles/FilterList.module.css';
 import nameMap from '../services/nameMap.js';
 
 const FilterList = ({ pointsData, filterList, setFilterList }) => {
-    const keys = Object.keys(pointsData[0] || {}).sort(); // Sort the keys array
+    const keys = Object.keys(nameMap); // Sort the keys array
     const uniqueValues = {};
 
     // Gather unique values for each key
     keys.forEach((key) => {
-        uniqueValues[key] = [...new Set(pointsData.map((point) => point[key]))].sort();
+        uniqueValues[key] = [];
+        if (pointsData && pointsData.length > 0 && pointsData.some(point => point.hasOwnProperty(key))) {
+            uniqueValues[key] = [...new Set(pointsData.map((point) => point[key]))].sort();
+        }
     });
 
     // State for the open key
@@ -74,19 +77,20 @@ const FilterList = ({ pointsData, filterList, setFilterList }) => {
                                     </strong>
                                     <ul className={styles.filterValuesList} style={{ display: openKey === key ? 'block' : 'none' }}>
                                         {uniqueValues[key].map((value) => (
-                                            <li className={styles.filterValueItem} key={value} style={{
-                                                cursor: 'pointer',
-                                                backgroundColor: isActiveFilter(key, value) ? '#8BB8E8' : ''
-                                            }}
-                                            onClick={(e) => {
-                                                    e.stopPropagation(); // Prevent the click from toggling the open key
-                                                    if (isActiveFilter(key, value)) {
-                                                        removeFilter(key, value);
-                                                    } else {
-                                                        addFilter(key, value);
-                                                    }
-                                                }}>{value}</li>
-                                        ))}
+                                            value !== '' && (
+                                                <li className={styles.filterValueItem} key={value} style={{
+                                                    cursor: 'pointer',
+                                                    backgroundColor: isActiveFilter(key, value) ? '#8BB8E8' : ''
+                                                }}
+                                                    onClick={(e) => {
+                                                        e.stopPropagation(); // Prevent the click from toggling the open key
+                                                        if (isActiveFilter(key, value)) {
+                                                            removeFilter(key, value);
+                                                        } else {
+                                                            addFilter(key, value);
+                                                        }
+                                                    }}>{value}</li>
+                                            )))}
                                     </ul>
                                 </li>
                             </div>

diff --git a/components/PointsList.js b/components/PointsList.js
@@ -4,11 +4,15 @@ import React from 'react';
 import styles from '../styles/PointsList.module.css';
 
 const PointsList = ({ pointsData, onPointSelect }) => {
+    const calculateTotalSets = (setScore) => {
+        const scores = setScore.split('-').map(Number);
+        return scores.reduce((a, b) => a + b, 0) + 1;
+    }
     return (
         <ul className={styles.pointsList}>
             {pointsData.map((point, index) => (
                 <li className={styles.pointsListItem} key={index} onClick={() => onPointSelect(point.Position)}>
-                    {point.Name}
+                    {"Score: " + point.Name + " Games: " + point.gameScore + " Set: " + calculateTotalSets(point.setScore)}
                 </li>
             ))}
         </ul>

diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js
@@ -49,4 +49,4 @@ function VideoPlayer({ videoId, setVideoObject }) {
     return <div id="player"></div>;
 }
 
-export default VideoPlayer;
+export default VideoPlayer;