fix: Set timezone for end time and dynamically calculate event end (#179

)

package.json

@@ -25,6 +25,7 @@
     "drizzle-zod": "^0.5.1",
     "just-submit": "^0.0.7",
     "ky": "^1.3.0",
+    "luxon": "^3.5.0",
     "nanoid": "^5.0.7",
     "next": "14.2.3",
     "react": "^18.3.1",
@@ -42,6 +43,7 @@
   "devDependencies": {
     "@next/env": "^14.2.4",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/luxon": "^3.4.2",
     "@types/node": "^20.14.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

src/app/events/Events.tsx

@@ -1,5 +1,6 @@
 import FancyRectangle from '@/components/FancyRectangle';
 import { EVENTS, type Event } from '@/data/events';
+import { DateTime } from 'luxon';
 import Image from 'next/image';
 import { FiClock, FiMapPin } from 'react-icons/fi';
 
@@ -76,14 +77,19 @@ function EventCard({
 }
 
 const getEventDate = (event: Event) => {
-    return new Date(
-        `${event.date.year} ${event.date.month} ${event.date.day} ${event.date.endTime}`
-    );
+    const dateStr = `${event.date.year}-${event.date.month}-${event.date.day}T${event.date.endTime}`;
+    const eventDate = DateTime.fromFormat(dateStr, "yyyy-MMM-d'T'HH:mm", {
+        zone: 'Australia/Adelaide',
+    });
+
+    return eventDate.toJSDate();
 };
-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 }) {
+    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
+
     return (
         <section className={`${className} space-y-8`}>
             {UPCOMING_EVENTS.length > 0 && (

src/data/events.ts

@@ -23,6 +23,7 @@ export type Event = {
     image: string;
 };
 
+// Times are in Australian Central Standard Time (ACST)
 export const EVENTS: Event[] = [
     {
         title: 'Meet and Greet',