improve timezone discovery #2
@@ -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>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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}
|
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in New Issue
Block a user