diff --git a/pages/eventsPage.tsx b/pages/eventsPage.tsx index 723fe4c..93f9fc5 100644 --- a/pages/eventsPage.tsx +++ b/pages/eventsPage.tsx @@ -21,23 +21,6 @@ interface Event { banner: string; } -// interface EventClass { -// className?: string; -// } - -// const getEventClassByEvent = (event: Event): EventClass => { -// if (!event) { -// return {}; -// } -// let modifierStr = ''; -// if (event.committee) { -// modifierStr = `rbc-override-${event.committee}`; -// } -// return ({ -// className: `rbc-override-event ${modifierStr}`, -// }); -// }; - interface Props { events: Event[]; committee: string; @@ -51,25 +34,31 @@ export default function Events({ events }: Props): JSX.Element { //replace committee below const committee = vars.committee.toLowerCase(); - const filteredEvents = indexedEvents.filter( - (event) => event.committee === committee, - ); + //get today's unix timestamp + const now = new Date(); + now.setHours(0, 0, 0, 0); + const todayUnixTime = Math.floor(now.getTime() / 1000); - if (committee === 'board') { - filteredEvents.shift(); - } + //filter by committee and if event is upcoming + const filteredEvents = indexedEvents.filter((event) => { + return ( + event.committee === committee && + parseInt(event.start) / 1000 >= todayUnixTime + ); + }); return (

Events

- {/*

- Event descriptions Event descriptionsEvent descriptionsEvent - descriptionsEvent descriptionsEvent descriptions Event - descriptionsEvent descriptionsEvent descriptions -

*/}

Upcoming Events

+ {/* if there are no events, display a message */} + {filteredEvents.length === 0 && ( +
+

Stay tuned for more events!

+
+ )} {filteredEvents.map((event, index) => { const start = format(new Date(event.start), 'h:mma'); const end = format(new Date(event.end), 'h:mma'); diff --git a/styles/Events.module.scss b/styles/Events.module.scss index 87961e7..b389d28 100644 --- a/styles/Events.module.scss +++ b/styles/Events.module.scss @@ -38,6 +38,14 @@ color: vars.$committee-color; } +.message { + font-weight: 400; + font-size: 28px; + margin-left: 1rem; + margin-top: 2rem; + color: #313235; +} + .card { min-height: 200px; text-align: center;