Create AssignUserBtn component

2026-03-13 16:54:00 +01:00
parent c3f71965c3
commit 94ceff8288
3 changed files with 97 additions and 0 deletions
@@ -0,0 +1,71 @@
+import { ReactNode, useEffect, useState } from "react";
+import Button from "../../../../components/ui/Button/Button";
+import Modal from "../../../../components/ui/Modal/Modal";
+import User from "../../../Volunteers/interfaces/user.interface";
+import getAllUser from "../../../../utils/users/getAllUsers";
+import Loading from "../../../../components/ui/Loading/Loading";
+import getUserById from "../../../../utils/users/getUserById";
+import styles from "./AssignUserBtn.module.css";
+
+interface AssignUserBtnProps {
+    taskId: string | number;
+}
+
+export default function AssignUserBtn({ taskId }: AssignUserBtnProps): ReactNode {
+
+    const [open, setOpen] = useState<boolean>(false);
+    const [users, setUsers] = useState<Array<User>>([]);
+    const [loading, setLoading] = useState<boolean>(true);
+
+    useEffect(() => {
+        (async () => {
+            setLoading(true);
+
+            const result = await getAllUser();
+
+            if (result.status !== 200 || !Array.isArray(result.data)) {
+                console.error("Erreur lors du chargement des utilisateurs", result);
+                return;
+            }
+
+            const usersData = await Promise.all(
+                result.data.map(async (id: number): Promise<User | null> => {
+                    const res = await getUserById(id);
+
+                    if (res.status === 200) {
+                        return res.data as User;
+                    }
+
+                    return null;
+                })
+            );
+
+            setUsers(usersData.filter((user): user is User => user !== null));
+            setLoading(false);
+        })();
+    }, []);
+
+    const handleAssign = async (user: User) => {
+
+    };
+
+    return <>
+        <Button variant={"default"} onClick={() => setOpen(true)}>Assigner</Button>
+
+        <Modal open={open} onClose={() => setOpen(false)} title={"Assigner un utilisateur à cette tâche"}>
+            <div className={styles.usersList}>
+                {loading ? <Loading /> : users.map((user: User, index) => (
+                    <div key={index} className={styles.userCard}>
+                        <p className={styles.userName}>
+                            {user.name} {user.lastname}
+                        </p>
+
+                        <Button onClick={() => handleAssign(user)}>
+                            Assigner
+                        </Button>
+                    </div>
+                ))}
+            </div>
+        </Modal>
+    </>
+}