get db events

This commit is contained in:
T'JAMPENS QUENTIN p2406187 committed 2025-12-07 01:07:27 +01:00
1 parent 191044e520
commit d2e95744b8
3 files changed
+55 -151

No files matched your search

+10 -8
View File
@@ -41,14 +41,16 @@ function Event({event}){
<p>{event.description}</p> <p>{event.description}</p>
<div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}> <div className={eventMenu ? styles.eventMenuOpen : styles.eventMenuClose}>
<ul> <ul>
{event.tasks {event.tasks.length > 0 && (
.slice(0,5) <>
.map((task, index) => ( {event.tasks.slice(0, 5).map((task, index) => (
<li key={index}> - {task.name}</li> <li key={index}> {task.name} </li>
))} ))}
{event.tasks.length > 5 ? (
<li>...</li> {event.tasks.length > 5 && <li>...</li>}
) : null} </>
)}
</ul> </ul>
</div> </div>
</div> </div>
+22 -143
View File
@@ -1,8 +1,9 @@
import {useState} from "react"; import { useEffect, useState } from "react";
import Event from "../../components/Event/Event.jsx"; import Event from "../../components/Event/Event.jsx";
import {Link} from "react-router"; import { Link } from "react-router";
import styles from "./EventsPage.module.css"; import styles from "./EventsPage.module.css";
import Filter from "../../components/Filter/Filter.jsx"; import Filter from "../../components/Filter/Filter.jsx";
import getAllEvents from "../../utils/event/getAllEvents.js";
@@ -17,8 +18,11 @@ function EventsPage(){
yearOrder: "asc", yearOrder: "asc",
}); });
const [events] = useState([ const [events, setEvents] = useState([]);
{
/*
{
id: 1, id: 1,
name: "Marathon de la Ville", name: "Marathon de la Ville",
description: "Participez au marathon annuel et soutenez les associations locales.", description: "Participez au marathon annuel et soutenez les associations locales.",
@@ -41,144 +45,15 @@ function EventsPage(){
volunteers_count: 3 volunteers_count: 3
}, },
] ]
}, }
{ */
id: 2,
name: "Festival de Musique d’Été", useEffect(() => {
description: "Un week-end de concerts en plein air avec des artistes locaux et internationaux.", (async () => {
image: null, const data = await getAllEvents();
tasks: [ setEvents(data.data);
{ }) ()
name: "Montage de la scène", }, []);
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Parc central",
description: "Installer la scène, les éclairages et le son.",
volunteers_count: 6
},
{
name: "Accueil du public",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Entrée principale",
description: "Vérifier les billets et orienter les visiteurs.",
volunteers_count: 4
},
]
},
{
id: 3,
name: "Conférence Tech Innovante",
description: "Journée de conférences et workshops autour des nouvelles technologies.",
image: null,
tasks: [
{
name: "Préparation des salles",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Campus Tech",
description: "Installer les chaises, projecteurs et matériel pour les conférences.",
volunteers_count: 4
},
{
name: "Accueil des intervenants",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Hall principal",
description: "Assister les speakers et orienter vers les salles.",
volunteers_count: 2
},
{
name: "Gestion du buffet",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Salle de restauration",
description: "Distribuer boissons et repas aux participants.",
volunteers_count: 3
},
]
},
{
id: 4,
name: "Atelier de Jardinage Urbain",
description: "Apprenez à cultiver vos plantes en ville et participez à la création de jardins partagés.",
image: null,
tasks: [
{
name: "Installation du matériel",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Jardin partagé",
description: "Préparer outils et terreaux pour les participants.",
volunteers_count: 2
},
{
name: "Encadrement des participants",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Jardin partagé",
description: "Aider et conseiller sur la plantation et l’entretien.",
volunteers_count: 3
},
]
},
{
id: 5,
name: "Collecte de Sang",
description: "Aidez à sauver des vies en participant à notre collecte de sang annuelle.",
image: null,
tasks: [
{
name: "Accueil et enregistrement",
start: "2020-09-24 22:21:20",
end: "2020-09-24 22:21:20",
place: "Salle municipale",
description: "Enregistrer les donneurs et expliquer le processus.",
volunteers_count: 4
},
{
name: "Préparation des salles",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Salle municipale",
description: "Installer les lits, tables et matériel médical.",
volunteers_count: 3
},
{
name: "Assistance post-don",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Salle municipale",
description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
volunteers_count: 2
},
{
name: "Accueil et enregistrement",
start: "2020-09-24 22:21:20",
end: "2020-09-24 22:21:20",
place: "Salle municipale",
description: "Enregistrer les donneurs et expliquer le processus.",
volunteers_count: 4
},
{
name: "Préparation des salles",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Salle municipale",
description: "Installer les lits, tables et matériel médical.",
volunteers_count: 3
},
{
name: "Assistance post-don",
start: "2018-09-24 22:21:20",
end: "2018-09-24 22:21:20",
place: "Salle municipale",
description: "Accompagner les donneurs après le don et proposer des rafraîchissements.",
volunteers_count: 2
},
]
},
]);
const compareDate = (dateA, dateB) => { const compareDate = (dateA, dateB) => {
const dA = new Date(dateA); const dA = new Date(dateA);
@@ -191,6 +66,8 @@ function EventsPage(){
} }
}; };
/*
const sortedEvents = [...events].sort((a, b) => { const sortedEvents = [...events].sort((a, b) => {
const sortedATasks = a.tasks.sort((taskA, taskB) => const sortedATasks = a.tasks.sort((taskA, taskB) =>
compareDate(taskA.start, taskB.start) compareDate(taskA.start, taskB.start)
@@ -217,6 +94,8 @@ function EventsPage(){
return 0; return 0;
}); });
*/
@@ -240,7 +119,7 @@ function EventsPage(){
</div> </div>
</div> </div>
<div className={styles.eventsList}> <div className={styles.eventsList}>
{sortedEvents.map((event, index) => ( {events.map((event, index) => (
<Event key={index} event={event} /> <Event key={index} event={event} />
))} ))}
</div> </div>
+23
View File
@@ -0,0 +1,23 @@
export default async function getAllEvents() {
try {
const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/events/`, {
method: 'GET',
credentials: 'include',
headers: {
'Accept': 'application/json'
}
});
if (!res.ok) {
throw new Error(`Erreur serveur : ${res.status}`);
}
const data = await res.json();
return data;
} catch (err) {
console.error('Erreur :', err);
return null;
}
}