Publish Schedule Group by Season (Frontend)

src/components/Events/DailyEvent.jsx

@@ -0,0 +1,37 @@
+import PropTypes from 'prop-types';
+import {
+    Box,
+    Flex,
+    Text,
+    Grid,
+} from '@chakra-ui/react';
+
+const DailyEvent = ({startTime, endTime, eventTitle, location}) => {
+    return (
+        <Box bg="#F7FAFC" p={6} borderRadius="7" borderLeftWidth='10px' borderColor='#2B93D1' boxShadow='md'>
+            <Flex minWidth='max-content' alignItems='flex-start' gap='50'>
+
+
+                <Grid gap={2}>
+                    <Text>{startTime} - {endTime}</Text>
+                </Grid>
+
+
+                <Grid gap={2}>
+                    <Text fontWeight="bold">{eventTitle}</Text>
+                    <Text>{location}</Text>
+                </Grid>
+
+            </Flex>
+        </Box>
+    );
+};
+
+DailyEvent.propTypes = {
+    startTime: PropTypes.string.isRequired,
+    endTime: PropTypes.string.isRequired,
+    eventTitle: PropTypes.string.isRequired,
+    location: PropTypes.string.isRequired
+};
+
+export default DailyEvent;

src/components/Events/EventInfo.jsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import {
+    Box,
+    Text,
+    Grid,
+} from '@chakra-ui/react';
+
+const EventInfo = ({eventDate, day, startTime, endTime, location, notes}) => {
+    return (
+
+        <Box p={10}>
+            <Grid gap={7}>
+                <Grid gap={2}>
+                    <Text fontSize='2xl' fontWeight="bold">{eventDate}</Text>
+                    <Text>{day} {startTime} - {endTime}</Text>
+                </Grid>
+
+                <Grid gap={0}>
+                    <Text>{location}</Text>
+                </Grid>
+
+                <Grid gap={0}>
+                    <Text>Details:</Text>
+                    <Text>{notes != null ? "notes" : "No notes."}</Text>
+                </Grid>
+            </Grid>
+         </Box>
+    );
+};
+
+EventInfo.propTypes = {
+    eventDate: PropTypes.string.isRequired,
+    day: PropTypes.string.isRequired,
+    startTime: PropTypes.string.isRequired,
+    endTime: PropTypes.string.isRequired,
+    location: PropTypes.string.isRequired,
+    notes: PropTypes.string
+};
+
+export default EventInfo;

src/components/Events/Events.jsx

@@ -0,0 +1,32 @@
+import DailyEvent from './DailyEvent.jsx';
+import PropTypes from 'prop-types';
+
+import {
+    Grid,
+} from '@chakra-ui/react';
+
+
+const Events = ( {eventData, location} ) => {
+    return (
+
+        <Grid gap={3}>
+            {eventData.map(item => (
+                <DailyEvent
+                    key={item.id}
+                    startTime={item.startTime}
+                    endTime={item.endTime}
+                    eventTitle={item.title}
+                    location={location}
+                />
+            ))}
+        </Grid>
+
+    );
+  };
+
+Events.propTypes = {
+  eventData: PropTypes.array.isRequired,
+  location: PropTypes.string.isRequired,
+};
+
+export default Events;

src/components/Events/PublishedScheduleTable.jsx

@@ -0,0 +1,80 @@
+import { NPOBackend } from '../../utils/auth_utils.js';
+import Events from './Events.jsx';
+import EventInfo from './EventInfo.jsx';
+import PropTypes from 'prop-types';
+
+import { useEffect, useState } from 'react';
+
+
+import {
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Box
+} from '@chakra-ui/react';
+
+const PublishedScheduleTable = ({season}) => {
+  const [eventsInDay, setEventsInDay] = useState([]);
+  const seasonType = season.split(' ')[0];
+  const seasonYear = season.split(' ')[1];
+
+  useEffect(() => {
+    const renderTable = async () => {
+      const { data } = await NPOBackend.get(`/published-schedule/season?season=${seasonType}&year=${seasonYear}`);
+      setEventsInDay(data);
+    };
+    renderTable();
+
+  }, [seasonType, seasonYear]);
+
+  const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
+
+  return (
+    <Box>
+      <TableContainer> 
+        <Table variant='simple' borderWidth={1}> 
+          <Thead>
+            <Tr>
+              <Th>Info</Th>
+              <Th>Event Schedule</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+              {eventsInDay.map(item => (
+                <Tr key={item.day.id} verticalAlign={'top'}>
+                <Td>
+                  <EventInfo
+                    eventDate={item.day.eventDate} 
+                    day={dayNames[(new Date(item.day.eventDate)).getDay()]}
+                    startTime={item.day.startTime}
+                    endTime={item.day.endTime}
+                    location={item.day.location}
+                    notes={item.day.notes}
+                 />
+                </Td>
+
+                <Td>
+                  <Events 
+                    eventData={item.data}
+                    location={item.day.location}
+                  />
+                </Td>
+              </Tr>
+              ))}
+          </Tbody>
+
+        </Table>
+      </TableContainer>
+    </Box>
+  );
+};
+
+PublishedScheduleTable.propTypes = {
+  season: PropTypes.string.isRequired,
+};
+
+export default PublishedScheduleTable;

src/pages/PublishedSchedule/PublishedSchedule.jsx

@@ -1,56 +1,50 @@
 import { NPOBackend } from '../../utils/auth_utils.js';
+import PublishedScheduleTable from '../../components/Events/PublishedScheduleTable.jsx';
+
 import { useEffect, useState } from 'react';
 import {
-  Table,
-  Thead,
-  Tbody,
-  Tr,
-  Th,
-  Td,
-  // TableCaption,
-  TableContainer,
+  Box,
+  Select,
 } from '@chakra-ui/react';
 
+
 const PublishedSchedule = () => {
   // get data from database
-  const [items, setItems] = useState([]);
+  const [allSeasons, setAllSeasons] = useState([]);
+  const [selectedSeason, setSelectedSeason] = useState('');
 
   useEffect(() => {
     const renderTable = async () => {
-      const { data } = await NPOBackend.get('/published-schedule');
-      setItems(data);
+      const { data } = await NPOBackend.get('/published-schedule/all-seasons');
+      setAllSeasons(data);
     };
     renderTable();
+
   }, []);
 
   //update chakra table container accordingly
   return (
-    <TableContainer>
-      <Table variant="striped" colorScheme="blue">
-        <Thead>
-          <Tr>
-            <Th>Title</Th>
-            <Th>Host</Th>
-            <Th>Cohort Year</Th>
-            <Th>Confirmed?</Th>
-            <Th>Start Time</Th>
-            <Th>End Time</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {items.map(item => (
-            <Tr key={item.id}>
-              <Td>{item.title}</Td>
-              <Td>{item.host}</Td>
-              <Td>{item.cohort.join(', ')}</Td>
-              <Td>{String(item.confirmed)}</Td>
-              <Td>{String(item.startTime)}</Td>
-              <Td>{String(item.endTime)}</Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </Table>
-    </TableContainer>
+    <Box pt={10} pb={10} pl={100} pr={100}>
+        {/* season dropdown menu */}
+        <Select variant='unstyled' placeholder='All Seasons' onChange={() => setSelectedSeason(event.target.value)} width="20%">
+            {allSeasons.map(item => (
+              <option key={item} value={item}>{item}</option>
+            ))}
+        </Select> 
+
+        {/* tables for each season */}
+        {selectedSeason != '' ? 
+          (<PublishedScheduleTable
+            season={selectedSeason}
+          />) :  
+          (allSeasons.map(item => (
+            <PublishedScheduleTable
+              key={item}
+              season={item}
+            />
+          )))
+        }
+    </Box>
   );
 };