fixed select display bug

Author: michellelin1

src/components/Events/PublishedScheduleTable.jsx

@@ -77,7 +77,7 @@ const PublishedScheduleTable = ({ season, allSeasons }) => {
         >
           Stats
         </IconButton>
-      
+
         <IconButton
           bgColor="blue.700"
           color="gray.50"
@@ -98,8 +98,9 @@ const PublishedScheduleTable = ({ season, allSeasons }) => {
       }
 
       <AddDayModal isOpenDay={isOpenDay} onCloseDay={onCloseDay} setShouldDataRevalidate={setShouldDataRevalidate}/>
-
-      <StatModal isOpen={isOpenStats} onClose={onCloseStats} season={season} allSeasons={allSeasons}/>
+      { season && allSeasons &&
+        <StatModal isOpen={isOpenStats} onClose={onCloseStats} season={season} allSeasons={allSeasons}/>
+      }
 
       <TableContainer borderWidth={1} borderRadius="10px">
         <Table variant="simple">

src/components/StatTable/StatTable.jsx

@@ -2,54 +2,16 @@ import { useState, useEffect } from 'react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NPOBackend } from '../../utils/auth_utils';
-import { Select } from '@chakra-ui/react';
+import { Box, 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 [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]);
+  const [selectedSeason, setSelectedSeason] = useState(season);
 
   useEffect(() => {
     const fetchStats = async () => {
       try {
-        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}`);
@@ -63,30 +25,6 @@ const StatTable = ({ season, allSeasons }) => {
     fetchStats();
   }, [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 = {};
 
@@ -108,30 +46,13 @@ const StatTable = ({ season, allSeasons }) => {
   const transformedStats = transformData();
 
   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}>
-          {uniqueSeasons.map((season) => (
-            <option key={season} value={season.toLowerCase()}>
-              {season}
-            </option>
-          ))}
-        </Select>
-        <Select variant='filled' size='md' width='200px' marginTop='20px' value={selectedYear} onChange={handleYearChange}>
-          {uniqueYears.map((seasonYear) => (
-            <option key={seasonYear} value={seasonYear}>
-              {seasonYear}
-            </option>
-          ))}
-        </Select> */}
+    <Box>
+      <Box mt="1rem">
         <Select
-          mb="3vh"
-          variant="unstyled"
           textColor="black"
-          placeholder={allSeasons.indexOf(season) === -1 && season}
           value={selectedSeason}
           onChange={(e) => setSelectedSeason(e.target.value)}
-          width="23%"
+          width="max-content"
         >
           {allSeasons.map(item => (
               <option key={item} value={item}>
@@ -140,7 +61,7 @@ const StatTable = ({ season, allSeasons }) => {
             ))
           }
         </Select>
-      </div>
+      </Box>
       <div className='table-container'>
         <table>
           <thead>
@@ -166,7 +87,7 @@ const StatTable = ({ season, allSeasons }) => {
           </tbody>
         </table>
       </div>
-    </div>
+    </Box>
   );
 };
 

src/pages/PublishedSchedule/StatisticsModal.jsx

@@ -4,8 +4,7 @@ import {
   ModalOverlay,
   ModalContent,
   ModalBody,
-  Button,
-  Flex,
+  ModalCloseButton,
 } from '@chakra-ui/react';
 import StatTable from '../../components/StatTable/StatTable';
 
@@ -15,14 +14,8 @@ const StatModal = ({ isOpen, onClose, season, allSeasons }) => {
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent maxWidth={'fit-content'}>
+          <ModalCloseButton />
           <ModalBody>
-            <Flex justifyContent="space-between" alignItems="center" marginBottom="0rem">
-              <Button colorScheme="blue" onClick={onClose} variant="outline">
-                Close
-              </Button>
-              <h1 style={{ textAlign: 'center', fontWeight:'normal', fontSize: '1.75rem', margin: '0 5rem 0 0' }}>Season Summary</h1>
-              <div></div>
-            </Flex>
             <StatTable season={season} allSeasons={allSeasons}/>
           </ModalBody>
         </ModalContent>