From c8058ddcde358725788b17439c32055830a7dca6 Mon Sep 17 00:00:00 2001
From: Feng <24779889+shfc@users.noreply.github.com>
Date: Thu, 22 Aug 2024 13:12:44 +0800
Subject: [PATCH] fix: Set timezone for end time and dynamically calculate
 event end (#179)

---
 package.json              |  2 ++
 pnpm-lock.yaml            | 17 +++++++++++++++++
 src/app/events/Events.tsx | 18 ++++++++++++------
 src/data/events.ts        |  1 +
 4 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d0cf88e5..c6aaecf5 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26f300d1..c8ea43ab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       ky:
         specifier: ^1.3.0
         version: 1.3.0
+      luxon:
+        specifier: ^3.5.0
+        version: 3.5.0
       nanoid:
         specifier: ^5.0.7
         version: 5.0.7
@@ -84,6 +87,9 @@ importers:
       '@trivago/prettier-plugin-sort-imports':
         specifier: ^4.3.0
         version: 4.3.0(prettier@3.2.5)
+      '@types/luxon':
+        specifier: ^3.4.2
+        version: 3.4.2
       '@types/node':
         specifier: ^20.14.2
         version: 20.14.2
@@ -1070,6 +1076,9 @@ packages:
   '@types/long@4.0.2':
     resolution: {integrity: sha512-MqTGEo5bj5t157U6fA/BiDynNkn0YknVdh48CMPkTSpFTVmvao5UQmm7uEF6xBEo7qIMAlY/JSleYaE6VOdpaA==}
 
+  '@types/luxon@3.4.2':
+    resolution: {integrity: sha512-TifLZlFudklWlMBfhubvgqTXRzLDI5pCbGa4P8a3wPyUQSW+1xQ5eDsreP9DWHX3tjq1ke96uYG/nwundroWcA==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -2593,6 +2602,10 @@ packages:
   lru-queue@0.1.0:
     resolution: {integrity: sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==}
 
+  luxon@3.5.0:
+    resolution: {integrity: sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==}
+    engines: {node: '>=12'}
+
   map-obj@4.3.0:
     resolution: {integrity: sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==}
     engines: {node: '>=8'}
@@ -4581,6 +4594,8 @@ snapshots:
 
   '@types/long@4.0.2': {}
 
+  '@types/luxon@3.4.2': {}
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.2
@@ -6360,6 +6375,8 @@ snapshots:
     dependencies:
       es5-ext: 0.10.64
 
+  luxon@3.5.0: {}
+
   map-obj@4.3.0: {}
 
   mdast-util-from-markdown@2.0.1:
diff --git a/src/app/events/Events.tsx b/src/app/events/Events.tsx
index 74e8a321..a047724a 100644
--- a/src/app/events/Events.tsx
+++ b/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 && (
diff --git a/src/data/events.ts b/src/data/events.ts
index 94ae0928..2251ebfd 100644
--- a/src/data/events.ts
+++ b/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',