Skip to content

Commit

Permalink
feat: Show past events (#123)
Browse files Browse the repository at this point in the history 
* 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 <[email protected]>
Co-authored-by: Ray <[email protected]>
  • Loading branch information
@phoenixpereira @jsun969 @rayokamoto
3 people authored Apr 3, 2024
1 parent c4da2e7 commit 8d27da5
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 37 deletions.
47 changes: 38 additions & 9 deletions src/app/events/Events.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,29 @@ 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 (
<div className="flex justify-center">
<FancyRectangle colour="yellow" offset="8">
<div className="w-fit bg-yellow p-2">
<h2 className="text-center text-4xl font-bold text-grey md:text-6xl">
Upcoming Events
{children}
</h2>
</div>
</FancyRectangle>
</div>
);
}

function EventCard({ event, index }: { event: Event; index: number }) {
function EventCard({
event,
index,
isPastEvent,
}: {
event: Event;
index: number;
isPastEvent?: boolean;
}) {
return (
<FancyRectangle colour="white" offset="8" rounded fullWidth>
<div className="flex w-full flex-col gap-6 rounded-xl bg-white p-4 text-black md:flex-row">
Expand All @@ -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' : ''}`}
/>
<div className="grow space-y-2 md:space-y-4">
<div className="flex gap-6 font-bold">
Expand All @@ -44,7 +52,7 @@ function EventCard({ event, index }: { event: Event; index: number }) {
</div>
</div>
<div
className={`h-fit rounded-md border-[3px] border-black px-4 py-2 ${['bg-orange', 'bg-yellow', 'bg-purple'][index % 3]}`}
className={`h-fit rounded-md border-[3px] border-black px-4 py-2 ${['bg-orange', 'bg-yellow', 'bg-purple'][index % 3]} ${isPastEvent ? 'grayscale' : ''}`}
>
<div>{event.date.month}</div>
<div>{event.date.day}</div>
Expand All @@ -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 (
<section className={`${className} space-y-8`}>
<Title />
{EVENTS.map((event, i) => (
<EventCard key={i} index={i} event={event} />
))}
{UPCOMING_EVENTS.length > 0 && (
<>
<Title>Upcoming Events</Title>
{UPCOMING_EVENTS.map((event, i) => (
<EventCard key={i} index={i} event={event} />
))}
</>
)}

{PAST_EVENTS.length > 0 && (
<>
<Title>Past Events</Title>
{PAST_EVENTS.map((event, i) => (
<EventCard key={i} index={i} event={event} isPastEvent />
))}
</>
)}
</section>
);
}
56 changes: 28 additions & 28 deletions src/data/events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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!',
Expand Down

0 comments on commit 8d27da5

Please sign in to comment.