merge dev into admin

src/components/Header/Header.jsx

@@ -1,7 +1,8 @@
 import styles from "./Header.module.css"
 import { Link, NavLink } from "react-router";
-import { useEffect, useRef, useState } from "react";
+import {useContext, useEffect, useRef, useState} from "react";
 import getUserNotifications from "../../utils/getUserNotifications.js";
+import {AuthContext} from "../../contexts/auth/AuthContext.js";
 
 function Header() {
     const [notificationMenu, setnotificationMenu] = useState(false);
@@ -10,6 +11,7 @@ function Header() {
     const [notifications, setNotifications] = useState([{"content" : "ok"}, {"content" : "pourquoi pas antoine"}]);
     const notificationRef = useRef(null);
 
+    const { user } = useContext(AuthContext);
 
 
     useEffect(() => {
@@ -41,7 +43,7 @@ function Header() {
                 <nav className={`${mobileMenu ? styles.inactiveHeaderContent : styles.activeHeaderContent}`}>
                     <div className={styles.headerLeftContent}>
                         <NavLink className={styles.logoLink} to="/">
-                            <img src="logo.png" alt="logo" className={styles.logo} />
+                            <img src="/logo.png" alt="logo" className={styles.logo} />
                         </NavLink>
                         <div className={styles.navLinks}>
                             <NavLink to="/" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
@@ -53,6 +55,9 @@ function Header() {
                             <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                                 Bénévoles
                             </NavLink>
+                            {user.isAdmin && <NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
+                                Administration
+                            </NavLink>}
                         </div>
                     </div>
 
@@ -64,12 +69,12 @@ function Header() {
                                 setunreadNotification(false);
                             }}
                         >
-                            <img className={styles.notificationsImg} src="bell.svg" alt="notifications"/>
+                            <img className={styles.notificationsImg} src="/bell.svg" alt="notifications"/>
                             {unreadNotification && <span className={styles.notificationBadge}></span>}
                         </button>
 
                         <Link to="/profile" className={styles.profileLink}>
-                            <img className={styles.profileImg} src="person.svg" alt="profile"/>
+                            <img className={styles.profileImg} src="/person.svg" alt="profile"/>
                         </Link>
                     </div>
                 </nav>
@@ -84,6 +89,9 @@ function Header() {
                     <NavLink to="/volunteers" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
                         Bénévoles
                     </NavLink>
+                    {user.isAdmin && <NavLink to="/admin" className={({ isActive }) => isActive ? styles.activeLink : styles.link}>
+                        Administration
+                    </NavLink>}
                 </nav>
 
 
@@ -114,7 +122,7 @@ function Header() {
                                 className={styles.closeBtn}
                                 onClick={() => setNotifications(prev => prev.filter((_, i) => i !== index))}
                             >
-                                <img src="close.svg" alt="supprimer la notification"/>
+                                <img src="/close.svg" alt="supprimer la notification"/>
                             </button>
                         </div>
                     ))

src/components/ToolBar/ToolBar.jsx

@@ -1,8 +1,8 @@
 import styles from "./ToolBar.module.css"
-import {Link} from "react-router";
 import Filter from "../Filter/Filter.jsx";
 import {useEffect, useState} from "react";
 import SearchBar from "../SearchBar/SearchBar.jsx";
+import CreateEventBtn from "../createEventBtn/CreateEventBtn.jsx";
 
 
 function ToolBar({setFilters, filters, showCreate = true}) {
@@ -37,11 +37,7 @@ function ToolBar({setFilters, filters, showCreate = true}) {
             ) : null}
             <div className={styles.eventsButtons}>
                 {showCreate ? (
-                    <Link
-                        to="/event/create"
-                        className={`${styles.createButton} glassCard`}>
-                        +
-                    </Link>
+                    <CreateEventBtn />
                 ) : null}
 
                 <button className={`${styles.searchButton} glassCard`} onClick={() => setIsSearchVisible(true)}>

src/components/ToolBar/ToolBar.module.css

@@ -38,11 +38,6 @@
     transition: all 0.5s ease;
 }
 
-.createButton {
-    font-size: 2rem;
-    color: black;
-}
-
 .createButton:hover, .searchButton:hover, .mobileFilter:hover {
     transform: translateY(-5px);
     cursor: pointer;

src/components/createEventBtn/CreateEventBtn.jsx

@@ -0,0 +1,42 @@
+import styles from "./createEventBtn.module.css"
+import { useState } 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/event/createEvent.js"
+
+
+export default function CreateEventBtn() {
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [name, setName] = useState("");
+    const [description, setDescription] = useState("");
+
+    const handleCreateEvent = async () => {
+
+        if(name !== "" || description !== "") await createEvent(name, description);
+        setIsOpen(false);
+    }
+
+    return <>
+        <Button className={`${styles.createButton} glassCard`} variant={"default"} onClick={() => setIsOpen(true)}> + </Button>
+
+        <Modal title={"Créer un événement"} open={isOpen} onClose={() => setIsOpen(false)}>
+
+            <section className={styles.section}>
+                <div className={styles.inputContainer}>
+                    <h2>Titre</h2>
+                    <TextInput placeholder={"Nom de l'événement"} value={name} onChange={e => setName(e.target.value)} />
+                </div>
+
+                <div className={styles.inputContainer}>
+                    <h2>Description</h2>
+                    <TextInput placeholder={"Description de l'événement"} value={description} onChange={e => setDescription(e.target.value)} />
+                </div>
+
+                <Button onClick={handleCreateEvent} className={styles.create}>Créer</Button>
+
+            </section>
+        </Modal>
+    </>
+}

src/components/createEventBtn/createEventBtn.module.css

@@ -0,0 +1,41 @@
+.createButton {
+    font-size: 1.5rem;
+    color: black;
+}
+
+.createButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 50% !important;
+    width: 55px !important;
+    height: 55px !important;
+    transition: all 0.5s ease;
+}
+
+.createButton:hover {
+    transform: translateY(-5px);
+    cursor: pointer;
+}
+
+.inputContainer {
+
+    h2 {
+        margin-bottom: 0.5rem;
+    }
+
+    margin: 1em;
+}
+
+.create {
+    align-self: center;
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}