diff --git a/components/LocalizedTime.tsx b/components/LocalizedTime.tsx new file mode 100644 index 000000000..4aa078594 --- /dev/null +++ b/components/LocalizedTime.tsx @@ -0,0 +1,53 @@ +import React, { useEffect, useState } from 'react'; + +interface LocalizedTimeProps { + utcTime: string; + utcDate: string; +} + +const LocalizedTime: React.FC = ({ utcTime, utcDate }) => { + const [localized, setLocalized] = useState(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 && ( + + ({localized}) + + )} + + ); +}; + +export default LocalizedTime; diff --git a/lib/calendarUtils.ts b/lib/calendarUtils.ts index 269b7bd0a..be369fa22 100644 --- a/lib/calendarUtils.ts +++ b/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 diff --git a/pages/community/index.page.tsx b/pages/community/index.page.tsx index c93b25461..63201ec01 100644 --- a/pages/community/index.page.tsx +++ b/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) { {event.title}
- {event.time}({event.timezone}) +