Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Show past events #123

Merged
merged 11 commits into from
Apr 3, 2024
Merged

feat: Show past events #123

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
af774d1
feat: add past events section
phoenixpereira Mar 18, 2024
e2049a4
chore: fix quiz night date
phoenixpereira Mar 18, 2024
9f8b26e
chore: remove unneeded filter className
phoenixpereira Mar 18, 2024
5f452c1
refactor: put endTime inside date object
phoenixpereira Mar 18, 2024
a169c9b
refactor: move event functions into utils
phoenixpereira Apr 2, 2024
1f28e92
Merge branch 'main' into feat/past-events
phoenixpereira Apr 2, 2024
c0cdd70
chore: fix linting error
phoenixpereira Apr 2, 2024
ff651df
chore: don't show upcoming events title if they aren't any
phoenixpereira Apr 2, 2024
df460d4
chore: clarify event function comment
phoenixpereira Apr 3, 2024
920d8ee
refactor(event): events list
jsun969 Apr 3, 2024
64d9d51
fix(events): Ensure past events show most recent event first
rayokamoto Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 42 additions & 7 deletions src/app/events/Events.tsx
View file
Open in desktop
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({ title }: { title: string }) {
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
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
{title}
</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' : ''}`}
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
/>
<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' : ''}`}
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
>
<div>{event.date.month}</div>
<div>{event.date.day}</div>
Expand All @@ -58,12 +66,39 @@ function EventCard({ event, index }: { event: Event; index: number }) {
}

export default function Events({ className }: { className?: string }) {
const currentDate = new Date(); // Current timestamp

// Convert event date and check if upcoming event
const upcomingEvents = EVENTS.filter((event) => {
const eventDate = new Date(
phoenixpereira marked this conversation as resolved.
Show resolved Hide resolved
`${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}`
);
return eventDate >= currentDate;
});

// Convert event date, check if past event and reverse events
const pastEvents = EVENTS.filter((event) => {
const eventDate = new Date(
`${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}`
);
return eventDate < currentDate;
}).reverse();

return (
<section className={`${className} space-y-8`}>
<Title />
{EVENTS.map((event, i) => (
<Title title="Upcoming Events" />
{upcomingEvents.map((event, i) => (
<EventCard key={i} index={i} event={event} />
))}

{pastEvents.length > 0 && (
<>
<Title title="Past Events" />
{pastEvents.map((event, i) => (
<EventCard key={i} index={i} event={event} isPastEvent={true} />
))}
</>
)}
</section>
);
}
44 changes: 22 additions & 22 deletions src/data/events.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,51 +15,51 @@ 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;
image: string;
};

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: '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: { month: 'MAR', day: 8 },
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!',
image: 'industry-night.jpg',
},
{
title: 'LaTeX Workshop',
date: { month: 'APR', day: 4 },
date: { year: 2024, month: 'APR', day: 4, endTime: '19:00' },
time: '5:00pm - 7:00pm',
location: 'Ingkarni Wardli 218',
details:
Expand Down
Loading