Move volunteers page components

src/components/Task/Task.jsx

@@ -0,0 +1,29 @@
+import React, {useEffect, useState} from "react";
+import getEventById from "../../utils/events/getEventById.js";
+import styles from "./Task.module.css";
+import formatDate from "../../utils/date/formatDate.js";
+
+const Task = ({ task }) => {
+    const [event, setEvent] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            const e = await getEventById(task.id);
+            setEvent(e);
+        }) ()
+    }, [])
+
+    return (
+        <div className={`${styles.task} glassCard`}>
+            <div className={styles.content}>
+                <div>
+                    <h2> {event && event.name} - {task.name}</h2>
+                    <p className={styles.desc}> {task.description} </p>
+                    <p className={styles.date}> {formatDate(task.start)} </p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default Task;

src/components/Task/Task.module.css

@@ -0,0 +1,22 @@
+.task {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+}
+
+.content {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+.desc {
+    font-size: 0.8rem;
+    color: #666;
+    margin: 0 0 0 0;
+}
+
+.date {
+    font-size: 0.8rem;
+}

src/components/manageMember/ManageMember.jsx

@@ -1,37 +0,0 @@
-import Button from "../ui/button/button.jsx";
-import Modal from "../ui/modal/modal.jsx";
-import {useContext, useState} from "react";
-import styles from "./manageMember.module.css"
-import DeactivateMemberBtn from "./deactivateMember/deactivateMemberBtn.jsx";
-import ModifyRole from "./modifyrole/ModifyRole.jsx";
-import {AuthContext} from "../../contexts/auth/AuthContext.js";
-
-
-export default function ManageMember({ userToManage }) {
-
-    const { user } = useContext(AuthContext);
-    const [open, setOpen] = useState(false);
-
-
-    return <>
-        <Button onClick={() => setOpen(true)} variant={"default"} className={styles.manageBtn}>
-            <img src="/icons/tools.svg" alt="tools icon" className={styles.icon} />
-            <p>Gérer</p>
-        </Button>
-
-        <Modal open={open} onClose={() => setOpen(false)} title={`Gestion de l'utilisateur ${userToManage.name}`}>
-
-            {(user.id != userToManage.id) ? (
-                <div className={styles.manageSection}>
-                    <h3>Désactiver le compte</h3>
-                    <DeactivateMemberBtn name={userToManage.name} id={userToManage.id} className={styles.manageBlockContent} />
-                </div>
-            ) : null}
-
-            <div className={styles.manageSection}>
-                <h3>Modifier le rôle</h3>
-                <ModifyRole user={userToManage} />
-            </div>
-        </Modal>
-    </>
-}

src/components/manageMember/deactivateMember/deactivateMemberBtn.jsx

@@ -1,31 +0,0 @@
-import Button from "../../ui/button/button.jsx";
-import Modal from "../../ui/modal/modal.jsx";
-import { useState } from "react";
-import deactivateUser from "../../../utils/users/deactivateUser.js"
-import { useNavigate } from "react-router";
-
-export default function DeactivateMemberBtn({ name, id, ...props }) {
-
-    const [open, setOpen] = useState(false);
-    const navigate = useNavigate();
-
-    const deactivateMember = async () => {
-        const result = await deactivateUser(id);
-
-        if (result.status === 200 || result.status === 204) {
-            setOpen(false);
-            navigate("/volunteers");
-        }
-    }
-
-    return <div {...props}>
-        <Button variant={"danger"} onClick={() => setOpen(true)}>Désactiver</Button>
-
-        <Modal open={open} onClose={() => setOpen(false)} title={"Supprimer"}>
-            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 15 }}>
-                <p>Etes-vous sur de vouloir désactiver le compte {name} ?</p>
-                <Button variant={"danger"} onClick={deactivateMember}>Désactiver</Button>
-            </div>
-        </Modal>
-    </div>
-}

src/components/manageMember/manageMember.module.css

@@ -1,47 +0,0 @@
-.icon {
-    width: 24px;
-}
-
-.manageBtn {
-    display: flex;
-    flex-direction: row;
-}
-
-.manageSection {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin: 1.5em;
-}
-
-.manageBlockContent {
-    margin: 0.5em;
-}
-
-.modifyRole {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-evenly;
-    align-items: center;
-}
-
-.select {
-    width: 70%;
-    padding: 10px 14px;
-
-    font-size: 14px;
-    font-weight: 500;
-    color: #1d1d1f;
-
-    background-color: #ffffff;
-    border: 1px solid #d2d2d7;
-    border-radius: 10px;
-
-    appearance: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-}
-
-.modalContent {
-    text-align: center;
-}

src/components/manageMember/modifyrole/ModifyRole.jsx

@@ -1,59 +0,0 @@
-import styles from "../manageMember.module.css";
-import Button from "../../ui/button/button.jsx";
-import modifyRole from "../../../utils/users/modifyRole.js";
-import { useState, useEffect } from "react";
-import getRoles from "../../../utils/getRoles.js";
-import Modal from "../../ui/modal/modal.jsx";
-
-export default function ModifyRole({ user }) {
-
-    const [roles, setRoles] = useState([]);
-    const [selectedRole, setSelectedRole] = useState(3);
-    const [open, setOpen] = useState(false);
-    const [title, setTitle] = useState("");
-    const [description, setDescription] = useState("");
-
-    useEffect(() => {
-        getRoles().then(data => {
-            if (data) setRoles(data);
-        });
-    }, [])
-
-
-    const handleRoleUpdate = async () => {
-        const res = await modifyRole(selectedRole, user.id);
-
-        if (res.success) {
-            setDescription("Rôle modifié avec succès");
-            setTitle("Modification")
-            setOpen(true);
-        } else {
-            setDescription("Erreur lors de la modification du rôle");
-            setTitle("Erreur")
-            setOpen(true);
-        }
-    };
-
-
-    return <div className={`${styles.manageBlockContent} ${styles.modifyRole}`}>
-        <select
-            value={selectedRole}
-            onChange={(e) => setSelectedRole(e.target.value)}
-            className={styles.select}
-        >
-            {roles.map((role, index) => (
-                <option key={index} value={index+1}>
-                    {role}
-                </option>
-            ))}
-        </select>
-
-        <Button onClick={handleRoleUpdate} variant={"default"}>
-            Enregistrer
-        </Button>
-
-        <Modal open={open} onClose={() => setOpen(false)} title={title}>
-            <p className={styles.modalContent}>{description}</p>
-        </Modal>
-    </div>
-}