Merge branch 'features/linkHomePage' into 'dev'
Features/linkhomepage See merge request sae-but2/2025-26/gestion-benevoles-association/Frontend!55
This commit is contained in:
T'JAMPENS QUENTIN p2406187
@@ -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 (
|
||||
<div className={styles.glassCard}>
|
||||
<div className={styles.calendarContainer}>
|
||||
|
||||
<div className={styles.calendarHeader}>
|
||||
<button onClick={handlePrevMonth}>◀</button>
|
||||
<button onClick={() => setCurrentMonth(m => m === 0 ? 11 : m - 1)}>◀</button>
|
||||
<p>{monthNames[currentMonth]} {currentYear}</p>
|
||||
<button onClick={handleNextMonth}>▶</button>
|
||||
<button onClick={() => setCurrentMonth(m => m === 11 ? 0 : m + 1)}>▶</button>
|
||||
</div>
|
||||
|
||||
<table className={styles.calendar}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Lun</th>
|
||||
<th>Mar</th>
|
||||
<th>Mer</th>
|
||||
<th>Jeu</th>
|
||||
<th>Ven</th>
|
||||
<th>Sam</th>
|
||||
<th>Dim</th>
|
||||
<th>Lun</th><th>Mar</th><th>Mer</th>
|
||||
<th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{Array.from({length: Math.ceil(days.length / 7)}).map((_, weekIndex) => (
|
||||
<tr key={weekIndex}>
|
||||
{days.slice(weekIndex * 7, weekIndex * 7 + 7).map((day, index) => {
|
||||
{Array.from({ length: Math.ceil(days.length / 7) }).map((_, w) => (
|
||||
<tr key={w}>
|
||||
{days.slice(w * 7, w * 7 + 7).map((day, i) => {
|
||||
if (!day) return <td key={i}></td>;
|
||||
|
||||
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 (
|
||||
<td
|
||||
key={index}
|
||||
key={i}
|
||||
className={[
|
||||
day === today.getDate() &&
|
||||
currentMonth === today.getMonth() &&
|
||||
currentYear === today.getFullYear()
|
||||
? styles.today : "",
|
||||
hasEvent ? styles.hasEvent : "",
|
||||
selectedDay?.date === key ? styles.selected : ""
|
||||
].join(" ")}
|
||||
onClick={() => handleDayClick(day)}
|
||||
>
|
||||
{day || ""}
|
||||
{day}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
@@ -125,12 +102,15 @@ function Calendar() {
|
||||
|
||||
{selectedDay && (
|
||||
<div className={styles.eventBox}>
|
||||
<h3>Événements du {formatDateLetter(selectedDay.date)}</h3>
|
||||
<h3>Événements du {formatDateLetterJS(selectedDay.date)}</h3>
|
||||
|
||||
{selectedDay.events.length > 0 ? (
|
||||
<ul>
|
||||
{selectedDay.events.map((ev, i) => (
|
||||
<li key={i}>{ev}</li>
|
||||
{selectedDay.events.map(ev => (
|
||||
<li key={ev.id}>
|
||||
<strong>{ev.name}</strong><br />
|
||||
{ev.description}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
@@ -143,4 +123,4 @@ function Calendar() {
|
||||
);
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
export default Calendar;
|
||||
|
||||
@@ -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(
|
||||
|
||||
@@ -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 (
|
||||
<div className={styles.allContent}>
|
||||
<Calendar />
|
||||
|
||||
<EventList />
|
||||
<Calendar events={events} />
|
||||
<EventList events={events} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HomePage;
|
||||
export default HomePage;
|
||||
|
||||
@@ -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}`;
|
||||
}
|
||||
Reference in New Issue
Block a user