Function OffresTable

Name

OffresTable

Ce composant affiche la liste complète des offres sous forme de tableau responsive avec gestion des états de chargement/erreur, et actions d'édition/suppression. Il gère l'affichage optimisé des données d'offres olympiques avec colonnes spécialisées pour nom, capacité, prix et actions administratives.

Fonctionnalités réellement implémentées

Affichage tabulaire des offres

• Colonnes spécialisées : Nom, Nombre de personnes, Prix, Actions
• Compteur dynamique : "Disciplines (X)" avec nombre d'offres

Gestion des états système

• État loading : Spinner intégré avec message "Chargement des offres..."
• État error : Bandeau rouge
• État vide : Message encourageant "Commencez par créer votre première offre"
• Conditional rendering : Logique claire entre états loading/empty/data
• Feedback utilisateur : Messages explicites pour chaque situation

Actions offres intégrées

• Édition : Callback onEdit(offre) avec objet complet
• Suppression : Callback onDelete(id) avec identifiant
• Délégation : Actions gérées via OffresTableRow
• Props drilling : Transmission callbacks vers composants enfants
• Gestion async : Callbacks compatibles opérations asynchrones

Colonnes spécialisées offres

Colonne "Nom de l'offre"

• Contenu : Nom descriptif de l'offre olympique
• Importance : Colonne principale d'identification

Colonne "nombre de personnes"

• Contenu : Capacité/limite participants de l'offre
• Contexte : Information critique pour gestion olympique
• Type : Probablement numérique (nombre entier)
• Usage : Planification capacité événements

Colonne "Prix"

• Contenu : Tarification de l'offre
• Format : Probablement devise (€, $)
• Importance : Données commerciales essentielles
• Gestion : Information pour administration billets

Colonne "Actions"

• Contenu : Boutons d'édition et suppression
• Implémentation : Gérée par OffresTableRow
• Callbacks : onEdit et onDelete transmis
• Interface : Probablement icônes ou boutons

États d'interface

État de chargement

• Condition : loading && offres.length === 0
• Spinner : Composant Spinner avec size="medium"
• Message : "Chargement des offres..." pour clarté

État vide

• Condition : !loading && offres.length === 0
• Message principal : "Aucune offre"
• Message secondaire : "Commencez par créer votre première offre"
• Encouragement : Guidage utilisateur vers action création

État avec données

• Condition : offres.length > 0
• Rendu : Map sur offres avec OffresTableRow
• Key : offre.id pour performance React
• Props : offre, onDelete, onEdit transmises
• Délégation : Logique d'affichage dans composant enfant

Gestion d'erreur

Affichage d'erreur

• Position : Entre titre et tableau
• Style : Bandeau rouge
• Contenu : Message d'erreur exact du parent
• Persistance : Reste affiché jusqu'à résolution
• Non-bloquant : N'empêche pas interaction avec données

Problèmes identifiés

Erreur terminologique critique

• Problème : Titre "Disciplines" au lieu d'"Offres"
• Impact : Confusion utilisateur majeure
• Localisation : Ligne titre h2
• Solution : Changer "Disciplines" → "Offres"
• Cohérence : Alignement avec nom du composant

Intégration composants

Dépendances externes

• Spinner : Composant réutilisable pour loading
• OffresTableRow : Composant ligne spécialisé
• Offre type : Interface TypeScript des données

Interface parent

• offres : Array des données à afficher
• loading : Boolean état chargement
• error : String message d'erreur ou null
• onDelete/onEdit : Callbacks pour actions utilisateur

Performance

⚡ Optimisations actuelles

• Conditional rendering : Évite rendu inutile selon états
• Key prop : offre.id pour reconciliation React optimale
• Composant délégué : OffresTableRow pour réutilisabilité
• Props minimales : Transmission ciblée des données nécessaires