diff --git a/package-lock.json b/package-lock.json index 1ef73dc..fb4813e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,7 +83,6 @@ "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.3", @@ -1641,7 +1640,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/babel__core": { "version": "7.20.5", @@ -1751,7 +1751,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz", "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.0.2" } @@ -1996,7 +1995,6 @@ "integrity": "sha512-lruSgrYPVAJzKmX6EJYCg9nY+0A4VkeTLpTzf1jRD/XMjNbzD9yy7D499xmVKglwJczANYJXBvZSPGcRlon+0w==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/mocker": "4.0.13", "@vitest/utils": "4.0.13", @@ -2020,7 +2018,6 @@ "integrity": "sha512-oaRY+/pvwS4/sN2rE2aZh9jdli8EkXm5AidmXEbWRu2wW0omG9PmgChWCX2jsD9qRLQxXTSLl5oKezANNF6LnQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/browser": "4.0.13", "@vitest/mocker": "4.0.13", @@ -2195,7 +2192,6 @@ "integrity": "sha512-9IKlAru58wcVaWy7hz6qWPb2QzJTKt+IOVKjAx5vb5rzEFPTL6H4/R9BMvjZ2ppkxKgTrFONEJFtzvnyEpiT+A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/utils": "4.0.13", "pathe": "^2.0.3" @@ -2249,7 +2245,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -2484,7 +2479,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.8.9", "caniuse-lite": "^1.0.30001746", @@ -2568,7 +2562,6 @@ "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.1.tgz", "integrity": "sha512-GIjfiT9dbmHRiYi6Nl2yFCq7kkwdkp1W/lp2J99rX0yo9tgJGn3lKQATztIjb5tVtevcBtIdICNWqlq5+E8/Pw==", "license": "MIT", - "peer": true, "dependencies": { "@kurkle/color": "^0.3.0" }, @@ -2782,17 +2775,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" - }, - "node_modules/dom-helpers": { - "version": "5.2.1", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", - "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.8.7", - "csstype": "^3.0.2" - } + "peer": true }, "node_modules/dom-helpers": { "version": "5.2.1", @@ -2858,7 +2842,6 @@ "dev": true, "hasInstallScript": true, "license": "MIT", - "peer": true, "bin": { "esbuild": "bin/esbuild" }, @@ -2922,7 +2905,6 @@ "integrity": "sha512-XyLmROnACWqSxiGYArdef1fItQd47weqB7iwtfr9JHwRrqIXZdcFMvvEcL9xHCmL0SNsOvF0c42lWyM1U5dgig==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -3832,6 +3814,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -4226,7 +4209,6 @@ "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "playwright-core": "1.56.1" }, @@ -4308,6 +4290,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -4323,6 +4306,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -4335,7 +4319,8 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/prompts": { "version": "2.4.2", @@ -4411,7 +4396,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz", "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -4494,7 +4478,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz", "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -4668,7 +4651,6 @@ "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -4856,7 +4838,6 @@ "integrity": "sha512-vQMufKKA9TxgoEDHJv3esrqUkjszuuRiDkThiHxENFPdQawHhm2Dei+iwNRwH5W671zTDy9iRT9P1KDjcU5Iyw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@storybook/global": "^5.0.0", "@storybook/icons": "^1.6.0", @@ -5360,7 +5341,6 @@ "integrity": "sha512-4nVGliEpxmhCL8DslSAUdxlB6+SMrhB0a1v5ijlh1xB1nEPuy1mxaHxysVucLHuWryAxLWg6a5ei+U4TLn/rFg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -5451,7 +5431,6 @@ "integrity": "sha512-QSD4I0fN6uZQfftryIXuqvqgBxTvJ3ZNkF6RWECd82YGAYAfhcppBLFXzXJHQAAhVFyYEuFTrq6h0hQqjB7jIQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "4.0.13", "@vitest/mocker": "4.0.13", diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 290cb24..5b4300f 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -55,11 +55,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user?.isAdmin && ( + {user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )}*/} + )} @@ -91,11 +91,11 @@ function Header() { isActive ? styles.activeLink : styles.link}> Bénévoles - {/*{user?.isAdmin && ( + {user?.isAdmin && ( isActive ? styles.activeLink : styles.link}> Administration - )}*/} + )} diff --git a/src/components/createEventBtn/CreateEventBtn.jsx b/src/components/createEventBtn/CreateEventBtn.jsx index 3e638db..7e99ec4 100644 --- a/src/components/createEventBtn/CreateEventBtn.jsx +++ b/src/components/createEventBtn/CreateEventBtn.jsx @@ -11,10 +11,15 @@ export default function CreateEventBtn() { const [isOpen, setIsOpen] = useState(false); const [name, setName] = useState(""); const [description, setDescription] = useState(""); + const [start, setStart] = useState(""); + const [end, setEnd] = useState(""); const handleCreateEvent = async () => { - if(name !== "" || description !== "") await createEvent(name, description); + if(name !== "" || description !== "" || start !== "" || end !== "") { + await createEvent(name, description, start, end); + console.log(start); + } setIsOpen(false); } @@ -26,16 +31,29 @@ export default function CreateEventBtn() {

Titre

- setName(e.target.value)} /> + setName(e.target.value)} />

Description

- setDescription(e.target.value)} /> + setDescription(e.target.value)} /> +
+ +
+

Date

+
+
+

Début

+ setStart(e.target.value)} /> +
+
+

Fin

+ setEnd(e.target.value)} /> +
+
-
diff --git a/src/components/createEventBtn/createEventBtn.module.css b/src/components/createEventBtn/createEventBtn.module.css index 5676052..045d533 100644 --- a/src/components/createEventBtn/createEventBtn.module.css +++ b/src/components/createEventBtn/createEventBtn.module.css @@ -26,6 +26,14 @@ } margin: 1em; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.input { + width: 70%; } .create { @@ -38,4 +46,14 @@ gap: 10px; margin-top: 15px; margin-bottom: 15px; +} + +.dateInputContainer { + display: flex; + flex-direction: row; + justify-content: space-evenly; +} + +.dateInput { + margin: 1em; } \ No newline at end of file diff --git a/src/components/homePage/calendar.jsx b/src/components/homePage/calendar.jsx index 9ee4d57..d84fb08 100644 --- a/src/components/homePage/calendar.jsx +++ b/src/components/homePage/calendar.jsx @@ -1,30 +1,39 @@ -import {useState} from "react"; +import { useState, useMemo, useEffect } from "react"; import styles from "./calendar.module.css"; -import formatDateLetter from "../../utils/date/formatDateLetter.js"; +import { formatDateLetterJS } from "../../utils/date/formatDateLetter.js"; + +function Calendar({ events = [] }) { -function Calendar() { - const events = { - "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"], - "2025-11-10": ["Cours de React", "Rendez-vous médecin"], - "2025-11-14": ["Sortie cinéma"], - "2025-11-15": ["Sortie cinéma"], - "2025-11-17": ["Sortie cinéma"], - }; const monthNames = [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]; const today = new Date(); + const [currentMonth, setCurrentMonth] = useState(today.getMonth()); const [currentYear, setCurrentYear] = useState(today.getFullYear()); - const [selectedDay, setSelectedDay] = useState(() => { - const year = today.getFullYear(); - const month = String(today.getMonth() + 1).padStart(2, "0"); - const day = String(today.getDate()).padStart(2, "0"); - const key = `${year}-${month}-${day}`; - return {date: key, events: events[key] || []}; - }); + const [selectedDay, setSelectedDay] = useState(null); + + const eventsByDate = useMemo(() => { + return events.reduce((acc, ev) => { + if (!ev?.start) return acc; + + const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD + if (!acc[dateKey]) acc[dateKey] = []; + acc[dateKey].push(ev); + return acc; + }, {}); + }, [events]); + + useEffect(() => { + const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`; + + setSelectedDay({ + date: key, + events: eventsByDate[key] || [] + }); + }, [eventsByDate]); const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate(); const firstDay = new Date(currentYear, currentMonth, 1).getDay(); @@ -34,87 +43,55 @@ function Calendar() { for (let i = 0; i < startDay; i++) days.push(null); for (let i = 1; i <= daysInMonth; i++) days.push(i); - const handlePrevMonth = () => { - let newMonth = currentMonth - 1; - let newYear = currentYear; - - if (newMonth < 0) { - newMonth = 11; - newYear--; - } - - setCurrentMonth(newMonth); - setCurrentYear(newYear); - - const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`; - setSelectedDay({date: key, events: events[key] || []}); - }; - - const handleNextMonth = () => { - let newMonth = currentMonth + 1; - let newYear = currentYear; - - if (newMonth > 11) { - newMonth = 0; - newYear++; - } - - setCurrentMonth(newMonth); - setCurrentYear(newYear); - - const key = `${newYear}-${String(newMonth + 1).padStart(2, "0")}-01`; - setSelectedDay({date: key, events: events[key] || []}); + const selectDay = (year, month, day) => { + const key = `${year}-${String(month + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; + setSelectedDay({ + date: key, + events: eventsByDate[key] || [] + }); }; const handleDayClick = (day) => { if (!day) return; - const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; - setSelectedDay({date: key, events: events[key] || []}); + selectDay(currentYear, currentMonth, day); }; return (
+
- +

{monthNames[currentMonth]} {currentYear}

- +
- - - - - - - + + - - {Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => ( - - {days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => { + {Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => ( + + {days.slice(w * 7, w * 7 + 7).map((day, i) => { + if (!day) return ; + const key = `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}-${String(day).padStart(2, "0")}`; - const hasEvent = events[key]; + const hasEvent = (eventsByDate[key]?.length ?? 0) > 0; return ( ); })} @@ -129,8 +106,11 @@ function Calendar() { {selectedDay.events.length > 0 ? ( ) : ( diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index f6e1de4..b7c7650 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -1,21 +1,17 @@ -import {useMemo} from "react"; +import { useMemo } from "react"; import styles from "./eventList.module.css"; -import formatDateLetter from "../../utils/date/formatDateLetter.js"; -function eventList() { - const events = { - "2025-11-07": ["Réunion de projet", "Anniversaire de Marie"], - "2025-11-10": ["Cours de React", "Rendez-vous médecin"], - "2025-11-14": ["Sortie cinéma"], - "2025-11-15": ["Sortie cinéma"], - "2025-11-17": ["Sortie cinéma"], - }; +import { formatDateLetter } from "../../utils/date/formatDateLetter.js"; + + +function EventList({ events }) { const sortedEvents = useMemo(() => { - return Object.entries(events) - .map(([dateKey, eventList]) => ({date: dateKey, events: eventList})) - .sort((a, b) => new Date(a.date) - new Date(b.date)); + return [...events].sort( + (a, b) => new Date(a.start) - new Date(b.start) + ); }, [events]); + return (

Liste des événements à venir

@@ -27,11 +23,15 @@ function eventList() { {formatDateLetter(eventGroup.date)}
+ ))} ) : ( @@ -42,4 +42,4 @@ function eventList() { ); } -export default eventList; \ No newline at end of file +export default EventList; \ No newline at end of file diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css index b0598e2..cd2b3d6 100644 --- a/src/components/homePage/eventList.module.css +++ b/src/components/homePage/eventList.module.css @@ -25,9 +25,8 @@ } .eventDetails { - list-style: none; + margin-top: 10px; padding: 0; - margin: 0; } .dateSelected{ @@ -45,6 +44,22 @@ h2{ padding: 10px 20px 10px 20px; } +.eventTitle { + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.title { + font-weight: bold; +} + +.eventTasks { + display: flex; + flex-direction: row; + justify-content: space-between; +} + @media (max-width: 768px) { .glassCard { width: 100%; diff --git a/src/pages/Home/HomePage.jsx b/src/pages/Home/HomePage.jsx index 21b8881..02bde02 100644 --- a/src/pages/Home/HomePage.jsx +++ b/src/pages/Home/HomePage.jsx @@ -1,15 +1,26 @@ import styles from "./HomePage.module.css"; import Calendar from "../../components/homePage/calendar.jsx"; import EventList from "../../components/homePage/eventList.jsx"; +import { useState, useEffect } from "react"; +import getAllEvents from "../../utils/event/getAllEvents.js"; function HomePage() { + + const [events, setEvents] = useState([]); + + useEffect(() => { + (async () => { + const data = await getAllEvents(); + setEvents(data.data); + }) () + }, []) + return (
- - - + +
); } -export default HomePage; \ No newline at end of file +export default HomePage; diff --git a/src/utils/date/formatDateLetter.js b/src/utils/date/formatDateLetter.js index 8143337..3480835 100644 --- a/src/utils/date/formatDateLetter.js +++ b/src/utils/date/formatDateLetter.js @@ -1,8 +1,22 @@ -export default function formatDateLetter(d) { +export function formatDateLetter(d) { const monthNames = [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ]; - const [year, month, day] = d.split('-'); - return `${day} ${monthNames[parseInt(month) - 1]} ${year}`; -}; \ No newline at end of file + + const [datePart, timePart] = d.split(' '); + const [year, month, day] = datePart.split('-'); + const [hours, minutes] = timePart.split(':'); + + return `${day} ${monthNames[parseInt(month, 10) - 1]} ${year} à ${hours}:${minutes}`; +} + + +export function formatDateLetterJS(d) { + const monthNames = [ + "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", + "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" + ]; + const [year, month, day] = d.split('-'); + return `${day} ${monthNames[parseInt(month) - 1]} ${year}`; +} \ No newline at end of file diff --git a/src/utils/event/createEvent.js b/src/utils/event/createEvent.js index 4098dd7..d1b0735 100644 --- a/src/utils/event/createEvent.js +++ b/src/utils/event/createEvent.js @@ -1,6 +1,6 @@ import getXSRFToken from "../getXSRF.js"; -export default async function createEvent(name, description) { +export default async function createEvent(name, description, start, end) { const csrfToken = await getXSRFToken(); try { @@ -12,7 +12,7 @@ export default async function createEvent(name, description) { 'X-XSRF-TOKEN': csrfToken, 'Accept': 'application/json' }, - body: JSON.stringify({ name, description }), + body: JSON.stringify({ name, description, start, end }), }); const data = await response.json();
LunMarMerJeuVenSamDimLunMarMerJeuVenSamDim
handleDayClick(day)} > - {day || ""} + {day}