From 8d27da525d4b84bf204371d12798311f2a2edbb0 Mon Sep 17 00:00:00 2001 From: Phoenix Pereira <47909638+phoenixpereira@users.noreply.github.com> Date: Wed, 3 Apr 2024 19:25:23 +1030 Subject: [PATCH] feat: Show past events (#123) * feat: add past events section * chore: fix quiz night date * chore: remove unneeded filter className * refactor: put endTime inside date object * refactor: move event functions into utils * chore: fix linting error * chore: don't show upcoming events title if they aren't any * chore: clarify event function comment * refactor(event): events list * fix(events): Ensure past events show most recent event first --------- Co-authored-by: jsun969 Co-authored-by: Ray <22254748+rayokamoto@users.noreply.github.com> --- src/app/events/Events.tsx | 47 +++++++++++++++++++++++++------- src/data/events.ts | 56 +++++++++++++++++++-------------------- 2 files changed, 66 insertions(+), 37 deletions(-) diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index c76e1bff..b054470e 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -3,13 +3,13 @@ import { EVENTS, type Event } from '@/data/events'; import Image from 'next/image'; import { FiClock, FiMapPin } from 'react-icons/fi'; -function Title() { +function Title({ children }: { children: string }) { return (

- Upcoming Events + {children}

@@ -17,7 +17,15 @@ function Title() { ); } -function EventCard({ event, index }: { event: Event; index: number }) { +function EventCard({ + event, + index, + isPastEvent, +}: { + event: Event; + index: number; + isPastEvent?: boolean; +}) { return (
@@ -26,7 +34,7 @@ function EventCard({ event, index }: { event: Event; index: number }) { alt={`${event.title}`} width={450} height={450} - className="w-full shrink-0 rounded-lg border-[3px] border-black bg-white object-contain md:w-[450px]" + className={`w-full shrink-0 rounded-lg border-[3px] border-black bg-white object-contain md:w-[450px] ${isPastEvent ? 'grayscale' : ''}`} />
@@ -44,7 +52,7 @@ function EventCard({ event, index }: { event: Event; index: number }) {
{event.date.month}
{event.date.day}
@@ -67,13 +75,34 @@ function EventCard({ event, index }: { event: Event; index: number }) { ); } +const getEventDate = (event: Event) => { + return new Date( + `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}` + ); +}; +const CURRENT_DATE = new Date(); +const UPCOMING_EVENTS = EVENTS.filter((event) => getEventDate(event) >= CURRENT_DATE); +const PAST_EVENTS = EVENTS.filter((event) => getEventDate(event) < CURRENT_DATE).reverse(); // Most recent event first export default function Events({ className }: { className?: string }) { return (
- - {EVENTS.map((event, i) => ( - <EventCard key={i} index={i} event={event} /> - ))} + {UPCOMING_EVENTS.length > 0 && ( + <> + <Title>Upcoming Events + {UPCOMING_EVENTS.map((event, i) => ( + + ))} + + )} + + {PAST_EVENTS.length > 0 && ( + <> + Past Events + {PAST_EVENTS.map((event, i) => ( + + ))} + + )}
); } diff --git a/src/data/events.ts b/src/data/events.ts index 5efb32f3..aa1a9d89 100644 --- a/src/data/events.ts +++ b/src/data/events.ts @@ -15,7 +15,7 @@ type Month = | 'DEC'; export type Event = { title: string; - date: { month: Month; day: number }; + date: { year: number; month: Month; day: number; endTime: string }; time: string; location: string; details: string; @@ -24,35 +24,35 @@ export type Event = { }; export const EVENTS: Event[] = [ - // { - // title: 'Meet and Greet', - // date: { month: 'MAR', day: 1 }, - // time: '5:00pm - 9:00pm', - // location: 'Engineering and Maths EM105', - // details: - // "Come hang out and meet the Computer Science Club's committee and members in your first week of the new academic year!\nWe have board games in collaboration with the GAMES Club and our club owned Nintendo Switch.\nFood and drinks will also be provided.", - // image: 'meet-and-greet.jpg', - // }, - // { - // title: 'Insight Into Industry', - // date: { month: 'MAR', day: 6 }, - // time: '6:00pm - 9:00pm', - // location: 'Ingkarni Wardli 715', - // details: - // 'Unsure of what jobs are available in the tech industry? Or looking to find out more about where your expertise could take you? If so, come along and gain insights into what a career in the industry might look like.', - // image: 'insight-into-industry.jpg', - // }, - // { - // title: 'Quiz Night', - // date: { month: 'MAR', day: 8 }, - // time: '6:00pm - 9:00pm', - // location: 'Ingkarni Wardli 218', - // details: 'Join us for a night of quizzical encounters! Free food and prizes to come!', - // image: 'quiz-night.jpg', - // }, + { + title: 'Meet and Greet', + date: { year: 2024, month: 'MAR', day: 1, endTime: '21:00' }, + time: '5:00pm - 9:00pm', + location: 'Engineering and Maths EM105', + details: + "Come hang out and meet the Computer Science Club's committee and members in your first week of the new academic year!\nWe have board games in collaboration with the GAMES Club and our club owned Nintendo Switch.\nFood and drinks will also be provided.", + image: 'meet-and-greet.jpg', + }, + { + title: 'Insight Into Industry', + date: { year: 2024, month: 'MAR', day: 6, endTime: '21:00' }, + time: '6:00pm - 9:00pm', + location: 'Ingkarni Wardli 715', + details: + 'Unsure of what jobs are available in the tech industry? Or looking to find out more about where your expertise could take you? If so, come along and gain insights into what a career in the industry might look like.', + image: 'insight-into-industry.jpg', + }, + { + title: 'Quiz Night', + date: { year: 2024, month: 'MAR', day: 8, endTime: '21:00' }, + time: '6:00pm - 9:00pm', + location: 'Ingkarni Wardli 218', + details: 'Join us for a night of quizzical encounters! Free food and prizes to come!', + image: 'quiz-night.jpg', + }, { title: 'Industry Night', - date: { month: 'APR', day: 2 }, + date: { year: 2024, month: 'APR', day: 2, endTime: '21:00' }, time: '6:00pm - 9:00pm', location: 'The National Wine Centre, Hickinbotham Hall', details: 'Connect with top companies and explore job opportunities in the tech industry!',