From b643e283fa99382d00fb4eb3b24f3cc9e282d007 Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Tue, 9 Dec 2025 22:18:01 +0100
Subject: [PATCH] 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.

---
 app/events/page.tsx              | 34 +++++++++++++++++++++++++++++++-
 components/EventsPageSection.tsx | 30 +++++++++++++++++++++-------
 2 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/app/events/page.tsx b/app/events/page.tsx
index 8fd0d85..27c3cf2 100644
--- a/app/events/page.tsx
+++ b/app/events/page.tsx
@@ -2,6 +2,7 @@ import NavigationWrapper from "@/components/NavigationWrapper";
 import EventsPageSection from "@/components/EventsPageSection";
 import { prisma } from "@/lib/prisma";
 import { getBackgroundImage } from "@/lib/preferences";
+import { auth } from "@/lib/auth";
 
 export default async function EventsPage() {
   const events = await prisma.event.findMany({
@@ -12,10 +13,41 @@ export default async function EventsPage() {
 
   const backgroundImage = await getBackgroundImage("events", "/got-2.jpg");
 
+  // Récupérer les inscriptions côté serveur pour éviter le clignotement
+  const session = await auth();
+  const initialRegistrations: Record<string, boolean> = {};
+
+  if (session?.user?.id) {
+    const upcomingEvents = events.filter((e) => e.status === "UPCOMING");
+    const eventIds = upcomingEvents.map((e) => e.id);
+
+    if (eventIds.length > 0) {
+      const registrations = await prisma.eventRegistration.findMany({
+        where: {
+          userId: session.user.id,
+          eventId: {
+            in: eventIds,
+          },
+        },
+        select: {
+          eventId: true,
+        },
+      });
+
+      registrations.forEach((reg) => {
+        initialRegistrations[reg.eventId] = true;
+      });
+    }
+  }
+
   return (
     <main className="min-h-screen bg-black relative">
       <NavigationWrapper />
-      <EventsPageSection events={events} backgroundImage={backgroundImage} />
+      <EventsPageSection
+        events={events}
+        backgroundImage={backgroundImage}
+        initialRegistrations={initialRegistrations}
+      />
     </main>
   );
 }
diff --git a/components/EventsPageSection.tsx b/components/EventsPageSection.tsx
index fd110e0..778595a 100644
--- a/components/EventsPageSection.tsx
+++ b/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) => {