Merge pull request #105 from awest25/matchTiles

Match info tiles + Logo Support (oops forgot to make a new branch for this)

app/(interactive)/matches/[slug]/page.js

@@ -10,6 +10,7 @@ import VideoPlayer from '../../../components/VideoPlayer';
 import FilterList from '../../../components/FilterList';
 import PointsList from '../../../components/PointsList';
 import ScoreBoard from '../../../components/ScoreBoard';
+import MatchTiles from '@/app/components/MatchTiles'; // delete later just for testing
 
 import { collection, getDocs } from 'firebase/firestore';
 import { db } from '../../../services/initializeFirebase';
@@ -119,6 +120,7 @@ const MatchPage = () => {
       {/* Main Content Area */}
       {matchData && (
         <>
+          <MatchTiles matchName={matchData.name} finalScore={matchData.points} clientLogo={matchData.clientLogo} opposingLogo={matchData.opponentLogo} matchDetails={matchData.matchDetails}/>
           <div className={styles.headerRow}>
             <div className={styles.titleContainer}>
               <h2>{matchData.name}</h2>

app/(interactive)/upload-video/page.js

@@ -1,7 +1,8 @@
 'use client'
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import uploadMatch from '../../services/uploadMatch.js';
+import getLogos from '@/app/services/getLogos.js';
 
 import styles from '../../styles/Upload.module.css'
 
@@ -10,59 +11,79 @@ export default function UploadVideo() {
   const [videoId, setVideoId] = useState('');
   const [jsonFile, setJsonFile] = useState(null);
   const [pdfFile, setPdfFile] = useState(null);
+  const [clientLogo, setClientLogo] = useState('arizona_state');
+  const [opponentLogo, setOpponentLogo] = useState('arizona_state');
+  const [logos, setLogos] = useState([]);
 
-  const handleMatchNameChange = (e) => {
-    setMatchName(e.target.value);
-  };
-
-  const handleVideoIdChange = (e) => {
-    setVideoId(e.target.value);
-  };
+  useEffect(() => {
+    const fetchLogos = async () => {
+      try {
+        const logos = await getLogos();
+        setLogos(logos);
+      } catch (error) {
+        console.error('Error fetching data:', error);
+      }
+    };
 
-  const handleJsonFileChange = (e) => {
-    setJsonFile(e.target.files[0]);
-  };
-
-  const handlePdfFileChange = (e) => {
-    setPdfFile(e.target.files[0]);
-  };
+    fetchLogos();
+  }, []);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    if (!matchName || !videoId || !jsonFile) {
+    if (!matchName || !videoId || !jsonFile || !clientLogo || !opponentLogo) {
       console.error("Please fill in all fields.");
       return;
     }
 
     try {
       const pointsJson = JSON.parse(await jsonFile.text());
-      await uploadMatch(matchName, videoId, pointsJson, pdfFile);
+      const clientLogoURL = logos.find((logo) => logo.name === clientLogo).downloadURL;
+      const opponentLogoURL = logos.find((logo) => logo.name === opponentLogo).downloadURL;
+      await uploadMatch(matchName, videoId, pointsJson, pdfFile, clientLogoURL, opponentLogoURL);
+      alert('done!')
     } catch (error) {
       console.error("Error uploading match:", error);
     }
   };
-
+
+  const logosOptions = useMemo(() => {
+    return logos.map((option, index) => (
+      <option key={index} value={option.name}>{option.name}</option>
+    ));
+  }, [logos]);
 
   return (
     <div className={styles.container}>
       <h1 className={styles.title}>Upload Video</h1>
       <form className={styles.form} onSubmit={handleSubmit}>
         <label>
           Match Name: 
-          <input type="text" value={matchName} onChange={handleMatchNameChange} />
+          <input type="text" value={matchName} onChange={(e) => setMatchName(e.target.value)} />
         </label>
         <label>
           Video ID: 
-          <input type="text" value={videoId} onChange={handleVideoIdChange} />
+          <input type="text" value={videoId} onChange={(e) => setVideoId(e.target.value)} />
+        </label>
+        <label>
+          Client Team: 
+          <select id="search" onChange={(e) => setClientLogo(e.target.value)}>
+            {logosOptions}
+          </select>
+        </label>
+        <label>
+          Opponent Team: 
+          <select id="search" onChange={(e) => setOpponentLogo(e.target.value)}>
+            {logosOptions}
+          </select>
         </label>
         <label>
           JSON File: 
-          <input type="file" accept=".json" onChange={handleJsonFileChange} />
+          <input type="file" accept=".json" onChange={(e) => setJsonFile(e.target.files[0])} />
         </label>
         <label>
           PDF File: 
-          <input type="file" accept="application/pdf" onChange={handlePdfFileChange} />
+          <input type="file" accept="application/pdf" onChange={(e) => setPdfFile(e.target.files[0])} />
         </label>
         <button type="submit">Upload</button>
       </form>