diff --git a/src/frontend/src/pages/CalendarPage/EventsTable.tsx b/src/frontend/src/pages/CalendarPage/EventsTable.tsx index 578f8880ac..e3a48e66f0 100644 --- a/src/frontend/src/pages/CalendarPage/EventsTable.tsx +++ b/src/frontend/src/pages/CalendarPage/EventsTable.tsx @@ -28,6 +28,8 @@ import EditEventModal from './Components/EditEventModal'; import { useToast } from '../../hooks/toasts.hooks'; import EditIcon from '@mui/icons-material/Edit'; import DeleteIcon from '@mui/icons-material/Delete'; +import FilterListIcon from '@mui/icons-material/FilterList'; +import FilterListOffIcon from '@mui/icons-material/FilterListOff'; import NERDeleteModal from '../../components/NERDeleteModal'; interface YourEventsHeadCells { @@ -122,6 +124,7 @@ const EventsTable: React.FC = ({ tab, yourEvents, reviewEvents, const [showEditModal, setShowEditModal] = useState(false); const [eventToDelete, setEventToDelete] = useState(undefined); + const [hidePastEvents, setHidePastEvents] = useState(true); const handleOpenClickPopup = (event: Event) => { setClickedEvent(event); @@ -226,7 +229,12 @@ const EventsTable: React.FC = ({ tab, yourEvents, reviewEvents, : []) ]; - const events = sortEvents(tab === 1 ? yourEvents : reviewEvents); + const now = new Date(); + const baseEvents = tab === 1 ? yourEvents : reviewEvents; + const filteredEvents = hidePastEvents + ? baseEvents.filter((event) => getNextMeetingTime(event).getTime() >= now.getTime()) + : baseEvents; + const events = sortEvents(filteredEvents); return ( @@ -245,9 +253,29 @@ const EventsTable: React.FC = ({ tab, yourEvents, reviewEvents, - {headCells.map((headCell) => ( - - ))} + {headCells.map((headCell) => + headCell.id === 'date' ? ( + + + + {headCell.label} + + + setHidePastEvents((prev) => !prev)} sx={{ color: 'white' }}> + {hidePastEvents ? : } + + + + + ) : ( + + ) + )} {tab === 1 && }