Improve AssignUserBtn

src/pages/EventDetail/components/AssignUserBtn/AssignUserBtn.tsx

@@ -55,19 +55,24 @@ export default function AssignUserBtn({ taskId, eventId }: AssignUserBtnProps):
         })();
     }, []);
 
-    const isUserAssigned = (u: User): boolean =>
+    const [assignedIds, setAssignedIds] = useState<Set<number>>(new Set());
-        u.tasks.some(t => t.id === taskId);
+
+    useEffect(() => {
+        setAssignedIds(new Set(
+            users.filter(u => u.tasks.some(t => t.id === taskId)).map(u => u.id)
+        ));
+    }, [users, taskId]);
 
     const handleAssign = async (selectedUser: User) => {
+        setAssignedIds(prev => new Set(prev).add(selectedUser.id));
         await assignOtherUser(taskId as number, selectedUser.id);
-        updateEventInfo(eventId)
+        updateEventInfo(eventId);
-        setOpen(false);
     };
 
     const handleUnassign = async (selectedUser: User) => {
+        setAssignedIds(prev => { const next = new Set(prev); next.delete(selectedUser.id); return next; });
         await unAssignOtherUser(taskId as number, selectedUser.id);
-        updateEventInfo(eventId)
+        updateEventInfo(eventId);
-        setOpen(false);
     };
 
     return <>
@@ -75,18 +80,15 @@ export default function AssignUserBtn({ taskId, eventId }: AssignUserBtnProps):
 
         <Modal open={open} onClose={() => setOpen(false)} title={"Assigner un utilisateur à cette tâche"}>
             <div className={styles.usersList}>
-                {loading ? <Loading /> : users.map((user: User, index) => (
+                {loading ? <Loading /> : users.map((u: User) => (
-                    <div key={index} className={`${styles.userCard} glassBorder`}>
+                    <div key={u.id} className={`${styles.userCard} glassBorder`}>
-                        <p className={styles.userName}>
+                        <p className={styles.userName}>{u.name} {u.lastname}</p>
-                            {user.name} {user.lastname}
+                        {assignedIds.has(u.id) ? (
-                        </p>
+                            <Button variant={"danger"} onClick={() => handleUnassign(u)}>
-
-                        {isUserAssigned(user) ? (
-                            <Button variant={"danger"} onClick={() => handleUnassign(user)}>
                                 Désassigner
                             </Button>
                         ) : (
-                            <Button onClick={() => handleAssign(user)}>
+                            <Button onClick={() => handleAssign(u)}>
                                 Assigner
                             </Button>
                         )}