calendar 41

components/calendar/calendar-client.tsx

@@ -525,11 +525,11 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       // Process calendars and events
       const processedCalendars = data.map((cal: Calendar & { events: Event[] }) => ({
         ...cal,
-        events: (cal.events || []).map(event => ({
+        events: Array.isArray(cal.events) ? cal.events.map(event => ({
           ...event,
           start: new Date(event.start),
           end: new Date(event.end)
-        }))
+        })) : []
       }));
 
       console.log("Setting calendars with processed events:", processedCalendars);
@@ -552,11 +552,6 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     }
   };
 
-  // Add a refresh function
-  const handleRefresh = () => {
-    fetchCalendars();
-  };
-
   const calendarRef = useRef<any>(null);
 
   const handleCalendarSelect = (calendarId: string) => {
@@ -737,24 +732,18 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
       // Update calendars state with the new event
       const updatedCalendars = calendars.map(cal => {
-        if (cal.id === selectedCalendarId) {
+        if (cal.id === eventData.calendarId) {
           return {
             ...cal,
-            events: [...(cal.events || []), responseData]
+            events: [...cal.events, responseData]
           };
         }
         return cal;
       });
       setCalendars(updatedCalendars);
 
-      // Then fetch fresh data
+      // Fetch fresh data to ensure all calendars are up to date
       await fetchCalendars();
-      
-      // Force calendar refresh
-      if (calendarRef.current) {
-        const calendarApi = calendarRef.current.getApi();
-        calendarApi.refetchEvents();
-      }
     } catch (error) {
       console.error("Error saving event:", error);
       setError(error instanceof Error ? error.message : "Failed to save event");
@@ -959,21 +948,6 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               <Plus className="mr-2 h-4 w-4" />
               <span className="font-medium">Nouvel événement</span>
             </Button>
-            <Button
-              variant="outline"
-              onClick={handleRefresh}
-              disabled={loading}
-              className="ml-2"
-            >
-              {loading ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
-                  <path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                </svg>
-              )}
-              <span className="ml-2">Actualiser</span>
-            </Button>
           </div>
 
           <Tabs value={view} className="w-auto">
@@ -1208,7 +1182,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
           <div className="space-y-2">
             <Label className="text-base font-semibold">Calendrier</Label>
-            <div className="flex flex-wrap gap-2 p-2 bg-gray-50 rounded-lg border border-gray-100">
+            <div className="grid grid-cols-2 gap-2">
               {calendars.map((cal) => (
                 <button
                   key={cal.id}
@@ -1220,20 +1194,21 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
                       calendarId: cal.id
                     }));
                   }}
-                  className={`flex items-center gap-2 px-4 py-2.5 rounded-md transition-all ${
+                  className={`flex items-center gap-2 px-3 py-2 rounded-lg transition-all ${
                     eventForm.calendarId === cal.id
-                      ? 'bg-white shadow-md border border-gray-200'
+                      ? 'bg-white ring-2 ring-primary ring-offset-2'
-                      : 'hover:bg-white/50'
+                      : 'bg-gray-50 hover:bg-gray-100'
                   }`}
-                  style={{
-                    borderLeft: `4px solid ${cal.color}`,
-                  }}
                 >
                   <div 
                     className="w-3 h-3 rounded-full" 
                     style={{ backgroundColor: cal.color }}
                   />
-                  <span className={`text-sm ${eventForm.calendarId === cal.id ? 'font-medium' : ''}`}>
+                  <span className={`text-sm ${
+                    eventForm.calendarId === cal.id 
+                      ? 'font-medium text-gray-900' 
+                      : 'text-gray-600'
+                  }`}>
                     {cal.name}
                   </span>
                 </button>