Function DisciplinesTable

Name

DisciplinesTable

Ce composant fournit une interface complète de visualisation et gestion des disciplines sportives des Jeux Olympiques sous forme de tableau responsive. Il gère l'affichage des données avec états multiples (chargement, erreur, vide, recherche), intègre des fonctionnalités de rafraîchissement, et orchestre les actions CRUD via les lignes individuelles. Il présente une expérience utilisateur riche avec feedback contextuel et gestion intelligente des différents scénarios d'affichage.

Fonctionnalités d'affichage avancées

Header avec contrôles et feedback

• Titre contextuel : "Disciplines" avec compteur temps réel
• Bouton refresh : "🔄 Actualiser" avec état disabled pendant loading
• Indicateur loading : Spinner + "Chargement..." pendant opérations

Gestion des états d'affichage intelligente

États de chargement multiples

• Loading global : Spinner header pendant chargement initial/refresh
• Bouton disabled : Actualiser désactivé pendant loading
• Feedback textuel : "Chargement des disciplines..." explicite
• États combinés : loading + empty state géré intelligemment

Gestion d'erreurs contextuelles

• Error display : Zone erreur dédiée sous header si error !== null
• Persistance : Erreur reste jusqu'à nouvelle tentative réussie
• Rafraîchissement : Bouton actualiser permet retry après erreur

États vides contextuels (Empty States)

• Pas de données : "Aucune discipline" + "Commencez par créer votre première discipline"
• Recherche vide : "Aucune discipline trouvée" + terme recherche affiché
• Loading empty : Spinner + "Chargement des disciplines..." pendant fetch

Architecture et intégration système

Props interface complète

• disciplines : Array données à afficher
• loading : boolean état chargement global
• searchTerm : string terme recherche pour empty states contextuels
• onRefresh : Function callback bouton actualiser
• onDelete : Function callback suppression discipline (délégué aux rows)
• onEdit : Function callback édition discipline (délégué aux rows)
• error : string | null message erreur à afficher

Intégration avec DisciplinesTableRow

• Mapping données : disciplines.map() pour rendu lignes individuelles
• Key optimization : discipline.id comme clé React pour performance
• Props delegation : onDelete et onEdit transmis aux lignes
• Responsabilité : Table gère structure, rows gèrent contenu individuel
• Performance : Rendu conditionnel avec lazy evaluation

Logique d'affichage conditionnel

Empty states contextuels avancés

• Condition principale : disciplines.length === 0 pour détecter vide
• Loading priority : Si loading, affiche spinner même si vide
• Search context : Si searchTerm, message "Aucune discipline trouvée"
• Initial state : Sinon, message encourageant création première discipline

Rendu données avec performance

• Props drilling : Callbacks transmis efficacement
• Lazy evaluation : Pas de calculs inutiles si tableau vide

Interactions utilisateur

Fonctionnalité de rafraîchissement

• Bouton refresh : "🔄 Actualiser" avec emoji pour reconnaissance
• onClick handler : onRefresh() callback vers parent component
• État disabled : disabled={loading} pendant opérations
• Feedback visuel : Spinner adjacent pendant loading

Délégation actions CRUD

• Edit action : onEdit(discipline) transmis via props aux rows
• Delete action : onDelete(id) transmis via props aux rows
• Event bubbling : Callbacks remontent vers DisciplinesManagement
• State management : Pas d'état local, tout géré par parent

Intégration avec écosystème

🔗 Relations parent-enfant

• Parent : DisciplinesManagement fournit données et callbacks
• Enfants : DisciplinesTableRow pour chaque ligne données
• Siblings : SearchAndFilters pour filtrage, DisciplineModal pour CRUD
• Props flow : Unidirectionnel depuis management vers table vers rows