From af774d162294b987ef469b3e43fca555b2637e51 Mon Sep 17 00:00:00 2001 From: phoenixpereira Date: Mon, 18 Mar 2024 13:09:26 +1030 Subject: [PATCH 01/10] feat: add past events section --- src/app/events/Events.tsx | 50 +++++++++++++++++++++++++++++++++------ src/data/events.ts | 50 ++++++++++++++++++++++----------------- 2 files changed, 71 insertions(+), 29 deletions(-) diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index 06de7196..161e5117 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({ title }: { title: string }) { return (

- Upcoming Events + {title}

@@ -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 filter' : ''}`} />
@@ -44,7 +52,7 @@ function EventCard({ event, index }: { event: Event; index: number }) {
{event.date.month}
{event.date.day}
@@ -58,12 +66,40 @@ 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( + `${event.date.year} ${event.date.month} ${event.date.day} ${event.endTime}` + ); + console.log('event: ' + eventDate); + 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.endTime}` + ); + return eventDate < currentDate; + }).reverse(); + return (
- - {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> ); } diff --git a/src/data/events.ts b/src/data/events.ts index f7666919..492c6ebe 100644 --- a/src/data/events.ts +++ b/src/data/events.ts @@ -15,7 +15,8 @@ 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; @@ -23,27 +24,30 @@ 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: '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: 18 }, + endTime: '12: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!', @@ -51,7 +55,8 @@ export const EVENTS: Event[] = [ }, { 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!', @@ -59,7 +64,8 @@ export const EVENTS: Event[] = [ }, { 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: From e2049a48f4d8bf966a560643dd63e5da4dee3aca Mon Sep 17 00:00:00 2001 From: phoenixpereira <phoenixpereira99@gmail.com> Date: Mon, 18 Mar 2024 13:18:54 +1030 Subject: [PATCH 02/10] chore: fix quiz night date --- src/data/events.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/data/events.ts b/src/data/events.ts index 492c6ebe..50f3c834 100644 --- a/src/data/events.ts +++ b/src/data/events.ts @@ -46,8 +46,8 @@ export const EVENTS: Event[] = [ }, { title: 'Quiz Night', - date: { year: 2024, month: 'MAR', day: 18 }, - endTime: '12:00', + 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!', From 9f8b26ebf844120b1279fcbb765d340fb61b315c Mon Sep 17 00:00:00 2001 From: phoenixpereira <phoenixpereira99@gmail.com> Date: Mon, 18 Mar 2024 17:45:08 +1030 Subject: [PATCH 03/10] chore: remove unneeded filter className --- src/app/events/Events.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index 161e5117..1e03ed96 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -34,7 +34,7 @@ function EventCard({ 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] ${isPastEvent ? 'grayscale filter' : ''}`} + 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"> @@ -52,7 +52,7 @@ function EventCard({ </div> </div> <div - className={`h-fit rounded-md border-[3px] border-black px-4 py-2 ${['bg-orange', 'bg-yellow', 'bg-purple'][index % 3]} ${isPastEvent ? 'grayscale filter' : ''}`} + 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> From 5f452c1dfe8a7c1188fe20f03f4f7837623af9e3 Mon Sep 17 00:00:00 2001 From: phoenixpereira <phoenixpereira99@gmail.com> Date: Mon, 18 Mar 2024 17:50:28 +1030 Subject: [PATCH 04/10] refactor: put endTime inside date object --- src/app/events/Events.tsx | 5 ++--- src/data/events.ts | 18 ++++++------------ 2 files changed, 8 insertions(+), 15 deletions(-) diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index 1e03ed96..889fcdea 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -71,16 +71,15 @@ export default function Events({ className }: { className?: string }) { // Convert event date and check if upcoming event const upcomingEvents = EVENTS.filter((event) => { const eventDate = new Date( - `${event.date.year} ${event.date.month} ${event.date.day} ${event.endTime}` + `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}` ); - console.log('event: ' + eventDate); 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.endTime}` + `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}` ); return eventDate < currentDate; }).reverse(); diff --git a/src/data/events.ts b/src/data/events.ts index 50f3c834..fc655d73 100644 --- a/src/data/events.ts +++ b/src/data/events.ts @@ -15,8 +15,7 @@ type Month = | 'DEC'; export type Event = { title: string; - date: { year: number; month: Month; day: number }; - endTime: string; + date: { year: number; month: Month; day: number; endTime: string }; time: string; location: string; details: string; @@ -26,8 +25,7 @@ export type Event = { export const EVENTS: Event[] = [ { title: 'Meet and Greet', - date: { year: 2024, month: 'MAR', day: 1 }, - endTime: '21:00', + date: { year: 2024, month: 'MAR', day: 1, endTime: '21:00' }, time: '5:00pm - 9:00pm', location: 'Engineering and Maths EM105', details: @@ -36,8 +34,7 @@ export const EVENTS: Event[] = [ }, { title: 'Insight Into Industry', - date: { year: 2024, month: 'MAR', day: 6 }, - endTime: '21:00', + date: { year: 2024, month: 'MAR', day: 6, endTime: '21:00' }, time: '6:00pm - 9:00pm', location: 'Ingkarni Wardli 715', details: @@ -46,8 +43,7 @@ export const EVENTS: Event[] = [ }, { title: 'Quiz Night', - date: { year: 2024, month: 'MAR', day: 8 }, - endTime: '21:00', + 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!', @@ -55,8 +51,7 @@ export const EVENTS: Event[] = [ }, { title: 'Industry Night', - date: { year: 2024, month: 'APR', day: 2 }, - endTime: '21:00', + 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!', @@ -64,8 +59,7 @@ export const EVENTS: Event[] = [ }, { title: 'LaTeX Workshop', - date: { year: 2024, month: 'APR', day: 4 }, - endTime: '19:00', + date: { year: 2024, month: 'APR', day: 4, endTime: '19:00' }, time: '5:00pm - 7:00pm', location: 'Ingkarni Wardli 218', details: From a169c9b682d167e2c415d4c3b1118857bee323e4 Mon Sep 17 00:00:00 2001 From: phoenixpereira <phoenixpereira99@gmail.com> Date: Tue, 2 Apr 2024 21:34:50 +1030 Subject: [PATCH 05/10] refactor: move event functions into utils --- src/app/events/Events.tsx | 28 +++++++--------------------- src/utils/get-events-date.ts | 23 +++++++++++++++++++++++ 2 files changed, 30 insertions(+), 21 deletions(-) create mode 100644 src/utils/get-events-date.ts diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index 889fcdea..05ce8572 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -1,15 +1,16 @@ import FancyRectangle from '@/components/FancyRectangle'; import { EVENTS, type Event } from '@/data/events'; +import { getUpcomingEvents, getPastEvents } from '@/utils/get-events-date'; import Image from 'next/image'; import { FiClock, FiMapPin } from 'react-icons/fi'; -function Title({ title }: { title: string }) { +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"> - {title} + {children} </h2> </div> </FancyRectangle> @@ -66,34 +67,19 @@ function EventCard({ } 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( - `${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(); + const upcomingEvents = getUpcomingEvents(EVENTS); + const pastEvents = getPastEvents(EVENTS); return ( <section className={`${className} space-y-8`}> - <Title title="Upcoming Events" /> + <Title children="Upcoming Events" /> {upcomingEvents.map((event, i) => ( <EventCard key={i} index={i} event={event} /> ))} {pastEvents.length > 0 && ( <> - <Title title="Past Events" /> + <Title children="Past Events" /> {pastEvents.map((event, i) => ( <EventCard key={i} index={i} event={event} isPastEvent={true} /> ))} diff --git a/src/utils/get-events-date.ts b/src/utils/get-events-date.ts new file mode 100644 index 00000000..2e379468 --- /dev/null +++ b/src/utils/get-events-date.ts @@ -0,0 +1,23 @@ +import { Event } from '@/data/events'; + +// Convert event date and return upcoming events +export function getUpcomingEvents(EVENTS: Event[]): Event[] { + const currentDate = new Date(); + return EVENTS.filter((event) => { + const eventDate = new Date( + `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}` + ); + return eventDate >= currentDate; + }); +} + +// Convert event date and return past events in reversed order +export function getPastEvents(EVENTS: Event[]): Event[] { + const currentDate = new Date(); + return EVENTS.filter((event) => { + const eventDate = new Date( + `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}` + ); + return eventDate < currentDate; + }).reverse(); +} From c0cdd70568c5535c5b7f986235199ef742c2fd87 Mon Sep 17 00:00:00 2001 From: phoenixpereira <phoenixpereira99@gmail.com> Date: Wed, 3 Apr 2024 09:37:00 +1030 Subject: [PATCH 06/10] chore: fix linting error --- src/app/events/Events.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index 92577e5d..b2bc7a7d 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -82,14 +82,14 @@ export default function Events({ className }: { className?: string }) { return ( <section className={`${className} space-y-8`}> - <Title children="Upcoming Events" /> + <Title>{'Upcoming Events'} {upcomingEvents.map((event, i) => ( ))} {pastEvents.length > 0 && ( <> - + <Title>{'Past Events'} {pastEvents.map((event, i) => ( ))} From ff651dfe2265afbd5f75ceeacbf155c1d7f15609 Mon Sep 17 00:00:00 2001 From: phoenixpereira Date: Wed, 3 Apr 2024 09:38:19 +1030 Subject: [PATCH 07/10] chore: don't show upcoming events title if they aren't any --- src/app/events/Events.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index b2bc7a7d..3e7bd9d8 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -82,10 +82,14 @@ export default function Events({ className }: { className?: string }) { return (
- {'Upcoming Events'} - {upcomingEvents.map((event, i) => ( - - ))} + {upcomingEvents.length > 0 && ( + <> + {'Upcoming Events'} + {upcomingEvents.map((event, i) => ( + + ))} + + )} {pastEvents.length > 0 && ( <> From df460d45004c25a9786b5aa6b6b99693a1f3bd69 Mon Sep 17 00:00:00 2001 From: phoenixpereira Date: Wed, 3 Apr 2024 11:35:07 +1030 Subject: [PATCH 08/10] chore: clarify event function comment --- src/utils/get-events-date.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/utils/get-events-date.ts b/src/utils/get-events-date.ts index 2e379468..b6e40087 100644 --- a/src/utils/get-events-date.ts +++ b/src/utils/get-events-date.ts @@ -11,7 +11,7 @@ export function getUpcomingEvents(EVENTS: Event[]): Event[] { }); } -// Convert event date and return past events in reversed order +// Convert event date and return past events with the most recent event first export function getPastEvents(EVENTS: Event[]): Event[] { const currentDate = new Date(); return EVENTS.filter((event) => { From 920d8eef6f8428a645b500881565e535b84a5818 Mon Sep 17 00:00:00 2001 From: jsun969 Date: Wed, 3 Apr 2024 13:26:49 +1030 Subject: [PATCH 09/10] refactor(event): events list --- src/app/events/Events.tsx | 26 +++++++++++++++----------- src/utils/get-events-date.ts | 23 ----------------------- 2 files changed, 15 insertions(+), 34 deletions(-) delete mode 100644 src/utils/get-events-date.ts diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index 3e7bd9d8..e19227c0 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -1,6 +1,5 @@ import FancyRectangle from '@/components/FancyRectangle'; import { EVENTS, type Event } from '@/data/events'; -import { getUpcomingEvents, getPastEvents } from '@/utils/get-events-date'; import Image from 'next/image'; import { FiClock, FiMapPin } from 'react-icons/fi'; @@ -76,26 +75,31 @@ function EventCard({ ); } +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); export default function Events({ className }: { className?: string }) { - const upcomingEvents = getUpcomingEvents(EVENTS); - const pastEvents = getPastEvents(EVENTS); - return (
- {upcomingEvents.length > 0 && ( + {UPCOMING_EVENTS.length > 0 && ( <> - {'Upcoming Events'} - {upcomingEvents.map((event, i) => ( + Upcoming Events + {UPCOMING_EVENTS.map((event, i) => ( ))} )} - {pastEvents.length > 0 && ( + {PAST_EVENTS.length > 0 && ( <> - {'Past Events'} - {pastEvents.map((event, i) => ( - + Past Events + {PAST_EVENTS.map((event, i) => ( + ))} )} diff --git a/src/utils/get-events-date.ts b/src/utils/get-events-date.ts deleted file mode 100644 index b6e40087..00000000 --- a/src/utils/get-events-date.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Event } from '@/data/events'; - -// Convert event date and return upcoming events -export function getUpcomingEvents(EVENTS: Event[]): Event[] { - const currentDate = new Date(); - return EVENTS.filter((event) => { - const eventDate = new Date( - `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}` - ); - return eventDate >= currentDate; - }); -} - -// Convert event date and return past events with the most recent event first -export function getPastEvents(EVENTS: Event[]): Event[] { - const currentDate = new Date(); - return EVENTS.filter((event) => { - const eventDate = new Date( - `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}` - ); - return eventDate < currentDate; - }).reverse(); -} From 64d9d5122d134610894a11a208fbeb1e500c7801 Mon Sep 17 00:00:00 2001 From: Ray <22254748+rayokamoto@users.noreply.github.com> Date: Wed, 3 Apr 2024 19:23:25 +1030 Subject: [PATCH 10/10] fix(events): Ensure past events show most recent event first --- src/app/events/Events.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx index e19227c0..b054470e 100644 --- a/src/app/events/Events.tsx +++ b/src/app/events/Events.tsx @@ -82,7 +82,7 @@ const getEventDate = (event: Event) => { }; 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); +const PAST_EVENTS = EVENTS.filter((event) => getEventDate(event) < CURRENT_DATE).reverse(); // Most recent event first export default function Events({ className }: { className?: string }) { return (