60 lines
1.8 KiB
React
60 lines
1.8 KiB
React
import React, { useState, useEffect } from "react";
|
|
import styles from "./IncompleteEvent.module.css";
|
|
import getAllEvents from "../../utils/events/getAllEvents";
|
|
|
|
function IncompleteEvent() {
|
|
const [events, setEvents] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchEvents = async () => {
|
|
const data = await getAllEvents();
|
|
setEvents(data?.data || data || []);
|
|
setLoading(false);
|
|
};
|
|
fetchEvents();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className={`${styles.rightBlock} glassCard`}>
|
|
<h2>Derniers événements</h2>
|
|
<div className={styles.eventsContainer}>
|
|
<div className={`${styles.emptyEvent} glassCard`}>
|
|
<p>Chargement des événements...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`${styles.rightBlock} glassCard`}>
|
|
<h2>Derniers événements</h2>
|
|
<div className={styles.eventsContainer}>
|
|
{events.map((event) => (
|
|
<div key={event.id} className={`glassCard ${styles.eventCard}`}>
|
|
<h3>{event.name}</h3>
|
|
<p className={styles.eventDate}>
|
|
{new Date(event.start).toLocaleDateString("fr-FR")} - {new Date(event.end).toLocaleDateString("fr-FR")}
|
|
</p>
|
|
<p className={styles.eventDescription}>{event.description}</p>
|
|
<h4>Tâches associées :</h4>
|
|
<ul className={styles.tasksList}>
|
|
{event.tasks?.length ? (
|
|
event.tasks.map((task, taskIndex) => (
|
|
<li key={taskIndex}>{task.name}</li>
|
|
))
|
|
) : (
|
|
<li>Aucune tâche associée.</li>
|
|
)}
|
|
</ul>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default IncompleteEvent;
|