correction calendrier + correction export ics

src/pages/Home/components/Calendar/calendar.jsx

@@ -1,11 +1,15 @@
 import {useState, useMemo, useEffect, useContext} from "react";
 import styles from "./calendar.module.css";
-import { formatDateLetterJS } from "../../../../utils/date/formatDateLetter.js";
+import {formatDateLetterJS} from "../../../../utils/date/formatDateLetter.js";
 import {EventContext} from "../../../../contexts/events/EventContext.js";
+import Button from "../../../../components/ui/button/button.jsx";
+import {AuthContext} from "../../../../contexts/auth/AuthContext.ts";
 
 function Calendar() {
 
     const { events } = useContext(EventContext);
+    const { user } = useContext(AuthContext);
+
 
     const monthNames = [
         "Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
@@ -19,15 +23,15 @@ function Calendar() {
     const [selectedDay, setSelectedDay] = useState(null);
 
     const eventsByDate = useMemo(() => {
-        return events.reduce((acc, ev) => {
+        if (!user?.tasks) return {};
-            if (!ev?.start) return acc;
+        return user.tasks.reduce((acc, task) => {
-
+            if (!task?.start) return acc;
-            const dateKey = ev.start.split(" ")[0]; // YYYY-MM-DD
+            const dateKey = task.start.split(" ")[0];
             if (!acc[dateKey]) acc[dateKey] = [];
-            acc[dateKey].push(ev);
+            acc[dateKey].push(task);
             return acc;
         }, {});
-    }, [events]);
+    }, [user]);
 
     useEffect(() => {
         const key = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, "0")}-${String(today.getDate()).padStart(2, "0")}`;
@@ -72,12 +76,17 @@ function Calendar() {
                 <table className={styles.calendar}>
                     <thead>
                     <tr>
-                        <th>Lun</th><th>Mar</th><th>Mer</th>
+                        <th>Lun</th>
-                        <th>Jeu</th><th>Ven</th><th>Sam</th><th>Dim</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((_, w) => (
+                    {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>;
@@ -111,7 +120,7 @@ function Calendar() {
                             <ul>
                                 {selectedDay.events.map(ev => (
                                     <li key={ev.id}>
-                                        <strong>{ev.name}</strong><br />
+                                        <strong>{ev.name}</strong><br/>
                                         {ev.description}
                                     </li>
                                 ))}
@@ -121,6 +130,15 @@ function Calendar() {
                         )}
                     </div>
                 )}
+                <Button className={styles.exportbtn}
+                        variant={"primary"}
+                        onClick={() => {
+                            window.location.href =
+                                `http://localhost/api/export/ics`;
+                        }}
+                >
+                    Exporter mon agenda
+                </Button>
             </div>
         </div>
     );

src/pages/Home/components/Calendar/calendar.module.css

@@ -150,6 +150,10 @@
     display: none;
 }
 
+.exportbtn{
+    margin-top: 16px;
+}
+
 @media (max-width: 768px) {
     .glassCard {
         width: 100%;