feat: localize community event times and fix serialization bug (#2283)

- Implemented LocalizedTime component using Intl API\n- Handled Next.js hydration for client-side timezone detection\n- Fixed serialization error in getStaticProps when calendar fetch fails

Author: rahul-kr-rai

components/LocalizedTime.tsx

@@ -10,23 +10,28 @@ const LocalizedTime: React.FC<LocalizedTimeProps> = ({ utcTime, utcDate }) => {
 
   useEffect(() => {
     try {
-      // Convert "YYYY-MM-DD HH:mm:ss" to ISO "YYYY-MM-DDTHH:mm:ssZ"
       const dateStr = utcDate.replace(' ', 'T') + 'Z';
       const date = new Date(dateStr);
-
       if (isNaN(date.getTime())) return;
 
       const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
-      // Don't show if user is already in UTC to avoid redundancy
       if (userTimeZone === 'UTC' || userTimeZone === 'Etc/UTC') return;
 
-      const formatted = new Intl.DateTimeFormat(undefined, {
+      const options: Intl.DateTimeFormatOptions = {
         hour: '2-digit',
         minute: '2-digit',
         timeZoneName: 'short',
-      }).format(date);
+      };
+
+      // 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);
@@ -36,7 +41,11 @@ const LocalizedTime: React.FC<LocalizedTimeProps> = ({ utcTime, utcDate }) => {
   return (
     <>
       {utcTime} UTC
-      {localized && <span> ({localized})</span>}
+      {localized && (
+        <span className='text-blue-600 dark:text-blue-400 font-semibold ml-1'>
+          ({localized})
+        </span>
+      )}
     </>
   );
 };

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

@@ -47,7 +47,7 @@ export const getStaticProps: GetStaticProps = async () => {
   return {
     props: {
       blogPosts,
-      datesInfo,
+      datesInfo: datesInfo ?? [],
       fallback: false,
     },
   };