Checkpoint: Correction du bug React #31 dans le calendrier - Erreur lors du survol des vignettes de séquences
Corrections apportées: - Utilisation de clés stables (format yyyy-MM-dd) au lieu de day.toISOString() pour éviter l'erreur React #31 - Gestion correcte des objets Date vs strings pour dateBloquage dans le modal - Gestion correcte du champ formateur qui peut être un objet ou une string - Ajout de clés uniques pour les dates de formation dans le modal Le calendrier fonctionne maintenant sans erreur lors du survol et de l'ouverture des modals de détails.
This commit is contained in:
@@ -146,10 +146,11 @@ export default function AdminCalendrier() {
|
||||
|
||||
const daySequences = getSequencesForDay(day);
|
||||
const isToday = isSameDay(day, new Date());
|
||||
const dayKey = format(day, "yyyy-MM-dd");
|
||||
|
||||
return (
|
||||
<div
|
||||
key={day.toISOString()}
|
||||
key={dayKey}
|
||||
className={`min-h-[100px] border rounded-lg p-2 ${
|
||||
!isSameMonth(day, currentDate)
|
||||
? "bg-muted/50"
|
||||
@@ -233,14 +234,22 @@ export default function AdminCalendrier() {
|
||||
{selectedSequence.formateur && (
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Formateur</p>
|
||||
<p className="text-sm">{selectedSequence.formateur}</p>
|
||||
<p className="text-sm">
|
||||
{typeof selectedSequence.formateur === 'object' && selectedSequence.formateur !== null
|
||||
? selectedSequence.formateur.nom || String(selectedSequence.formateur)
|
||||
: selectedSequence.formateur
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
{selectedSequence.dateBloquage && (
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Date de blocage</p>
|
||||
<p className="text-sm">
|
||||
{format(parseISO(selectedSequence.dateBloquage), "dd/MM/yyyy", { locale: fr })}
|
||||
{typeof selectedSequence.dateBloquage === 'string'
|
||||
? format(parseISO(selectedSequence.dateBloquage), "dd/MM/yyyy", { locale: fr })
|
||||
: format(selectedSequence.dateBloquage, "dd/MM/yyyy", { locale: fr })
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -253,8 +262,9 @@ export default function AdminCalendrier() {
|
||||
{selectedSequence.dates.map((dateForm: any, index: number) => {
|
||||
const dateDebut = typeof dateForm.dateDebut === 'string' ? parseISO(dateForm.dateDebut) : dateForm.dateDebut;
|
||||
const dateFin = typeof dateForm.dateFin === 'string' ? parseISO(dateForm.dateFin) : dateForm.dateFin;
|
||||
const dateKey = `${selectedSequence.id}-date-${index}`;
|
||||
return (
|
||||
<div key={index} className="text-sm bg-muted p-2 rounded">
|
||||
<div key={dateKey} className="text-sm bg-muted p-2 rounded">
|
||||
Du {format(dateDebut, "dd/MM/yyyy", { locale: fr })} au{" "}
|
||||
{format(dateFin, "dd/MM/yyyy", { locale: fr })}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user