Use event Context

src/pages/Events/EventsPage.jsx

@@ -1,33 +1,29 @@
-import { useEffect, useState } from "react";
+import { useEffect, 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 getAllEvents from "../../utils/events/getAllEvents.js";
 import filter from "../../utils/filter.js";
+import { EventContext } from "../../contexts/events/EventContext.js";
 
 
 function EventsPage(){
+
+    const { updateEvent, events } = useContext(EventContext);
+
+    useEffect(() => {
+        (async () => {
+            updateEvent();
+        }) ()
+    }, []);
+
     const [filters, setFilters] = useState({
         alphabetical: "asc",
         yearOrder: "desc",
     });
-
-
-    const [events, setEvents] = useState([]);
-
-
-
-    useEffect(() => {
-        (async () => {
-            const data = await getAllEvents();
-            setEvents(data.data);
-        }) ()
-    }, []);
-
-
+    
     return (
         <div className={styles.eventsContainer}>
-            <ToolBar setFilters={setFilters} filters={filters}/>
+            <ToolBar setFilters={setFilters} filters={filters} />
             <div className={styles.eventsList}>
                 {filter(events, filters, "event").map((event, index) => (
                     <Event key={index} event={event} />