feat: full backend (untested)
This commit is contained in:
Nik L
78
frontend/src/api/client.ts
Normal file
78
frontend/src/api/client.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000';
|
||||
|
||||
export interface ParticipantAPI {
|
||||
id: string;
|
||||
name: string;
|
||||
email: string;
|
||||
ics_url: string;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
export interface TimeSlotAPI {
|
||||
day: string;
|
||||
hour: number;
|
||||
availability: 'full' | 'partial' | 'none';
|
||||
availableParticipants: string[];
|
||||
}
|
||||
|
||||
export interface CreateParticipantRequest {
|
||||
name: string;
|
||||
email: string;
|
||||
ics_url: string;
|
||||
}
|
||||
|
||||
async function handleResponse<T>(response: Response): Promise<T> {
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Request failed' }));
|
||||
throw new Error(error.detail || 'Request failed');
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
|
||||
export async function fetchParticipants(): Promise<ParticipantAPI[]> {
|
||||
const response = await fetch(`${API_URL}/api/participants`);
|
||||
return handleResponse<ParticipantAPI[]>(response);
|
||||
}
|
||||
|
||||
export async function createParticipant(data: CreateParticipantRequest): Promise<ParticipantAPI> {
|
||||
const response = await fetch(`${API_URL}/api/participants`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
return handleResponse<ParticipantAPI>(response);
|
||||
}
|
||||
|
||||
export async function deleteParticipant(id: string): Promise<void> {
|
||||
const response = await fetch(`${API_URL}/api/participants/${id}`, {
|
||||
method: 'DELETE',
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to delete participant');
|
||||
}
|
||||
}
|
||||
|
||||
export async function fetchAvailability(participantIds: string[]): Promise<TimeSlotAPI[]> {
|
||||
const response = await fetch(`${API_URL}/api/availability`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ participant_ids: participantIds }),
|
||||
});
|
||||
const data = await handleResponse<{ slots: TimeSlotAPI[] }>(response);
|
||||
return data.slots;
|
||||
}
|
||||
|
||||
export async function syncCalendars(): Promise<void> {
|
||||
const response = await fetch(`${API_URL}/api/sync`, { method: 'POST' });
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to sync calendars');
|
||||
}
|
||||
}
|
||||
|
||||
export async function syncParticipant(id: string): Promise<void> {
|
||||
const response = await fetch(`${API_URL}/api/sync/${id}`, { method: 'POST' });
|
||||
if (!response.ok) {
|
||||
throw new Error('Failed to sync participant calendar');
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,4 @@
|
||||
import { TimeSlot, Participant } from '@/types/calendar';
|
||||
import { days, hours } from '@/data/mockData';
|
||||
import { cn } from '@/lib/utils';
|
||||
import {
|
||||
Popover,
|
||||
@@ -7,13 +6,17 @@ import {
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Check, X } from 'lucide-react';
|
||||
import { Check, X, Loader2 } from 'lucide-react';
|
||||
|
||||
const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
|
||||
const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17];
|
||||
|
||||
interface AvailabilityHeatmapProps {
|
||||
slots: TimeSlot[];
|
||||
selectedParticipants: Participant[];
|
||||
onSlotSelect: (slot: TimeSlot) => void;
|
||||
showPartialAvailability?: boolean;
|
||||
isLoading?: boolean;
|
||||
}
|
||||
|
||||
export const AvailabilityHeatmap = ({
|
||||
@@ -21,6 +24,7 @@ export const AvailabilityHeatmap = ({
|
||||
selectedParticipants,
|
||||
onSlotSelect,
|
||||
showPartialAvailability = false,
|
||||
isLoading = false,
|
||||
}: AvailabilityHeatmapProps) => {
|
||||
const getSlot = (day: string, hour: number) => {
|
||||
return slots.find((s) => s.day === day && s.hour === hour);
|
||||
@@ -59,6 +63,15 @@ export const AvailabilityHeatmap = ({
|
||||
);
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="bg-card rounded-xl shadow-card p-8 text-center animate-fade-in">
|
||||
<Loader2 className="w-8 h-8 mx-auto mb-4 animate-spin text-primary" />
|
||||
<p className="text-muted-foreground">Loading availability...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="bg-card rounded-xl shadow-card p-6 animate-slide-up">
|
||||
<div className="mb-6">
|
||||
@@ -72,7 +85,6 @@ export const AvailabilityHeatmap = ({
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<div className="min-w-[600px]">
|
||||
{/* Header */}
|
||||
<div className="grid grid-cols-[60px_repeat(5,1fr)] gap-1 mb-2">
|
||||
<div></div>
|
||||
{days.map((day) => (
|
||||
@@ -85,7 +97,6 @@ export const AvailabilityHeatmap = ({
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Grid */}
|
||||
<div className="space-y-1">
|
||||
{hours.map((hour) => (
|
||||
<div key={hour} className="grid grid-cols-[60px_repeat(5,1fr)] gap-1">
|
||||
@@ -157,7 +168,6 @@ export const AvailabilityHeatmap = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="flex items-center justify-center gap-6 mt-6 pt-4 border-t border-border">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4 h-4 rounded bg-availability-full"></div>
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
import { useState, useEffect, useMemo } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Header } from '@/components/Header';
|
||||
import { ParticipantSelector } from '@/components/ParticipantSelector';
|
||||
import { ParticipantManager } from '@/components/ParticipantManager';
|
||||
import { AvailabilityHeatmap } from '@/components/AvailabilityHeatmap';
|
||||
import { ScheduleModal } from '@/components/ScheduleModal';
|
||||
import { generateMockAvailability } from '@/data/mockData';
|
||||
import { Participant, TimeSlot } from '@/types/calendar';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
@@ -15,39 +14,48 @@ import {
|
||||
PopoverTrigger,
|
||||
} from '@/components/ui/popover';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Users, CalendarDays, Settings } from 'lucide-react';
|
||||
import { Users, CalendarDays, Settings, RefreshCw } from 'lucide-react';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import {
|
||||
fetchParticipants,
|
||||
createParticipant,
|
||||
deleteParticipant,
|
||||
fetchAvailability,
|
||||
syncCalendars,
|
||||
ParticipantAPI,
|
||||
} from '@/api/client';
|
||||
|
||||
const STORAGE_KEY = 'calendar-participants';
|
||||
const SETTINGS_KEY = 'calendar-settings';
|
||||
|
||||
interface Settings {
|
||||
interface SettingsState {
|
||||
showPartialAvailability: boolean;
|
||||
}
|
||||
|
||||
const defaultSettings: Settings = {
|
||||
const defaultSettings: SettingsState = {
|
||||
showPartialAvailability: false,
|
||||
};
|
||||
|
||||
function apiToParticipant(p: ParticipantAPI): Participant {
|
||||
return {
|
||||
id: p.id,
|
||||
name: p.name,
|
||||
email: p.email,
|
||||
icsLink: p.ics_url,
|
||||
connected: true,
|
||||
};
|
||||
}
|
||||
|
||||
const Index = () => {
|
||||
const [participants, setParticipants] = useState<Participant[]>([]);
|
||||
const [selectedParticipants, setSelectedParticipants] = useState<Participant[]>([]);
|
||||
const [availabilitySlots, setAvailabilitySlots] = useState<TimeSlot[]>([]);
|
||||
const [selectedSlot, setSelectedSlot] = useState<TimeSlot | null>(null);
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [settings, setSettings] = useState<Settings>(defaultSettings);
|
||||
const [settings, setSettings] = useState<SettingsState>(defaultSettings);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [isSyncing, setIsSyncing] = useState(false);
|
||||
const { toast } = useToast();
|
||||
|
||||
// Load participants from localStorage on mount
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(STORAGE_KEY);
|
||||
if (stored) {
|
||||
try {
|
||||
setParticipants(JSON.parse(stored));
|
||||
} catch (e) {
|
||||
console.error('Failed to parse stored participants');
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Load settings from localStorage on mount
|
||||
useEffect(() => {
|
||||
const stored = localStorage.getItem(SETTINGS_KEY);
|
||||
if (stored) {
|
||||
@@ -59,37 +67,112 @@ const Index = () => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Save participants to localStorage when changed
|
||||
useEffect(() => {
|
||||
localStorage.setItem(STORAGE_KEY, JSON.stringify(participants));
|
||||
}, [participants]);
|
||||
|
||||
// Save settings to localStorage when changed
|
||||
useEffect(() => {
|
||||
localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
|
||||
}, [settings]);
|
||||
|
||||
const handleAddParticipant = (data: { name: string; email: string; icsLink: string }) => {
|
||||
const newParticipant: Participant = {
|
||||
id: crypto.randomUUID(),
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
icsLink: data.icsLink,
|
||||
connected: true,
|
||||
};
|
||||
setParticipants((prev) => [...prev, newParticipant]);
|
||||
};
|
||||
useEffect(() => {
|
||||
loadParticipants();
|
||||
}, []);
|
||||
|
||||
const handleRemoveParticipant = (id: string) => {
|
||||
setParticipants((prev) => prev.filter((p) => p.id !== id));
|
||||
setSelectedParticipants((prev) => prev.filter((p) => p.id !== id));
|
||||
};
|
||||
|
||||
// Generate availability when participants change
|
||||
const availabilitySlots = useMemo(() => {
|
||||
return generateMockAvailability(selectedParticipants);
|
||||
useEffect(() => {
|
||||
if (selectedParticipants.length > 0) {
|
||||
loadAvailability();
|
||||
} else {
|
||||
setAvailabilitySlots([]);
|
||||
}
|
||||
}, [selectedParticipants]);
|
||||
|
||||
const loadParticipants = async () => {
|
||||
try {
|
||||
const data = await fetchParticipants();
|
||||
setParticipants(data.map(apiToParticipant));
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Error loading participants',
|
||||
description: error instanceof Error ? error.message : 'Unknown error',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const loadAvailability = async () => {
|
||||
setIsLoading(true);
|
||||
try {
|
||||
const ids = selectedParticipants.map((p) => p.id);
|
||||
const slots = await fetchAvailability(ids);
|
||||
setAvailabilitySlots(slots);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Error loading availability',
|
||||
description: error instanceof Error ? error.message : 'Unknown error',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddParticipant = async (data: { name: string; email: string; icsLink: string }) => {
|
||||
try {
|
||||
const created = await createParticipant({
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
ics_url: data.icsLink,
|
||||
});
|
||||
setParticipants((prev) => [...prev, apiToParticipant(created)]);
|
||||
toast({
|
||||
title: 'Participant added',
|
||||
description: `${data.name} has been added and calendar synced`,
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Error adding participant',
|
||||
description: error instanceof Error ? error.message : 'Unknown error',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveParticipant = async (id: string) => {
|
||||
try {
|
||||
await deleteParticipant(id);
|
||||
setParticipants((prev) => prev.filter((p) => p.id !== id));
|
||||
setSelectedParticipants((prev) => prev.filter((p) => p.id !== id));
|
||||
toast({
|
||||
title: 'Participant removed',
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Error removing participant',
|
||||
description: error instanceof Error ? error.message : 'Unknown error',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleSyncCalendars = async () => {
|
||||
setIsSyncing(true);
|
||||
try {
|
||||
await syncCalendars();
|
||||
if (selectedParticipants.length > 0) {
|
||||
await loadAvailability();
|
||||
}
|
||||
toast({
|
||||
title: 'Calendars synced',
|
||||
description: 'All calendars have been refreshed',
|
||||
});
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: 'Error syncing calendars',
|
||||
description: error instanceof Error ? error.message : 'Unknown error',
|
||||
variant: 'destructive',
|
||||
});
|
||||
} finally {
|
||||
setIsSyncing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSlotSelect = (slot: TimeSlot) => {
|
||||
setSelectedSlot(slot);
|
||||
setIsModalOpen(true);
|
||||
@@ -132,7 +215,15 @@ const Index = () => {
|
||||
<TabsContent value="schedule" className="animate-fade-in">
|
||||
<div className="space-y-8">
|
||||
<div className="text-center relative">
|
||||
<div className="absolute right-0 top-0">
|
||||
<div className="absolute right-0 top-0 flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={handleSyncCalendars}
|
||||
disabled={isSyncing}
|
||||
>
|
||||
<RefreshCw className={`w-5 h-5 ${isSyncing ? 'animate-spin' : ''}`} />
|
||||
</Button>
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
@@ -195,6 +286,7 @@ const Index = () => {
|
||||
selectedParticipants={selectedParticipants}
|
||||
onSlotSelect={handleSlotSelect}
|
||||
showPartialAvailability={settings.showPartialAvailability}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user