convert to TS EventPage

src/pages/Events/EventsPage.jsx

@@ -1,33 +0,0 @@
-import { useState, useContext } from "react";
-import Event from "./components/Event/Event.jsx";
-import styles from "./EventsPage.module.css";
-import ToolBar from "../../components/ToolBar/ToolBar.jsx";
-import filter from "../../utils/filter.js";
-import { EventContext } from "../../contexts/Events/EventContext.js";
-
-
-function EventsPage(){
-
-    const { events } = useContext(EventContext);
-
-    const [filters, setFilters] = useState({
-        alphabetical: "asc",
-        yearOrder: "desc",
-    });
-    
-    return (
-        <div className={styles.eventsContainer}>
-            <ToolBar setFilters={setFilters} filters={filters} />
-            <div className={styles.eventsList}>
-                {Array.isArray(events) && events.length > 0  ? (
-                    filter(events, filters, "event").map((event, index) => (
-                        <Event key={index} event={event} />
-                    ))) : (
-                    <p>Aucun événement n'existe pour le moment</p>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default EventsPage;

src/pages/Events/EventsPage.tsx

@@ -0,0 +1,41 @@
+import { useState, useContext } from "react";
+import Event from "./components/Event/Event";
+import styles from "./EventsPage.module.css";
+import ToolBar from "../../components/ToolBar/ToolBar";
+import filter from "../../utils/filter";
+import { EventContext, EventGroup, EventContextType } from "../../contexts/Events/EventContext";
+
+interface FilterOptions {
+    alphabetical: "asc" | "desc";
+    yearOrder: "asc" | "desc";
+}
+
+function EventsPage() {
+    const eventContext = useContext(EventContext);
+    if (!eventContext) {
+        throw new Error("EventsPage must be used within an EventContext.Provider");
+    }
+    const { events } = eventContext;
+
+    const [filters, setFilters] = useState<FilterOptions>({
+        alphabetical: "asc",
+        yearOrder: "desc",
+    });
+
+    return (
+        <div className={styles.eventsContainer}>
+            <ToolBar setFilters={setFilters} filters={filters} />
+            <div className={styles.eventsList}>
+                {Array.isArray(events) && events.length > 0 ? (
+                    filter(events, filters, "event").map((event: EventGroup, index: number) => (
+                        <Event key={index} event={event} />
+                    ))
+                ) : (
+                    <p>Aucun événement n'existe pour le moment</p>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export default EventsPage;