Enhance event registration handling: Integrate server-side session management to fetch user registrations for upcoming events, preventing flicker on load. Update EventsPageSection to accept initial registration data, improving user experience by pre-populating registration states.

components/EventsPageSection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
 
@@ -16,6 +16,7 @@ interface Event {
 interface EventsPageSectionProps {
   events: Event[];
   backgroundImage: string;
+  initialRegistrations?: Record<string, boolean>;
 }
 
 const getEventTypeColor = (type: Event["type"]) => {
@@ -74,15 +75,21 @@ const getStatusBadge = (status: Event["status"]) => {
 export default function EventsPageSection({
   events,
   backgroundImage,
+  initialRegistrations = {},
 }: EventsPageSectionProps) {
   const { data: session } = useSession();
   const router = useRouter();
-  const [registrations, setRegistrations] = useState<Record<string, boolean>>(
-    {}
-  );
+  const [registrations, setRegistrations] =
+    useState<Record<string, boolean>>(initialRegistrations);
   const [loading, setLoading] = useState<Record<string, boolean>>({});
   const [error, setError] = useState<string>("");
   const [currentMonth, setCurrentMonth] = useState(new Date());
+  
+  // Déterminer si on a des données initiales valides
+  const hasInitialData = useMemo(
+    () => Object.keys(initialRegistrations).length > 0,
+    [initialRegistrations]
+  );
 
   // Séparer et trier les événements (du plus récent au plus ancien)
   const upcomingEvents = events
@@ -108,12 +115,21 @@ export default function EventsPageSection({
     eventsByDate[dateKey].push(event);
   });
 
-  // Vérifier les inscriptions au chargement
+  // Synchroniser les inscriptions si la session change côté client
+  // Ne charger que si on n'a pas de données initiales (cas où l'utilisateur se connecte après le chargement)
   useEffect(() => {
-    if (!session?.user?.id) {
+    // Si on a déjà des données initiales, ne jamais les écraser
+    if (hasInitialData) {
       return;
     }
 
+    // Si pas de session, réinitialiser seulement si on n'avait pas de données initiales
+    if (!session?.user?.id) {
+      setRegistrations({});
+      return;
+    }
+
+    // Charger les inscriptions seulement si on n'a pas de données initiales
     const checkRegistrations = async () => {
       const upcomingOnlyEvents = events.filter((e) => e.status === "UPCOMING");
       const registrationChecks = upcomingOnlyEvents.map(async (event) => {
@@ -136,7 +152,7 @@ export default function EventsPageSection({
     };
 
     checkRegistrations();
-  }, [session?.user?.id, events]);
+  }, [session?.user?.id, events, hasInitialData]);
 
   // Fonctions pour le calendrier
   const getDaysInMonth = (date: Date) => {