feat: display community event times in user local timezone (#2283)

components/LocalizedTime.tsx

@@ -0,0 +1,53 @@
+import React, { useEffect, useState } from 'react';
+
+interface LocalizedTimeProps {
+  utcTime: string;
+  utcDate: string;
+}
+
+const LocalizedTime: React.FC<LocalizedTimeProps> = ({ utcTime, utcDate }) => {
+  const [localized, setLocalized] = useState<string | null>(null);
+
+  useEffect(() => {
+    try {
+      const dateStr = utcDate.replace(' ', 'T') + 'Z';
+      const date = new Date(dateStr);
+      if (isNaN(date.getTime())) return;
+
+      const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      if (userTimeZone === 'UTC' || userTimeZone === 'Etc/UTC') return;
+
+      const options: Intl.DateTimeFormatOptions = {
+        hour: '2-digit',
+        minute: '2-digit',
+        timeZoneName: 'short',
+      };
+
+      // Check if the date changed locally (e.g., event is 11 PM UTC, but 4 AM next day local)
+      if (new Date(dateStr).getUTCDate() !== date.getDate()) {
+        options.month = 'short';
+        options.day = 'numeric';
+      }
+
+      const formatted = new Intl.DateTimeFormat(undefined, options).format(
+        date,
+      );
+      setLocalized(formatted);
+    } catch (err) {
+      console.error('Error localizing time:', err);
+    }
+  }, [utcDate]);
+
+  return (
+    <>
+      {utcTime} UTC
+      {localized && (
+        <span className='text-blue-600 dark:text-blue-400 font-semibold ml-1'>
+          ({localized})
+        </span>
+      )}
+    </>
+  );
+};
+
+export default LocalizedTime;

lib/calendarUtils.ts

@@ -17,7 +17,7 @@ export function printEventsForNextWeeks(icalData: { [x: string]: any }) {
   const arrayDates = [];
   if (!icalData) {
     console.error('iCal data is empty or invalid.');
-    return;
+    return [];
   }
 
   // Calculate the range of dates for the next 12 weeks from today

pages/community/index.page.tsx

@@ -15,6 +15,7 @@ import {
   fetchRemoteICalFile,
   printEventsForNextWeeks,
 } from '../../lib/calendarUtils';
+import LocalizedTime from '~/components/LocalizedTime';
 
 export const getStaticProps: GetStaticProps = async () => {
   const PATH = 'pages/blog/posts';
@@ -46,7 +47,7 @@ export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       blogPosts,
-      datesInfo,
+      datesInfo: datesInfo ?? [],
       fallback: false,
     },
   };
@@ -286,7 +287,10 @@ export default function CommunityPages(props: any) {
                         <b className='text-blue-700'>{event.title}</b>
                         <br />
                         <span>
-                          {event.time}({event.timezone})
+                          <LocalizedTime
+                            utcTime={event.time}
+                            utcDate={event.parsedStartDate}
+                          />
                         </span>
                       </p>
                     </div>