improve timezone discovery

This commit is contained in:
Joyce
2026-01-28 15:31:30 -05:00
parent 880925f30d
commit 117b28c2e9
3 changed files with 16 additions and 69 deletions

View File

@@ -7,7 +7,8 @@ import {
} from '@/components/ui/popover'; } from '@/components/ui/popover';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Check, X, Loader2 } from 'lucide-react'; import { Check, X, Loader2 } from 'lucide-react';
import { TimezoneSelector } from '@/components/TimezoneSelector';
const TIMEZONE = 'America/Toronto';
const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']; const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17]; const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17];
@@ -78,8 +79,6 @@ interface AvailabilityHeatmapProps {
onSlotSelect: (slot: TimeSlot) => void; onSlotSelect: (slot: TimeSlot) => void;
showPartialAvailability?: boolean; showPartialAvailability?: boolean;
isLoading?: boolean; isLoading?: boolean;
displayTimezone: string;
onTimezoneChange: (timezone: string) => void;
} }
export const AvailabilityHeatmap = ({ export const AvailabilityHeatmap = ({
@@ -88,15 +87,13 @@ export const AvailabilityHeatmap = ({
onSlotSelect, onSlotSelect,
showPartialAvailability = false, showPartialAvailability = false,
isLoading = false, isLoading = false,
displayTimezone,
onTimezoneChange,
}: AvailabilityHeatmapProps) => { }: AvailabilityHeatmapProps) => {
const weekDates = getWeekDates(displayTimezone); const weekDates = getWeekDates(TIMEZONE);
// Find a slot that matches the given display timezone date/hour // Find a slot that matches the given display timezone date/hour
const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => { const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => {
// Convert display timezone date/hour to UTC // Convert display timezone date/hour to UTC
const targetUTC = toUTCDate(dateStr, hour, displayTimezone); const targetUTC = toUTCDate(dateStr, hour, TIMEZONE);
return slots.find((s) => { return slots.find((s) => {
const slotDate = new Date(s.start_time); const slotDate = new Date(s.start_time);
@@ -118,7 +115,7 @@ export const AvailabilityHeatmap = ({
const isSlotTooSoon = (dateStr: string, hour: number) => { const isSlotTooSoon = (dateStr: string, hour: number) => {
// Convert to UTC and compare with current time // Convert to UTC and compare with current time
const slotTimeUTC = toUTCDate(dateStr, hour, displayTimezone); const slotTimeUTC = toUTCDate(dateStr, hour, TIMEZONE);
const now = new Date(); const now = new Date();
const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000); const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
return slotTimeUTC < twoHoursFromNow; return slotTimeUTC < twoHoursFromNow;
@@ -177,10 +174,6 @@ export const AvailabilityHeatmap = ({
{selectedParticipants.length} participant{selectedParticipants.length > 1 ? 's' : ''}: {selectedParticipants.map(p => p.name.split(' ')[0]).join(', ')} {selectedParticipants.length} participant{selectedParticipants.length > 1 ? 's' : ''}: {selectedParticipants.map(p => p.name.split(' ')[0]).join(', ')}
</p> </p>
</div> </div>
<TimezoneSelector
value={displayTimezone}
onChange={onTimezoneChange}
/>
</div> </div>
<div className="overflow-x-auto"> <div className="overflow-x-auto">
@@ -242,19 +235,6 @@ export const AvailabilityHeatmap = ({
{selectedParticipants.map((participant) => { {selectedParticipants.map((participant) => {
const isAvailable = slot.availableParticipants.includes(participant.name); const isAvailable = slot.availableParticipants.includes(participant.name);
// Calculate participant's local time for this slot
let participantTime = '';
try {
const slotDate = new Date(slot.start_time);
participantTime = new Intl.DateTimeFormat('en-US', {
hour: 'numeric',
minute: 'numeric',
timeZone: participant.timezone,
}).format(slotDate);
} catch (e) {
// Fallback if timezone is invalid
}
return ( return (
<div <div
key={participant.id} key={participant.id}
@@ -269,9 +249,6 @@ export const AvailabilityHeatmap = ({
isAvailable ? "text-foreground" : "text-muted-foreground" isAvailable ? "text-foreground" : "text-muted-foreground"
)}> )}>
{participant.name.split(' ')[0]} {participant.name.split(' ')[0]}
<span className="opacity-70 ml-1">
({participantTime || '?'})
</span>
</span> </span>
</div> </div>
); );

View File

@@ -6,7 +6,6 @@ import { Label } from '@/components/ui/label';
import { UserPlus, Trash2, User, Pencil, Check, X, AlertCircle } from 'lucide-react'; import { UserPlus, Trash2, User, Pencil, Check, X, AlertCircle } from 'lucide-react';
import { useToast } from '@/hooks/use-toast'; import { useToast } from '@/hooks/use-toast';
import { getAvatarColor } from '@/lib/utils'; import { getAvatarColor } from '@/lib/utils';
import { TimezoneSelector } from '@/components/TimezoneSelector';
interface ParticipantManagerProps { interface ParticipantManagerProps {
participants: Participant[]; participants: Participant[];
@@ -23,12 +22,10 @@ export const ParticipantManager = ({
}: ParticipantManagerProps) => { }: ParticipantManagerProps) => {
const [name, setName] = useState(''); const [name, setName] = useState('');
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [timezone, setTimezone] = useState('America/Toronto');
const [icsLink, setIcsLink] = useState(''); const [icsLink, setIcsLink] = useState('');
// Edit state // Edit state
const [editingId, setEditingId] = useState<string | null>(null); const [editingId, setEditingId] = useState<string | null>(null);
const [editTimezone, setEditTimezone] = useState('');
const [editIcsLink, setEditIcsLink] = useState(''); const [editIcsLink, setEditIcsLink] = useState('');
const [isUpdating, setIsUpdating] = useState(false); const [isUpdating, setIsUpdating] = useState(false);
@@ -49,7 +46,7 @@ export const ParticipantManager = ({
onAddParticipant({ onAddParticipant({
name: name.trim(), name: name.trim(),
email: email.trim(), email: email.trim(),
timezone: timezone.trim() || 'America/Toronto', timezone: 'America/Toronto',
icsLink: icsLink.trim() || '' icsLink: icsLink.trim() || ''
}); });
setName(''); setName('');
@@ -64,13 +61,11 @@ export const ParticipantManager = ({
const startEditing = (participant: Participant) => { const startEditing = (participant: Participant) => {
setEditingId(participant.id); setEditingId(participant.id);
setEditTimezone(participant.timezone);
setEditIcsLink(participant.icsLink || ''); setEditIcsLink(participant.icsLink || '');
}; };
const cancelEditing = () => { const cancelEditing = () => {
setEditingId(null); setEditingId(null);
setEditTimezone('');
setEditIcsLink(''); setEditIcsLink('');
}; };
@@ -80,7 +75,6 @@ export const ParticipantManager = ({
setIsUpdating(true); setIsUpdating(true);
try { try {
await onUpdateParticipant(participantId, { await onUpdateParticipant(participantId, {
timezone: editTimezone,
ics_url: editIcsLink || undefined, ics_url: editIcsLink || undefined,
}); });
toast({ toast({
@@ -118,7 +112,7 @@ export const ParticipantManager = ({
</h3> </h3>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="name">Name</Label> <Label htmlFor="name">Name</Label>
<Input <Input
@@ -142,14 +136,6 @@ export const ParticipantManager = ({
/> />
</div> </div>
<div className="space-y-2">
<Label>Timezone</Label>
<TimezoneSelector
value={timezone}
onChange={setTimezone}
/>
</div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor="icsLink">Calendar ICS Link</Label> <Label htmlFor="icsLink">Calendar ICS Link</Label>
<Input <Input
@@ -203,14 +189,6 @@ export const ParticipantManager = ({
</div> </div>
</div> </div>
<div className="grid gap-4 sm:grid-cols-2">
<div className="space-y-2">
<Label>Timezone</Label>
<TimezoneSelector
value={editTimezone}
onChange={setEditTimezone}
/>
</div>
<div className="space-y-2"> <div className="space-y-2">
<Label htmlFor={`edit-ics-${participant.id}`}>Calendar ICS Link</Label> <Label htmlFor={`edit-ics-${participant.id}`}>Calendar ICS Link</Label>
<Input <Input
@@ -221,7 +199,6 @@ export const ParticipantManager = ({
className="bg-card" className="bg-card"
/> />
</div> </div>
</div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button
@@ -258,8 +235,6 @@ export const ParticipantManager = ({
<div className="text-sm text-muted-foreground flex flex-wrap gap-x-2"> <div className="text-sm text-muted-foreground flex flex-wrap gap-x-2">
<span>{participant.email}</span> <span>{participant.email}</span>
<span className="text-muted-foreground/60"></span> <span className="text-muted-foreground/60"></span>
<span>{participant.timezone}</span>
<span className="text-muted-foreground/60"></span>
{participant.icsLink ? ( {participant.icsLink ? (
<span className="text-primary truncate max-w-[200px]" title={participant.icsLink}> <span className="text-primary truncate max-w-[200px]" title={participant.icsLink}>
ICS linked ICS linked

View File

@@ -64,9 +64,6 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
const [settings, setSettings] = useState<SettingsState>(defaultSettings); const [settings, setSettings] = useState<SettingsState>(defaultSettings);
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [isSyncing, setIsSyncing] = useState(false); const [isSyncing, setIsSyncing] = useState(false);
const [displayTimezone, setDisplayTimezone] = useState(
Intl.DateTimeFormat().resolvedOptions().timeZone
);
const { toast } = useToast(); const { toast } = useToast();
useEffect(() => { useEffect(() => {
@@ -328,8 +325,6 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
onSlotSelect={handleSlotSelect} onSlotSelect={handleSlotSelect}
showPartialAvailability={settings.showPartialAvailability} showPartialAvailability={settings.showPartialAvailability}
isLoading={isLoading} isLoading={isLoading}
displayTimezone={displayTimezone}
onTimezoneChange={setDisplayTimezone}
/> />
</> </>
)} )}