diff --git a/app/admin/tirages/page.tsx b/app/admin/tirages/page.tsx index d943528..a9e4990 100644 --- a/app/admin/tirages/page.tsx +++ b/app/admin/tirages/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { Card } from '@/components/ui/Card'; import Button from '@/components/Button'; import toast from 'react-hot-toast'; @@ -79,13 +79,7 @@ export default function TiragesPage() { const [prizeValue, setPrizeValue] = useState('360'); const [allowRedraw, setAllowRedraw] = useState(false); - useEffect(() => { - checkExistingDraw(); - // Charger automatiquement les participants au chargement de la page - loadParticipants(); - }, []); - - const checkExistingDraw = async () => { + const checkExistingDraw = useCallback(async () => { try { const token = localStorage.getItem('auth_token') || localStorage.getItem('token'); const response = await fetch(`${API_BASE_URL}/draw/check-existing`, { @@ -102,9 +96,9 @@ export default function TiragesPage() { } catch (error) { console.error('Erreur:', error); } - }; + }, []); - const loadParticipants = async () => { + const loadParticipants = useCallback(async () => { setLoading(true); try { const token = localStorage.getItem('auth_token') || localStorage.getItem('token'); @@ -128,7 +122,13 @@ export default function TiragesPage() { } finally { setLoading(false); } - }; + }, [minTickets, verifiedOnly]); + + useEffect(() => { + checkExistingDraw(); + // Charger automatiquement les participants au chargement de la page + loadParticipants(); + }, [checkExistingDraw, loadParticipants]); const conductDraw = async () => { if (participants.length === 0) { diff --git a/app/admin/utilisateurs/[id]/page.tsx b/app/admin/utilisateurs/[id]/page.tsx index b2bd093..60f4082 100644 --- a/app/admin/utilisateurs/[id]/page.tsx +++ b/app/admin/utilisateurs/[id]/page.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { useRouter, useParams } from 'next/navigation'; import { adminService } from '@/services/admin.service'; import { User } from '@/types'; @@ -16,11 +16,7 @@ export default function UserDetailsPage() { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - useEffect(() => { - loadUserDetails(); - }, [userId]); - - const loadUserDetails = async () => { + const loadUserDetails = useCallback(async () => { try { setLoading(true); setError(null); @@ -32,7 +28,11 @@ export default function UserDetailsPage() { } finally { setLoading(false); } - }; + }, [userId]); + + useEffect(() => { + loadUserDetails(); + }, [loadUserDetails]); const getRoleBadgeColor = (role: string) => { switch (role) { diff --git a/app/historique/page.tsx b/app/historique/page.tsx index dc527e4..b1c7312 100644 --- a/app/historique/page.tsx +++ b/app/historique/page.tsx @@ -1,5 +1,5 @@ "use client"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useCallback } from "react"; import { useAuth } from "@/contexts/AuthContext"; import { useRouter } from "next/navigation"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"; @@ -26,22 +26,7 @@ export default function HistoriquePage() { rejected: 0, }); - useEffect(() => { - if (!authLoading && !isAuthenticated) { - router.push(ROUTES.LOGIN); - return; - } - - if (isAuthenticated) { - loadUserTickets(); - } - }, [authLoading, isAuthenticated, router]); - - useEffect(() => { - filterTickets(); - }, [tickets, filter, searchQuery]); - - const loadUserTickets = async () => { + const loadUserTickets = useCallback(async () => { try { const response = await gameService.getMyTickets(1, 1000); const ticketsData = response?.data || []; @@ -59,9 +44,9 @@ export default function HistoriquePage() { } finally { setIsLoading(false); } - }; + }, []); - const filterTickets = () => { + const filterTickets = useCallback(() => { let result = [...tickets]; if (filter !== 'ALL') { @@ -75,7 +60,22 @@ export default function HistoriquePage() { } setFilteredTickets(result); - }; + }, [tickets, filter, searchQuery]); + + useEffect(() => { + if (!authLoading && !isAuthenticated) { + router.push(ROUTES.LOGIN); + return; + } + + if (isAuthenticated) { + loadUserTickets(); + } + }, [authLoading, isAuthenticated, router, loadUserTickets]); + + useEffect(() => { + filterTickets(); + }, [filterTickets]); if (authLoading || isLoading) { return ( diff --git a/app/mes-lots/page.tsx b/app/mes-lots/page.tsx index 65da964..c29871e 100644 --- a/app/mes-lots/page.tsx +++ b/app/mes-lots/page.tsx @@ -1,5 +1,5 @@ "use client"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useCallback } from "react"; import { useAuth } from "@/contexts/AuthContext"; import { useGame } from "@/hooks/useGame"; import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/Card"; @@ -29,13 +29,7 @@ export default function HistoriquePage() { const [totalPages, setTotalPages] = useState(1); const [error, setError] = useState(null); - useEffect(() => { - if (isAuthenticated && user?.role?.toLowerCase() === "client") { - loadTickets(); - } - }, [isAuthenticated, user, currentPage]); - - const loadTickets = async () => { + const loadTickets = useCallback(async () => { try { setError(null); console.log('🎫 Chargement des tickets, page:', currentPage); @@ -55,7 +49,13 @@ export default function HistoriquePage() { setError('Erreur lors du chargement de vos tickets.'); setTickets([]); } - }; + }, [getMyTickets, currentPage]); + + useEffect(() => { + if (isAuthenticated && user?.role?.toLowerCase() === "client") { + loadTickets(); + } + }, [isAuthenticated, user, loadTickets]); if (!isAuthenticated || user?.role?.toLowerCase() !== "client") { return ( diff --git a/components/admin/UserManagement.tsx b/components/admin/UserManagement.tsx index 2ffa3ca..2a23564 100644 --- a/components/admin/UserManagement.tsx +++ b/components/admin/UserManagement.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useEffect } from 'react'; +import { useState, useEffect, useCallback } from 'react'; import { useRouter } from 'next/navigation'; import { adminService } from '@/services/admin.service'; import { User, CreateEmployeeData, UpdateUserData, PaginatedResponse } from '@/types'; @@ -29,11 +29,7 @@ export default function UserManagement() { const [userFormData, setUserFormData] = useState({}); - useEffect(() => { - loadUsers(); - }, [page, filterRole]); - - const loadUsers = async () => { + const loadUsers = useCallback(async () => { try { setLoading(true); setError(null); @@ -50,7 +46,11 @@ export default function UserManagement() { } finally { setLoading(false); } - }; + }, [page, filterRole]); + + useEffect(() => { + loadUsers(); + }, [loadUsers]); const handleCreateEmployee = async (e: React.FormEvent) => { e.preventDefault();