From 1f59cc7f9d9314b7e8986609a3a5af812b8cc2e2 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Wed, 17 Dec 2025 10:44:56 +0100 Subject: [PATCH] Enhance challenge management and badge components: Implement event dispatch for refreshing challenge badges after various actions (acceptance, rejection, deletion, cancellation) in ChallengeManagement and ChallengesSection. Update ChallengeBadge to listen for refresh events, ensuring accurate challenge count display and improved user experience. --- components/admin/ChallengeManagement.tsx | 12 +++++++++ components/challenges/ChallengesSection.tsx | 6 +++++ components/navigation/ChallengeBadge.tsx | 28 ++++++++------------- 3 files changed, 29 insertions(+), 17 deletions(-) diff --git a/components/admin/ChallengeManagement.tsx b/components/admin/ChallengeManagement.tsx index 60afd60..c02f7ec 100644 --- a/components/admin/ChallengeManagement.tsx +++ b/components/admin/ChallengeManagement.tsx @@ -100,6 +100,8 @@ export default function ChallengeManagement() { setWinnerId(""); setAdminComment(""); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de la validation"); @@ -126,6 +128,8 @@ export default function ChallengeManagement() { setSelectedChallenge(null); setAdminComment(""); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors du rejet"); @@ -181,6 +185,8 @@ export default function ChallengeManagement() { if (result.success) { setSuccessMessage("Défi supprimé avec succès"); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de la suppression"); @@ -200,6 +206,8 @@ export default function ChallengeManagement() { if (result.success) { setSuccessMessage("Défi annulé avec succès"); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de l'annulation"); @@ -219,6 +227,8 @@ export default function ChallengeManagement() { if (result.success) { setSuccessMessage("Défi réactivé avec succès"); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de la réactivation"); @@ -242,6 +252,8 @@ export default function ChallengeManagement() { if (result.success) { setSuccessMessage("Défi accepté avec succès"); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de l'acceptation"); diff --git a/components/challenges/ChallengesSection.tsx b/components/challenges/ChallengesSection.tsx index 1811aa9..d0bc763 100644 --- a/components/challenges/ChallengesSection.tsx +++ b/components/challenges/ChallengesSection.tsx @@ -90,6 +90,8 @@ export default function ChallengesSection({ setSuccessMessage("Défi créé avec succès !"); setShowCreateForm(false); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de la création du défi"); @@ -107,6 +109,8 @@ export default function ChallengesSection({ "Défi accepté ! En attente de désignation du gagnant." ); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de l'acceptation"); @@ -122,6 +126,8 @@ export default function ChallengesSection({ if (result.success) { setSuccessMessage("Défi annulé"); fetchChallenges(); + // Rafraîchir le badge des défis + window.dispatchEvent(new Event("refreshChallenges")); setTimeout(() => setSuccessMessage(null), 5000); } else { setErrorMessage(result.error || "Erreur lors de l'annulation"); diff --git a/components/navigation/ChallengeBadge.tsx b/components/navigation/ChallengeBadge.tsx index 386e0a6..bde75a7 100644 --- a/components/navigation/ChallengeBadge.tsx +++ b/components/navigation/ChallengeBadge.tsx @@ -14,15 +14,14 @@ export default function ChallengeBadge({ }: ChallengeBadgeProps) { const [count, setCount] = useState(initialCount); + // Utiliser le count initial (déjà récupéré côté serveur) useEffect(() => { - // Si on a déjà un initialCount, l'utiliser et ne pas faire d'appel immédiat - // On rafraîchit seulement après un délai pour éviter les appels redondants - if (initialCount > 0) { - setCount(initialCount); - } + setCount(initialCount); + }, [initialCount]); - // Récupérer le nombre de défis actifs (seulement si pas d'initialCount ou pour rafraîchir) - const fetchActiveCount = async () => { + // Écouter les événements de refresh des défis (déclenché après acceptation/annulation) + useEffect(() => { + const handleRefreshChallenges = async () => { try { const response = await fetch("/api/challenges/active-count"); const data = await response.json(); @@ -32,16 +31,11 @@ export default function ChallengeBadge({ } }; - // Si pas d'initialCount, charger immédiatement, sinon attendre 30s avant le premier refresh - if (initialCount === 0) { - fetchActiveCount(); - } - - // Rafraîchir toutes les 30 secondes - const interval = setInterval(fetchActiveCount, 30000); - - return () => clearInterval(interval); - }, [initialCount]); + window.addEventListener("refreshChallenges", handleRefreshChallenges); + return () => { + window.removeEventListener("refreshChallenges", handleRefreshChallenges); + }; + }, []); return (