feat: full backend (untested)

frontend/src/pages/Index.tsx

@@ -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}
                   />
                 </>
               )}