Compute deadline based on local time zone

README.md

@@ -108,7 +108,7 @@ You can see it in your web browser at http://localhost:8080/.
 
 ## Deploy on the cloud
 
-One way to deploy this on a cloud is by using [Artifact Registry](https://cloud.google.com/artifact-registry/docs) (for hosting the Docker image) and [Cloud Run](https://cloud.google.com/run?hl=en) (a serverless service by Google to run Docker containers). 
+One way to deploy this on a cloud is by using [Artifact Registry](https://cloud.google.com/artifact-registry/docs) (for hosting the Docker image) and [Cloud Run](https://cloud.google.com/run?hl=en) (a serverless service by Google to run Docker containers). See [this YouTube video](https://youtu.be/cw34KMPSt4k?si=UbzNRobNzib93uDl) for a nice intro.
 
 Make sure to:
 - create a [Google Cloud project](https://console.cloud.google.com/)

package-lock.json

@@ -40,7 +40,8 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
-        "date-fns": "^3.6.0",
+        "date-fns": "^2.30.0",
+        "date-fns-tz": "^2.0.0",
         "embla-carousel-react": "^8.3.0",
         "input-otp": "^1.2.4",
         "lucide-react": "^0.462.0",
@@ -4126,13 +4127,28 @@
       }
     },
     "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
       "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
       "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/date-fns-tz": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
+      "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": "2.x"
       }
     },
     "node_modules/debug": {

package.json

@@ -43,7 +43,8 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
-    "date-fns": "^3.6.0",
+    "date-fns": "^2.30.0",
+    "date-fns-tz": "^2.0.0",
     "embla-carousel-react": "^8.3.0",
     "input-otp": "^1.2.4",
     "lucide-react": "^0.462.0",

src/components/ConferenceCard.tsx

@@ -3,6 +3,7 @@ import { Conference } from "@/types/conference";
 import { formatDistanceToNow, parseISO, isValid, isPast } from "date-fns";
 import ConferenceDialog from "./ConferenceDialog";
 import { useState } from "react";
+import { getDeadlineInLocalTime } from '@/utils/dateUtils';
 
 const ConferenceCard = ({
   title,
@@ -21,11 +22,27 @@ const ConferenceCard = ({
   ...conferenceProps
 }: Conference) => {
   const [dialogOpen, setDialogOpen] = useState(false);
-  const deadlineDate = deadline && deadline !== 'TBD' ? parseISO(deadline) : null;
-  const isPastDeadline = deadlineDate ? isPast(deadlineDate) : false;
-  const timeRemaining = deadlineDate && !isPastDeadline
-    ? formatDistanceToNow(deadlineDate, { addSuffix: true })
-    : null;
+  const deadlineDate = getDeadlineInLocalTime(deadline, timezone);
+  
+  // Add validation before using formatDistanceToNow
+  const getTimeRemaining = () => {
+    if (!deadlineDate || !isValid(deadlineDate)) {
+      return 'TBD';
+    }
+    
+    if (isPast(deadlineDate)) {
+      return 'Deadline passed';
+    }
+    
+    try {
+      return formatDistanceToNow(deadlineDate, { addSuffix: true });
+    } catch (error) {
+      console.error('Error formatting time remaining:', error);
+      return 'Invalid date';
+    }
+  };
+
+  const timeRemaining = getTimeRemaining();
 
   // Create location string by concatenating city and country
   const location = [city, country].filter(Boolean).join(", ");
@@ -33,10 +50,15 @@ const ConferenceCard = ({
   // Determine countdown color based on days remaining
   const getCountdownColor = () => {
     if (!deadlineDate || !isValid(deadlineDate)) return "text-neutral-600";
-    const daysRemaining = Math.ceil((deadlineDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
-    if (daysRemaining <= 7) return "text-red-600";
-    if (daysRemaining <= 30) return "text-orange-600";
-    return "text-green-600";
+    try {
+      const daysRemaining = Math.ceil((deadlineDate.getTime() - new Date().getTime()) / (1000 * 60 * 60 * 24));
+      if (daysRemaining <= 7) return "text-red-600";
+      if (daysRemaining <= 30) return "text-orange-600";
+      return "text-green-600";
+    } catch (error) {
+      console.error('Error calculating countdown color:', error);
+      return "text-neutral-600";
+    }
   };
 
   const handleCardClick = (e: React.MouseEvent) => {

src/components/ConferenceDialog.tsx

@@ -16,6 +16,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useState, useEffect } from "react";
+import { getDeadlineInLocalTime } from '@/utils/dateUtils';
 
 interface ConferenceDialogProps {
   conference: Conference;
@@ -25,7 +26,7 @@ interface ConferenceDialogProps {
 
 const ConferenceDialog = ({ conference, open, onOpenChange }: ConferenceDialogProps) => {
   console.log('Conference object:', conference);
-  const deadlineDate = conference.deadline && conference.deadline !== 'TBD' ? parseISO(conference.deadline) : null;
+  const deadlineDate = getDeadlineInLocalTime(conference.deadline, conference.timezone);
   const [countdown, setCountdown] = useState<string>('');
 
   // Replace the current location string creation with this more verbose version
@@ -57,8 +58,8 @@ const ConferenceDialog = ({ conference, open, onOpenChange }: ConferenceDialogPr
         return;
       }
 
-      const now = new Date().getTime();
-      const difference = deadlineDate.getTime() - now;
+      const now = new Date();
+      const difference = deadlineDate.getTime() - now.getTime();
 
       if (difference <= 0) {
         setCountdown('Deadline passed');
@@ -73,13 +74,8 @@ const ConferenceDialog = ({ conference, open, onOpenChange }: ConferenceDialogPr
       setCountdown(`${days}d ${hours}h ${minutes}m ${seconds}s`);
     };
 
-    // Calculate immediately
     calculateTimeLeft();
-
-    // Update every second
     const timer = setInterval(calculateTimeLeft, 1000);
-
-    // Cleanup interval on component unmount
     return () => clearInterval(timer);
   }, [deadlineDate]);
 
@@ -180,6 +176,22 @@ END:VCALENDAR`;
     return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(venue || place)}`;
   };
 
+  const formatDeadlineDisplay = () => {
+    if (!deadlineDate || !isValid(deadlineDate)) return null;
+    
+    const localTZ = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    return (
+      <div className="text-sm text-neutral-500">
+        <div>{format(deadlineDate, "MMMM d, yyyy 'at' HH:mm:ss")} ({localTZ})</div>
+        {conference.timezone && conference.timezone !== localTZ && (
+          <div className="text-xs">
+            Conference timezone: {conference.timezone}
+          </div>
+        )}
+      </div>
+    );
+  };
+
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent 
@@ -278,11 +290,7 @@ END:VCALENDAR`;
               <span className={`font-medium ${getCountdownColor()}`}>
                 {countdown}
               </span>
-              {deadlineDate && isValid(deadlineDate) && (
-                <div className="text-sm text-neutral-500">
-                  {format(deadlineDate, "MMMM d, yyyy 'at' HH:mm:ss")} {conference.timezone}
-                </div>
-              )}
+              {formatDeadlineDisplay()}
             </div>
           </div>
 

src/utils/dateUtils.ts

@@ -0,0 +1,126 @@
+import { parseISO, isValid } from 'date-fns';
+import { zonedTimeToUtc, utcToZonedTime } from 'date-fns-tz';
+
+export const getDeadlineInLocalTime = (deadline: string | undefined, timezone: string | undefined): Date | null => {
+  if (!deadline || deadline === 'TBD') {
+    console.log('Early return - deadline is null or TBD:', { deadline, timezone });
+    return null;
+  }
+  
+  try {
+    console.log('Processing conference deadline:', {
+      conferenceName: 'Unknown', // We could pass this as a parameter if helpful
+      deadline,
+      timezone,
+      deadlineType: typeof deadline,
+      timezoneType: typeof timezone
+    });
+
+    // Parse the deadline string to a Date object
+    const deadlineDate = parseISO(deadline);
+    console.log('Parsed deadline date:', {
+      original: deadline,
+      parsed: deadlineDate,
+      isValid: isValid(deadlineDate),
+      timestamp: deadlineDate.getTime(),
+      toISOString: deadlineDate.toISOString()
+    });
+
+    if (!isValid(deadlineDate)) {
+      console.error('Invalid date parsed from deadline:', deadline);
+      return null;
+    }
+    
+    // Handle AoE (Anywhere on Earth) timezone
+    if (timezone === 'AoE') {
+      console.log('Converting AoE to UTC-12');
+      return new Date(deadlineDate.getTime() - 12 * 60 * 60 * 1000);
+    }
+    
+    // Handle UTC offset timezones (e.g., "UTC-12", "UTC+01", "UTC+0")
+    const normalizeTimezone = (tz: string | undefined): string => {
+      if (!tz) {
+        console.log('No timezone provided, using UTC');
+        return 'UTC';
+      }
+      
+      console.log('Normalizing timezone:', tz);
+      
+      // If it's already an IANA timezone, return as is
+      if (!tz.toUpperCase().startsWith('UTC')) {
+        console.log('Using IANA timezone:', tz);
+        return tz;
+      }
+      
+      // Convert UTC±XX to proper format
+      const match = tz.match(/^UTC([+-])(\d+)$/);
+      if (match) {
+        const [, sign, hours] = match;
+        const paddedHours = hours.padStart(2, '0');
+        const normalized = `${sign}${paddedHours}:00`;
+        console.log('Normalized UTC offset:', { original: tz, normalized });
+        return normalized;
+      }
+      
+      // Handle special case of UTC+0/UTC-0
+      if (tz === 'UTC+0' || tz === 'UTC-0' || tz === 'UTC+00' || tz === 'UTC-00') {
+        console.log('Handling UTC+0/-0 case:', tz);
+        return 'UTC';
+      }
+      
+      console.log('Falling back to UTC for timezone:', tz);
+      return 'UTC';
+    };
+
+    const normalizedTimezone = normalizeTimezone(timezone);
+    console.log('Using timezone:', { original: timezone, normalized: normalizedTimezone });
+
+    try {
+      // Create date in the conference's timezone
+      const dateInConfTimezone = utcToZonedTime(deadlineDate, normalizedTimezone);
+      console.log('Conference timezone date:', {
+        date: dateInConfTimezone,
+        isValid: isValid(dateInConfTimezone),
+        timezone: normalizedTimezone
+      });
+
+      // Get user's local timezone
+      const userTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+      
+      // Convert to user's local timezone
+      const localDate = utcToZonedTime(dateInConfTimezone, userTimezone);
+      console.log('Local timezone date:', {
+        date: localDate,
+        isValid: isValid(localDate),
+        timezone: userTimezone
+      });
+      
+      if (!isValid(localDate)) {
+        console.error('Invalid date after timezone conversion:', {
+          original: deadline,
+          timezone,
+          normalizedTimezone,
+          localDate
+        });
+        return null;
+      }
+      
+      return localDate;
+    } catch (tzError) {
+      console.error('Timezone conversion error:', {
+        error: tzError,
+        deadline,
+        timezone,
+        normalizedTimezone
+      });
+      return deadlineDate;
+    }
+  } catch (error) {
+    console.error('Error parsing deadline:', {
+      error,
+      deadline,
+      timezone
+    });
+    return null;
+  }
+};