From f1dc2452906f2b229fb97e3d5894590544fb8ab2 Mon Sep 17 00:00:00 2001
From: ThatMegamind <udongenius@hotmail.com>
Date: Fri, 26 Apr 2024 12:54:00 -0700
Subject: [PATCH] changed double dropdown to single dropdown, visibility issue

---
 src/components/StatTable/StatTable.jsx | 126 +++++++++++++++++--------
 1 file changed, 88 insertions(+), 38 deletions(-)

diff --git a/src/components/StatTable/StatTable.jsx b/src/components/StatTable/StatTable.jsx
index 42008b7..0b3852a 100644
--- a/src/components/StatTable/StatTable.jsx
+++ b/src/components/StatTable/StatTable.jsx
@@ -2,23 +2,57 @@ import { useState, useEffect } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NPOBackend } from '../../utils/auth_utils';
-import { Select, useToast } from '@chakra-ui/react';
+import { Select } from '@chakra-ui/react';
 import './StatTable.css';
 
 const StatTable = ({ season, allSeasons }) => {
   const [stats, setStats] = useState([]);
-  const currSeason = season.split(' ')[0];
-  const currYear = season.split(' ')[1]
-  const [selectedSeason, setSelectedSeason] = useState(currSeason.toLowerCase());
-  const [selectedYear, setSelectedYear] = useState(currYear);
-  const uniqueSeasons = Array.from(new Set(allSeasons.map(season => season.split(' ')[0])));
-  const uniqueYears = Array.from(new Set(allSeasons.map(seasonYear => seasonYear.split(' ')[1])));
-  const toast = useToast();
+  // const currSeason = season.split(' ')[0];
+  // const currYear = season.split(' ')[1];
+  // const [selectedSeason, setSelectedSeason] = useState(currSeason.toLowerCase());
+  // const [selectedYear, setSelectedYear] = useState(currYear);
+  // const [allSeasons, setAllSeasons] = useState([]);
+  const [selectedSeason, setSelectedSeason] = useState('');
+  // const uniqueSeasons = Array.from(new Set(allSeasons.map(season => season.split(' ')[0])));
+  // const uniqueYears = Array.from(new Set(allSeasons.map(seasonYear => seasonYear.split(' ')[1])));
+  // const toast = useToast();
+
+  console.log(season, allSeasons);
+
+  // useEffect(() => {
+  //   const renderTable = async () => {
+  //     const { data } = await NPOBackend.get('/published-schedule/all-seasons');
+  //     if (data.indexOf(curSeason) == -1) {
+  //       data.unshift(curSeason);
+  //     }
+
+  //     setSelectedSeason(curSeason);
+
+  //     const seasonOrder = ['Fall', 'Summer', 'Spring'];
+  //     data.sort((a, b) => {
+  //       // Compare years first
+  //       if (a.split(' ')[1] !== b.split(' ')[1]) {
+  //         return b.split(' ')[1] - a.split(' ')[1];
+  //       } else {
+  //         return seasonOrder.indexOf(a.split(' ')[0]) - seasonOrder.indexOf(b.split(' ')[0]);
+  //       }
+  //     });
+
+  //     setAllSeasons(data);
+
+  //   };
+  //   renderTable();
+  // }, [curSeason]);
 
   useEffect(() => {
     const fetchStats = async () => {
       try {
-        const response = await NPOBackend.get(`/published-schedule/stats?season=${selectedSeason}&year=${selectedYear}`);
+        if (!selectedSeason) {
+          setSelectedSeason(season);
+        }
+        const curSeason = selectedSeason.split(' ')[0];
+        const curYear = selectedSeason.split(' ')[1];
+        const response = await NPOBackend.get(`/published-schedule/stats?season=${curSeason.toLowerCase()}&year=${curYear}`);
         const data = response.data;
         setStats(data);
       } catch (error) {
@@ -27,31 +61,31 @@ const StatTable = ({ season, allSeasons }) => {
     };
 
     fetchStats();
-  }, [selectedSeason, selectedYear]);
-
-  const showToast = (title, description) => {
-    toast({
-      title,
-      description,
-      status: 'success',
-      duration: 2000,
-      isClosable: true,
-      position: 'top',
-      colorScheme: 'blue'
-    });
-  };
-  
-  const handleSeasonChange = (event) => {
-    const newSeason = event.target.value;
-    setSelectedSeason(newSeason);
-    showToast('Season Changed', `${newSeason.toUpperCase()}`);
-  };
-  
-  const handleYearChange = (event) => {
-    const newYear = event.target.value;
-    setSelectedYear(newYear);
-    showToast('Year Changed', `Selected year changed to ${newYear}`);
-  };  
+  }, [selectedSeason]);
+
+  // const showToast = (title, description) => {
+  //   toast({
+  //     title,
+  //     description,
+  //     status: 'success',
+  //     duration: 2000,
+  //     isClosable: true,
+  //     position: 'top',
+  //     colorScheme: 'blue'
+  //   });
+  // };
+
+  // const handleSeasonChange = (event) => {
+  //   const newSeason = event.target.value;
+  //   setSelectedSeason(newSeason);
+  //   showToast('Season Changed', `${newSeason.toUpperCase()}`);
+  // };
+
+  // const handleYearChange = (event) => {
+  //   const newYear = event.target.value;
+  //   setSelectedYear(newYear);
+  //   showToast('Year Changed', `Selected year changed to ${newYear}`);
+  // };
 
   const transformData = () => {
     const transformedData = {};
@@ -76,7 +110,7 @@ const StatTable = ({ season, allSeasons }) => {
   return (
     <div className='container'>
       <div className='select-container'>
-        <Select variant='filled' size='md' width = '200px' marginTop='20px' marginRight='20px' transition='all 0.3s ease' value={selectedSeason} onChange={handleSeasonChange}>
+        {/* <Select variant='filled' size='md' width = '200px' marginTop='20px' marginRight='20px' transition='all 0.3s ease' value={selectedSeason} onChange={handleSeasonChange}>
           {uniqueSeasons.map((season) => (
             <option key={season} value={season.toLowerCase()}>
               {season}
@@ -89,6 +123,22 @@ const StatTable = ({ season, allSeasons }) => {
               {seasonYear}
             </option>
           ))}
+        </Select> */}
+        <Select
+          mb="3vh"
+          variant="unstyled"
+          textColor="black"
+          placeholder={allSeasons.indexOf(season) === -1 && season}
+          value={selectedSeason}
+          onChange={(e) => setSelectedSeason(e.target.value)}
+          width="23%"
+        >
+          {allSeasons.map(item => (
+              <option key={item} value={item}>
+                {item}
+              </option>
+            ))
+          }
         </Select>
       </div>
       <div className='table-container'>
@@ -98,7 +148,7 @@ const StatTable = ({ season, allSeasons }) => {
               <th>Event Type</th>
               {Object.keys(transformedStats).length > 0 &&
                 Object.keys(transformedStats[Object.keys(transformedStats)[0]]).map(subject => (
-                  <th key={subject}>{subject}</th>
+                  <th key={subject} style={{ textTransform: 'capitalize' }}>{subject}</th>
                 ))}
             </tr>
           </thead>
@@ -106,9 +156,9 @@ const StatTable = ({ season, allSeasons }) => {
             {Object.keys(transformedStats).map((eventType) => (
               <React.Fragment key={eventType}>
                 <tr className='table-data'>
-                  <td>{eventType}</td>
+                  <td style={{ textTransform: 'capitalize' }}>{eventType}</td>
                   {Object.keys(transformedStats[eventType]).map(subject => (
-                    <td key={`${eventType}-${subject}`}>{transformedStats[eventType][subject]}</td>
+                    <td key={`${eventType}-${subject}`} >{transformedStats[eventType][subject]}</td>
                   ))}
                 </tr>
               </React.Fragment>