calendar 25

components/calendar/calendar-client.tsx

@@ -486,7 +486,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       const response = await fetch("/api/calendars");
       if (!response.ok) throw new Error("Failed to fetch calendars");
       const data = await response.json();
-      console.log("Fetched calendars:", data);
+      console.log("Fetched calendars with events:", data);
 
       // Create principal calendar if it doesn't exist
       if (data.length === 0 || !data.some((cal: Calendar) => cal.name === "Calendrier principal")) {
@@ -509,12 +509,23 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         }
       }
 
-      setCalendars(data.map((cal: Calendar & { events: Event[] }) => ({
+      // Ensure events array exists for each calendar
+      const calendarsWithEvents = data.map((cal: Calendar & { events: Event[] }) => ({
         ...cal,
         events: cal.events || []
-      })));
-      if (data.length > 0 && !selectedCalendarId) {
-        setSelectedCalendarId(data[0].id);
+      }));
+
+      console.log("Setting calendars with events:", calendarsWithEvents);
+      setCalendars(calendarsWithEvents);
+
+      if (calendarsWithEvents.length > 0 && !selectedCalendarId) {
+        setSelectedCalendarId(calendarsWithEvents[0].id);
+      }
+
+      // Force calendar refresh after updating state
+      if (calendarRef.current) {
+        const calendarApi = calendarRef.current.getApi();
+        calendarApi.refetchEvents();
       }
     } catch (error) {
       console.error("Error fetching calendars:", error);
@@ -692,13 +703,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
         end: new Date(eventForm.end).toISOString(),
         allDay: eventForm.allDay,
         location: eventForm.location,
-        calendarId: selectedCalendarId, // Use selectedCalendarId directly
+        calendarId: selectedCalendarId,
         userId
       };
 
       console.log("Submitting event with data:", eventData);
-      console.log("Available calendars:", calendars.map(c => ({ id: c.id, name: c.name })));
-      console.log("Selected calendar ID:", selectedCalendarId);
       
       const response = await fetch("/api/events", {
         method: selectedEvent ? "PUT" : "POST",
@@ -730,7 +739,19 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       setSelectedEvent(null);
       setError(null);
 
-      // Then refresh the calendar data
+      // Update calendars state with the new event
+      const updatedCalendars = calendars.map(cal => {
+        if (cal.id === selectedCalendarId) {
+          return {
+            ...cal,
+            events: [...(cal.events || []), responseData]
+          };
+        }
+        return cal;
+      });
+      setCalendars(updatedCalendars);
+
+      // Then fetch fresh data
       await fetchCalendars();
       
       // Force calendar refresh