Use event Context

src/components/createEventBtn/CreateEventBtn.jsx

@@ -1,13 +1,15 @@
 import styles from "./createEventBtn.module.css"
-import { useState } from "react";
+import { useState, useContext } from "react";
 import Modal from "../ui/modal/modal.jsx";
 import Button from "../ui/button/button.jsx";
 import TextInput from "../ui/input/input.jsx";
-import createEvent from "../../utils/events/createEvent.js"
+import { EventContext } from "../../contexts/events/EventContext.js";
 
 
 export default function CreateEventBtn() {
 
+    const { addEvent } = useContext(EventContext);
+
     const [isOpen, setIsOpen] = useState(false);
     const [name, setName] = useState("");
     const [description, setDescription] = useState("");
@@ -17,8 +19,7 @@ export default function CreateEventBtn() {
     const handleCreateEvent = async () => {
 
         if(name !== "" || description !== "" || start !== "" || end !== "") {
-            await createEvent(name, description, start, end);
-            console.log(start);
+            await addEvent(name, description, start, end);
         }
         setIsOpen(false);
     }

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} />