From 1ecd092a66412839ea8a849265ce76d9238037a6 Mon Sep 17 00:00:00 2001 From: Alma Date: Sun, 13 Apr 2025 17:53:00 +0200 Subject: [PATCH] calendar widget 2 --- components/calendar/calendar-client.tsx | 195 +++++++++--------------- 1 file changed, 75 insertions(+), 120 deletions(-) diff --git a/components/calendar/calendar-client.tsx b/components/calendar/calendar-client.tsx index eba3ff4f..45584a4a 100644 --- a/components/calendar/calendar-client.tsx +++ b/components/calendar/calendar-client.tsx @@ -456,39 +456,64 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend }); const [selectedEventPreview, setSelectedEventPreview] = useState(null); + const [upcomingEvents, setUpcomingEvents] = useState([]); const [statistics, setStatistics] = useState({ - totalEvents: initialCalendars.reduce((acc, cal) => acc + cal.events.length, 0), - upcomingEvents: initialCalendars.reduce((acc, cal) => - acc + cal.events.filter(e => new Date(e.start) > new Date()).length, 0 - ), - completedEvents: initialCalendars.reduce((acc, cal) => - acc + cal.events.filter(e => new Date(e.end) < new Date()).length, 0 - ), - meetingHours: initialCalendars.reduce((acc, cal) => - acc + cal.events.reduce((hours, e) => { - const duration = (new Date(e.end).getTime() - new Date(e.start).getTime()) / (1000 * 60 * 60); - return hours + duration; - }, 0) - , 0) + totalEvents: 0, + upcomingEvents: 0, + completedEvents: 0, + meetingHours: 0 }); - const upcomingEvents = initialCalendars - .flatMap(cal => cal.events) - .filter(event => new Date(event.start) > new Date()) - .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()) - .slice(0, 5); - - const calendarRef = useRef(null); - const [visibleCalendarIds, setVisibleCalendarIds] = useState([]); - // Update useEffect to initialize visible calendars + // Update useEffect to initialize visible calendars and fetch events useEffect(() => { if (calendars.length > 0) { setVisibleCalendarIds(calendars.map(cal => cal.id)); + updateStatistics(); + updateUpcomingEvents(); } }, [calendars]); + const updateStatistics = () => { + const now = new Date(); + const stats = { + totalEvents: 0, + upcomingEvents: 0, + completedEvents: 0, + meetingHours: 0 + }; + + calendars.forEach(cal => { + cal.events.forEach(event => { + stats.totalEvents++; + const eventStart = new Date(event.start); + const eventEnd = new Date(event.end); + + if (eventStart > now) { + stats.upcomingEvents++; + } else if (eventEnd < now) { + stats.completedEvents++; + } + + const duration = (eventEnd.getTime() - eventStart.getTime()) / (1000 * 60 * 60); + stats.meetingHours += duration; + }); + }); + + setStatistics(stats); + }; + + const updateUpcomingEvents = () => { + const now = new Date(); + const upcoming = calendars + .flatMap(cal => cal.events) + .filter(event => new Date(event.start) > now) + .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()) + .slice(0, 5); + setUpcomingEvents(upcoming); + }; + const fetchCalendars = async () => { try { setLoading(true); @@ -497,79 +522,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend const data = await response.json(); console.log("Raw calendars data:", data); - // First, clean up duplicate calendars and migrate events - let calendarsData = []; - let seenPrincipal = false; - let principalCalendarId = null; - - // First pass: identify the principal calendar and other valid calendars - for (const cal of data) { - if (cal.name === "Calendrier principal") { - if (!seenPrincipal) { - seenPrincipal = true; - principalCalendarId = cal.id; - calendarsData.push(cal); - } - } else if (cal.name !== "Default") { - calendarsData.push(cal); - } - } - - // If no principal calendar exists, create one - if (!seenPrincipal) { - const principalCalendar = await fetch("/api/calendars", { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - name: "Calendrier principal", - color: "#4f46e5", - description: "Calendrier principal", - userId, - }), - }); - - if (principalCalendar.ok) { - const newCalendar = await principalCalendar.json(); - principalCalendarId = newCalendar.id; - calendarsData.unshift(newCalendar); - } - } - - // Delete duplicate Calendrier principal and Default calendars - const deletePromises = data - .filter(cal => - (cal.name === "Calendrier principal" && cal.id !== principalCalendarId) || - cal.name === "Default" - ) - .map(async (cal) => { - try { - const response = await fetch(`/api/calendars/${cal.id}`, { - method: "DELETE", - headers: { - "Content-Type": "application/json", - }, - }); - if (!response.ok) { - console.error(`Failed to delete calendar ${cal.id}: ${response.status}`); - } - } catch (error) { - console.error("Error deleting calendar:", error); - } - }); - - await Promise.all(deletePromises); - - // Sort calendars to ensure Calendrier principal is first - calendarsData.sort((a, b) => { - if (a.name === "Calendrier principal") return -1; - if (b.name === "Calendrier principal") return 1; - return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(); - }); - - // Ensure events array exists for each calendar and convert dates - const calendarsWithEvents = calendarsData.map((cal: Calendar & { events: Event[] }) => ({ + // Process calendars and events + const processedCalendars = data.map((cal: Calendar & { events: Event[] }) => ({ ...cal, events: (cal.events || []).map(event => ({ ...event, @@ -578,17 +532,12 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend })) })); - console.log("Setting calendars with processed events:", calendarsWithEvents); - setCalendars(calendarsWithEvents); + console.log("Setting calendars with processed events:", processedCalendars); + setCalendars(processedCalendars); - // Set initial selected calendar - if (calendarsWithEvents.length > 0) { - const principalCalendar = calendarsWithEvents.find(cal => cal.name === "Calendrier principal"); - setSelectedCalendarId(principalCalendar?.id || calendarsWithEvents[0].id); - } - - // Update visible calendars - setVisibleCalendarIds(calendarsWithEvents.map(cal => cal.id)); + // Update statistics and upcoming events + updateStatistics(); + updateUpcomingEvents(); // Force calendar refresh if (calendarRef.current) { @@ -603,21 +552,12 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend } }; - useEffect(() => { + // Add a refresh function + const handleRefresh = () => { fetchCalendars(); - }, []); + }; - // Add effect to ensure selectedCalendarId is set - useEffect(() => { - if (!selectedCalendarId && calendars.length > 0) { - console.log("Setting initial calendar selection:", calendars[0]); - setSelectedCalendarId(calendars[0].id); - setEventForm(prev => ({ - ...prev, - calendarId: calendars[0].id - })); - } - }, [calendars, selectedCalendarId]); + const calendarRef = useRef(null); const handleCalendarSelect = (calendarId: string) => { console.log("Calendar selected:", calendarId); @@ -1006,8 +946,8 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend setEventForm({ title: "", description: null, - start: "", - end: "", + start: new Date().toISOString(), + end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(), allDay: false, location: null, calendarId: selectedCalendarId @@ -1019,6 +959,21 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend Nouvel événement +