Refactor event fetching and display: Change event retrieval order to descending by date, enhance event data structure to include registration counts, and update UI components to reflect these changes for better user experience.

This commit is contained in:
Julien Froidefond
2025-12-09 21:55:42 +01:00
parent 50a2eaf109
commit 16b0437ecb
4 changed files with 54 additions and 11 deletions

View File

@@ -11,6 +11,7 @@ interface Event {
status: "UPCOMING" | "LIVE" | "PAST";
createdAt: string;
updatedAt: string;
registrationsCount?: number;
}
interface EventFormData {
@@ -351,9 +352,15 @@ export default function EventManagement() {
<p className="text-gray-400 text-sm mb-2">
{event.description}
</p>
<p className="text-gray-500 text-xs">
Date: {new Date(event.date).toLocaleDateString("fr-FR")}
</p>
<div className="flex items-center gap-4 mt-2">
<p className="text-gray-500 text-xs">
Date: {new Date(event.date).toLocaleDateString("fr-FR")}
</p>
<span className="px-2 py-1 bg-blue-900/30 border border-blue-500/50 text-blue-400 text-xs rounded">
{event.registrationsCount || 0} inscrit
{event.registrationsCount !== 1 ? "s" : ""}
</span>
</div>
</div>
{!isCreating && !editingEvent && (
<div className="flex gap-2 ml-4">

View File

@@ -84,11 +84,19 @@ export default function EventsPageSection({
const [error, setError] = useState<string>("");
const [currentMonth, setCurrentMonth] = useState(new Date());
// Séparer les événements
const upcomingEvents = events.filter(
(e) => e.status === "UPCOMING" || e.status === "LIVE"
);
const pastEvents = events.filter((e) => e.status === "PAST");
// Séparer et trier les événements (du plus récent au plus ancien)
const upcomingEvents = events
.filter((e) => e.status === "UPCOMING" || e.status === "LIVE")
.sort((a, b) => {
// Trier par date décroissante (du plus récent au plus ancien)
return b.date.localeCompare(a.date);
});
const pastEvents = events
.filter((e) => e.status === "PAST")
.sort((a, b) => {
// Trier par date décroissante (du plus récent au plus ancien)
return b.date.localeCompare(a.date);
});
// Créer un map des événements par date pour le calendrier
const eventsByDate: Record<string, Event[]> = {};