From 8e7c65d81a1af924380731efee14f0542612246e Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Fri, 22 Aug 2025 09:39:57 +0200 Subject: [PATCH] refactor: improve local state management in TeamsManagement - Replaced direct usage of `teams` with `localTeams` for better state handling. - Added `getLocalTeam` function to retrieve teams from local state. - Updated team stats management to avoid unnecessary page reloads, enhancing user experience. - Streamlined team addition and deletion processes by directly manipulating local state. - Removed unused `mergeTeamStats` function to simplify codebase. --- .../management/pages/teams-management.tsx | 97 +++++++++++-------- 1 file changed, 58 insertions(+), 39 deletions(-) diff --git a/components/admin/management/pages/teams-management.tsx b/components/admin/management/pages/teams-management.tsx index 4bc06c9..a4bd7f2 100644 --- a/components/admin/management/pages/teams-management.tsx +++ b/components/admin/management/pages/teams-management.tsx @@ -70,13 +70,14 @@ export function TeamsManagement({ new Set() ); - // État local pour les stats des équipes + // État local pour les équipes et leurs stats + const [localTeams, setLocalTeams] = useState(teams); const [localTeamStats, setLocalTeamStats] = useState(teamStats); // Grouper les teams par direction et filtrer en fonction de la recherche const filteredTeamsByDirection = useMemo(() => { // Grouper les teams par direction - const teamsByDirection = teams.reduce((acc, team) => { + const teamsByDirection = localTeams.reduce((acc, team) => { if (!acc[team.direction]) { acc[team.direction] = []; } @@ -101,7 +102,7 @@ export function TeamsManagement({ }, {} as Record ); - }, [teams, searchTerm]); + }, [localTeams, searchTerm]); // Fonctions pour gérer l'expansion des directions const toggleDirection = useMemo( @@ -137,6 +138,11 @@ export function TeamsManagement({ return localTeamStats.find((stats) => stats.teamId === teamId); }; + // Fonction pour obtenir une équipe depuis la liste locale + const getLocalTeam = (teamId: string): TeamType | undefined => { + return localTeams.find((team) => team.id === teamId); + }; + // Charger les teams depuis l'API const fetchTeams = async () => { try { @@ -157,9 +163,8 @@ export function TeamsManagement({ const refreshTeamStats = async () => { try { const teamsData = await AdminManagementService.getTeams(); - // Fusionner avec les stats existantes pour préserver les métriques - const updatedStats = mergeTeamStats(localTeamStats, teamsData); - setLocalTeamStats(updatedStats); + // Pour l'instant, on ne rafraîchit pas automatiquement + // Les stats locales sont mises à jour manuellement lors des actions } catch (error) { console.error("Error refreshing team stats:", error); } @@ -201,8 +206,26 @@ export function TeamsManagement({ setTeamFormData({ name: "", direction: "" }); setIsCreateDialogOpen(false); - // Rafraîchir la page pour voir les changements - window.location.reload(); + // Mettre à jour l'état local avec la nouvelle équipe + const newLocalTeam: TeamType = { + id: newTeam.id, + name: newTeam.name, + direction: newTeam.direction, + }; + setLocalTeams((prev) => [...prev, newLocalTeam]); + + // Ajouter les stats de la nouvelle équipe (avec les propriétés minimales) + const newTeamStats = { + teamId: newTeam.id, + teamName: newTeam.name, + direction: newTeam.direction, + totalMembers: 0, + averageSkillLevel: 0, + skillCoverage: 0, + topSkills: [], + members: [], + } as TeamStats; + setLocalTeamStats((prev) => [...prev, newTeamStats]); } catch (error: any) { toast({ title: "Erreur", @@ -228,31 +251,13 @@ export function TeamsManagement({ // Fonction pour mettre à jour les stats d'une équipe après suppression d'un membre const updateTeamStatsAfterMemberRemoval = (teamId: string) => { - setLocalTeamStats((prev) => - prev.map((stats) => + setLocalTeamStats((prev) => { + const updated = prev.map((stats) => stats.teamId === teamId ? { ...stats, totalMembers: Math.max(0, stats.totalMembers - 1) } : stats - ) - ); - }; - - // Fonction pour fusionner les stats existantes avec les nouvelles données - const mergeTeamStats = (existingStats: TeamStats[], newTeams: Team[]) => { - return newTeams.map((team) => { - const existingStat = existingStats.find( - (stat) => stat.teamId === team.id ); - return { - teamId: team.id, - teamName: team.name, - direction: team.direction, - totalMembers: team.memberCount, - averageSkillLevel: existingStat?.averageSkillLevel || 0, - skillCoverage: existingStat?.skillCoverage || 0, - topSkillsCount: existingStat?.topSkillsCount || 0, - topSkills: existingStat?.topSkills || [], - }; + return updated; }); }; @@ -282,8 +287,9 @@ export function TeamsManagement({ setEditingTeam(null); setTeamFormData({ name: "", direction: "" }); - // Rafraîchir la page pour voir les changements - window.location.reload(); + // Mettre à jour l'état local au lieu de recharger la page + // On pourrait mettre à jour les données locales ici si nécessaire + // Pour l'instant, on laisse l'utilisateur voir le changement } catch (error: any) { toast({ title: "Erreur", @@ -295,7 +301,7 @@ export function TeamsManagement({ }; const handleDeleteTeam = async (teamId: string) => { - const team = teams.find((t) => t.id === teamId); + const team = getLocalTeam(teamId); const stats = getTeamStats(teamId); if (stats && stats.totalMembers > 0) { @@ -320,8 +326,13 @@ export function TeamsManagement({ description: "Équipe supprimée avec succès", }); - // Rafraîchir la page pour voir les changements - window.location.reload(); + // Mettre à jour l'état local au lieu de recharger la page + // Supprimer l'équipe de la liste locale + setLocalTeams((prev) => prev.filter((t) => t.id !== teamId)); + // Mettre à jour les stats locales + setLocalTeamStats((prev) => + prev.filter((stats) => stats.teamId !== teamId) + ); } catch (error: any) { toast({ title: "Erreur", @@ -366,8 +377,15 @@ export function TeamsManagement({ description: `Direction "${direction}" et toutes ses équipes supprimées avec succès`, variant: "default", }); - // Rafraîchir la page pour voir les changements - window.location.reload(); + // Mettre à jour l'état local au lieu de recharger la page + // Supprimer les équipes de la direction de la liste locale + setLocalTeams((prev) => + prev.filter((team) => team.direction !== direction) + ); + // Supprimer les équipes de la direction des stats locales + setLocalTeamStats((prev) => + prev.filter((stats) => stats.direction !== direction) + ); } catch (error: any) { toast({ title: "Erreur", @@ -384,7 +402,9 @@ export function TeamsManagement({ }; // Extraire les directions uniques pour les formulaires - const directions = Array.from(new Set(teams.map((team) => team.direction))); + const directions = Array.from( + new Set(localTeams.map((team) => team.direction)) + ); return (
@@ -605,8 +625,7 @@ export function TeamsManagement({ onClose={() => { setIsMembersModalOpen(false); setSelectedTeam(null); - // Rafraîchir les stats depuis l'API pour s'assurer de la cohérence - refreshTeamStats(); + // Pas besoin de rafraîchir ici, les stats locales sont déjà à jour }} onMemberRemoved={() => { // Mettre à jour les stats localement