Merge branch 'features/ts' into dev

src/pages/Home/components/EventList/eventItem.jsx

@@ -1,25 +0,0 @@
-import styles from "./eventList.module.css";
-import { formatDateLetter } from "../../../../utils/date/formatDateLetter.js";
-import { useState } from "react";
-
-export default function EventItem({ eventGroup }) {
-
-    const [isVisible, setIsVisible] = useState(false);
-
-    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
-        <div className={styles.eventTitle}>
-            <p className={styles.title}>{eventGroup.name}</p>
-            <p>{formatDateLetter(eventGroup.start)}</p>
-        </div>
-        {isVisible &&
-            <ul className={styles.eventDetails}>
-                {eventGroup.tasks.map((task, i) => (
-                    <li key={i} className={styles.eventTasks}>
-                        <p>- {task.name} - {task.description}</p>
-                        <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
-                    </li>
-                ))}
-            </ul>
-        }
-    </div>
-}

src/pages/Home/components/EventList/eventItem.tsx

@@ -0,0 +1,80 @@
+import styles from "./eventList.module.css";
+import { formatDateLetter } from "../../../../utils/date/formatDateLetter";
+import { useState } from "react";
+
+type Task = {
+  name: string;
+  description: string;
+  start: string | Date;
+  end: string | Date;
+};
+
+type EventGroup = {
+  date: string;
+  name: string;
+  start: string | Date;
+  tasks: Task[];
+};
+
+type EventItemProps = {
+  eventGroup: EventGroup;
+};
+
+export default function EventItem({ eventGroup }: EventItemProps) {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
+
+  return (
+    <div
+      key={eventGroup.date}
+      className={`${styles.eventGroup} glassBorder`}
+      onClick={() => setIsVisible(!isVisible)}
+    >
+      <div className={styles.eventTitle}>
+        <p className={styles.title}>{eventGroup.name}</p>
+        <p>{formatDateLetter(eventGroup.start)}</p>
+      </div>
+
+      {isVisible && (
+        <ul className={styles.eventDetails}>
+          {eventGroup.tasks.map((task, i) => (
+            <li key={i} className={styles.eventTasks}>
+              <p>
+                - {task.name} - {task.description}
+              </p>
+              <p>
+                {formatDateLetter(task.start)} - {formatDateLetter(task.end)}
+              </p>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+/*import styles from "./eventList.module.css";
+import { formatDateLetter } from "../../../../utils/date/formatDateLetter.ts";
+import { useState } from "react";
+
+export default function EventItem({ eventGroup }) {
+
+    const [isVisible, setIsVisible] = useState(false);
+
+    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
+        <div className={styles.eventTitle}>
+            <p className={styles.title}>{eventGroup.name}</p>
+            <p>{formatDateLetter(eventGroup.start)}</p>
+        </div>
+        {isVisible &&
+            <ul className={styles.eventDetails}>
+                {eventGroup.tasks.map((task, i) => (
+                    <li key={i} className={styles.eventTasks}>
+                        <p>- {task.name} - {task.description}</p>
+                        <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                    </li>
+                ))}
+            </ul>
+        }
+    </div>
+}
+*/

src/pages/Home/components/EventList/eventList.jsx

@@ -1,35 +0,0 @@
-import { useMemo } from "react";
-import styles from "./eventList.module.css";
-import EventItem from "./eventItem.jsx";
-import { EventContext } from "../../../../contexts/events/EventContext.js";
-import { useContext } from "react";
-
-function EventList() {
-    // Utilise une valeur par défaut pour `events` si elle est `undefined`
-    const { events = [] } = useContext(EventContext);
-
-    const sortedEvents = useMemo(() => {
-        // Vérifie explicitement que `events` est un tableau avant de trier
-        if (!Array.isArray(events)) return [];
-        return [...events].sort(
-            (a, b) => new Date(a.start) - new Date(b.start)
-        );
-    }, [events]);
-
-    return (
-        <div className={`${styles.glassCard} glassCard`}>
-            <h2>Liste des événements à venir</h2>
-            {sortedEvents.length > 0 ? (
-                <div className={styles.eventList}>
-                    {sortedEvents.map((eventGroup, index) => (
-                        <EventItem eventGroup={eventGroup} key={index} />
-                    ))}
-                </div>
-            ) : (
-                <p>Aucun événement planifié pour l'instant.</p>
-            )}
-        </div>
-    );
-}
-
-export default EventList;

src/pages/Home/components/EventList/eventList.tsx

@@ -0,0 +1,88 @@
+/*import { useMemo } from "react";
+import styles from "./eventList.module.css";
+import EventItem from "./eventItem.jsx";
+import { EventContext } from "../../../../contexts/events/EventContext.js";
+import { useContext } from "react";
+
+function EventList() {
+    // Utilise une valeur par défaut pour `events` si elle est `undefined`
+    const { events = [] } = useContext(EventContext);
+
+    const sortedEvents = useMemo(() => {
+        // Vérifie explicitement que `events` est un tableau avant de trier
+        if (!Array.isArray(events)) return [];
+        return [...events].sort(
+            (a, b) => new Date(a.start) - new Date(b.start)
+        );
+    }, [events]);
+
+    return (
+        <div className={`${styles.glassCard} glassCard`}>
+            <h2>Liste des événements à venir</h2>
+            {sortedEvents.length > 0 ? (
+                <div className={styles.eventList}>
+                    {sortedEvents.map((eventGroup, index) => (
+                        <EventItem eventGroup={eventGroup} key={index} />
+                    ))}
+                </div>
+            ) : (
+                <p>Aucun événement planifié pour l'instant.</p>
+            )}
+        </div>
+    );
+}
+
+export default EventList;*/
+import { useMemo, useContext } from "react";
+import styles from "./eventList.module.css";
+import EventItem from "./eventItem";
+import { EventContext } from "../../../../contexts/events/EventContext";
+
+type Task = {
+  name: string;
+  description: string;
+  start: string | Date;
+  end: string | Date;
+};
+
+type EventGroup = {
+  date: string;
+  name: string;
+  start: string | Date;
+  tasks: Task[];
+};
+
+type EventContextType = {
+  events?: EventGroup[];
+};
+
+function EventList() {
+  const { events = [] } = useContext(EventContext) as EventContextType;
+
+  const sortedEvents = useMemo<EventGroup[]>(() => {
+    if (!Array.isArray(events)) return [];
+
+    return [...events].sort(
+      (a, b) =>
+        new Date(a.start).getTime() - new Date(b.start).getTime()
+    );
+  }, [events]);
+
+  return (
+    <div className={`${styles.glassCard} glassCard`}>
+      <h2>Liste des événements à venir</h2>
+
+      {sortedEvents.length > 0 ? (
+        <div className={styles.eventList}>
+          {sortedEvents.map((eventGroup, index) => (
+            <EventItem eventGroup={eventGroup} key={index} />
+          ))}
+        </div>
+      ) : (
+        <p>Aucun événement planifié pour l'instant.</p>
+      )}
+    </div>
+  );
+}
+
+export default EventList;