diff --git a/src/components/Event/Event.jsx b/src/components/Event/Event.jsx index deaec58..cc01258 100644 --- a/src/components/Event/Event.jsx +++ b/src/components/Event/Event.jsx @@ -1,9 +1,12 @@ import styles from "./Event.module.css"; -import {useState, useEffect} from "react"; -import {Link} from "react-router"; +import { useState, useEffect } from "react"; +import { useNavigate } from "react-router"; import Button from "/src/components/ui/button/button.jsx" function Event({event}){ + + const navigate = useNavigate(); + const [eventMenu, seteventMenu] = useState(false); const [windowSize, setWindowSize] = useState({ width: null, @@ -31,7 +34,7 @@ function Event({event}){
{event.image == null ? ( - Pas de photo de l'événement + Pas de photo de l'événement ) : ( Photo de l'événement )} @@ -39,37 +42,36 @@ function Event({event}){

{event.name}

{event.description}

-
-
    - {event.tasks - .slice(0,5) - .map((task, index) => ( -
  • - {task.name}
  • - ))} - {event.tasks.length > 5 ? ( -
  • ...
  • - ) : null} +
      + {event.tasks.length > 0 && ( + <> + {event.tasks.slice(0, 5).map((task, index) => ( +
    • {task.name}
    • + ))} + + {event.tasks.length > 5 &&
    • ...
    • } + + )}
    -
{windowSize.width > 768 ? (
- +
) : null}
{(windowSize.width <= 768 || eventMenu) ? ( - - - + + + ) : null}
diff --git a/src/components/Event/Event.module.css b/src/components/Event/Event.module.css index 142d004..e294c74 100644 --- a/src/components/Event/Event.module.css +++ b/src/components/Event/Event.module.css @@ -3,6 +3,7 @@ flex-direction: column; margin: 1rem 0; width: 80%; + padding: 1rem 0.5rem; } .eventContainerTop { @@ -45,11 +46,6 @@ font-size: 2rem; } - - - - - .eventButtons { display: flex; flex-direction: column; @@ -63,9 +59,6 @@ white-space: nowrap; } - - - .moreButton { background: none; border: none; @@ -94,19 +87,16 @@ rotate: 90deg; } - .eventMenuOpen { display: flex; + flex-direction: column; + margin-left: 1.5em; } .eventMenuClose { display: none; } - - - - @media screen and (max-width: 768px) { .eventImage { width: 100%; diff --git a/src/components/ui/button/button.jsx b/src/components/ui/button/button.jsx index 5ff769c..0fc74ab 100644 --- a/src/components/ui/button/button.jsx +++ b/src/components/ui/button/button.jsx @@ -1,6 +1,6 @@ import styles from "./button.module.css"; -const Button = ({ children, variant = "primary", onClick }) => { +const Button = ({ children, variant = "primary", onClick, className }) => { let btnStyle; if (variant === "primary") btnStyle = styles.primary; @@ -8,7 +8,7 @@ const Button = ({ children, variant = "primary", onClick }) => { else if(variant === "transparent") btnStyle = styles.transparent; else btnStyle = styles.default; - return
+ return
{children}
; }; diff --git a/src/pages/Events/EventsPage.jsx b/src/pages/Events/EventsPage.jsx index f547b45..5e84496 100644 --- a/src/pages/Events/EventsPage.jsx +++ b/src/pages/Events/EventsPage.jsx @@ -1,8 +1,9 @@ -import {useState} from "react"; +import { useEffect, useState } from "react"; import Event from "../../components/Event/Event.jsx"; -import {Link} from "react-router"; +import { Link } from "react-router"; import styles from "./EventsPage.module.css"; import Filter from "../../components/Filter/Filter.jsx"; +import getAllEvents from "../../utils/event/getAllEvents.js"; @@ -17,8 +18,11 @@ function EventsPage(){ yearOrder: "asc", }); - const [events] = useState([ - { + const [events, setEvents] = useState([]); + + /* + + { id: 1, name: "Marathon de la Ville", description: "Participez au marathon annuel et soutenez les associations locales.", @@ -41,144 +45,15 @@ function EventsPage(){ volunteers_count: 3 }, ] - }, - { - id: 2, - name: "Festival de Musique d’Été", - description: "Un week-end de concerts en plein air avec des artistes locaux et internationaux.", - image: null, - tasks: [ - { - 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 - }, - ] - }, - ]); + } + */ + + useEffect(() => { + (async () => { + const data = await getAllEvents(); + setEvents(data.data); + }) () + }, []); const compareDate = (dateA, dateB) => { const dA = new Date(dateA); @@ -191,6 +66,8 @@ function EventsPage(){ } }; + /* + const sortedEvents = [...events].sort((a, b) => { const sortedATasks = a.tasks.sort((taskA, taskB) => compareDate(taskA.start, taskB.start) @@ -217,6 +94,8 @@ function EventsPage(){ return 0; }); + */ + @@ -240,7 +119,7 @@ function EventsPage(){
- {sortedEvents.map((event, index) => ( + {events.map((event, index) => ( ))}
diff --git a/src/router.js b/src/router.js index 1576c66..bd0c986 100644 --- a/src/router.js +++ b/src/router.js @@ -25,10 +25,6 @@ const router = createBrowserRouter([ path: "/", Component: HomePage, }, - { - path: "/login", - Component: LoginPage, - }, { path: "/stat", Component:StatPage, diff --git a/src/utils/event/getAllEvents.js b/src/utils/event/getAllEvents.js new file mode 100644 index 0000000..f5e37c5 --- /dev/null +++ b/src/utils/event/getAllEvents.js @@ -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; + } + +} \ No newline at end of file