From fb5c8c1466d286a798176234a08a26cf8cd76dcc Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Tue, 9 Dec 2025 22:18:31 +0100 Subject: [PATCH] Refactor event registration logic in EventsPageSection: Introduce useRef to track initial data usage, preventing unnecessary API calls when user session changes. Update loading and error handling to enhance user experience during event registration. --- components/EventsPageSection.tsx | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/components/EventsPageSection.tsx b/components/EventsPageSection.tsx index 778595a..0b8a21c 100644 --- a/components/EventsPageSection.tsx +++ b/components/EventsPageSection.tsx @@ -1,6 +1,6 @@ "use client"; -import { useState, useEffect, useMemo } from "react"; +import { useState, useEffect, useMemo, useRef } from "react"; import { useSession } from "next-auth/react"; import { useRouter } from "next/navigation"; @@ -84,13 +84,16 @@ export default function EventsPageSection({ const [loading, setLoading] = useState>({}); const [error, setError] = useState(""); 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] ); + // Ref pour tracker si on a déjà utilisé les données initiales + const hasUsedInitialData = useRef(hasInitialData); + // Séparer et trier les événements (du plus récent au plus ancien) const upcomingEvents = events .filter((e) => e.status === "UPCOMING" || e.status === "LIVE") @@ -115,21 +118,27 @@ export default function EventsPageSection({ eventsByDate[dateKey].push(event); }); - // 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) + // Mettre à jour le ref quand on a des données initiales useEffect(() => { - // Si on a déjà des données initiales, ne jamais les écraser if (hasInitialData) { + hasUsedInitialData.current = true; + } + }, [hasInitialData]); + + // Ne charger depuis l'API que si on n'a pas de données initiales + // (cas où l'utilisateur se connecte après le chargement de la page) + useEffect(() => { + // Si on a déjà des données initiales, ne jamais charger depuis l'API + if (hasUsedInitialData.current) { return; } - // Si pas de session, réinitialiser seulement si on n'avait pas de données initiales + // Si pas de session, ne rien faire (on garde les données vides) if (!session?.user?.id) { - setRegistrations({}); return; } - // Charger les inscriptions seulement si on n'a pas de données initiales + // Charger les inscriptions depuis l'API 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) => { @@ -152,7 +161,7 @@ export default function EventsPageSection({ }; checkRegistrations(); - }, [session?.user?.id, events, hasInitialData]); + }, [session?.user?.id, events]); // Fonctions pour le calendrier const getDaysInMonth = (date: Date) => {