diff --git a/src/components/homePage/calendar.jsx b/src/components/homePage/calendar.jsx index f8ed8f2..ab2da6d 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 ( ); })} @@ -125,12 +102,15 @@ function Calendar() { {selectedDay && (
-

Événements du {formatDateLetter(selectedDay.date)}

+

Événements du {formatDateLetterJS(selectedDay.date)}

{selectedDay.events.length > 0 ? (
    - {selectedDay.events.map((ev, i) => ( -
  • {ev}
    • + {selectedDay.events.map(ev => ( +
  • + {ev.name}
    + {ev.description} +
    • ))}
) : ( @@ -143,4 +123,4 @@ function Calendar() { ); } -export default Calendar; \ No newline at end of file +export default Calendar; diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx index 115b2cc..3643509 100644 --- a/src/components/homePage/eventList.jsx +++ b/src/components/homePage/eventList.jsx @@ -1,20 +1,9 @@ -import { useMemo, useEffect, useState } from "react"; +import { useMemo } from "react"; import styles from "./eventList.module.css"; -import formatDateLetter from "../../utils/date/formatDateLetter.js"; -import getAllEvents from "../../utils/event/getAllEvents.js"; +import { formatDateLetter } from "../../utils/date/formatDateLetter.js"; -function EventList() { - - const [events, setEvents] = useState([]); - - useEffect(() => { - (async () => { - const data = await getAllEvents(); - setEvents(data.data); - console.log(data.data); - }) () - }, []) +function EventList({ events }) { const sortedEvents = useMemo(() => { return [...events].sort( 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 67cd8f6..3480835 100644 --- a/src/utils/date/formatDateLetter.js +++ b/src/utils/date/formatDateLetter.js @@ -1,4 +1,4 @@ -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" @@ -10,3 +10,13 @@ export default function formatDateLetter(d) { 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
LunMarMerJeuVenSamDimLunMarMerJeuVenSamDim
handleDayClick(day)} > - {day || ""} + {day}