feat: добавлена возможность выгнать участника канбан доски, а также добавлен список участников(не развёрнутый)

src/KBBoard/BoardLogic.js

@@ -186,7 +186,7 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
                 await unassignMemberAPI( editedTaskId, memberId );
             }
             await loadBoardData();
-            modalAssignMember();
+            modalAssignMember(false)();
         } catch {
             setError('Ошибка');
         } finally{
@@ -209,10 +209,27 @@ export const useBoardLogic = (id, setError, setInfo, setCategories, setLoading)
         }
     }, [loadBoardData, setLoading, setError, navigate]);
 
+    const deleteMember = useCallback(async (boardId, username, modalDelitMember ) => {
+        setLoading(true);
+        try {
+            setLoading(true);
+            await deleteMemberAPI( boardId, username );
+            await loadBoardData();
+            modalDelitMember();
+        } catch {
+            setError('Ошибка');
+        } finally {
+            setLoading(false);
+        }
+    }, [loadBoardData, setLoading, setError, navigate]);
+
+
+    
+
     return {
         loadBoardData, checkOwner, editBoard, deleteBoards,
         createTask, editTask, deleteTask,
         createCategory, editCategory, deleteCategory,
-        addMember, assignMember, quitMember, 
+        addMember, assignMember, quitMember, deleteMember
     };
 };

src/KBBoard/KBBoard.js

@@ -24,6 +24,7 @@ const KBBoard = () => {
     const [addMemb, setAddMemb] = useState(false);
     const [delBoards, setDelBoards] = useState(false);
     const [qtMember, setQtMember] = useState(false);
+    const [delMember, setDelMember] = useState(false);
 
     const [boardTitle, setBoardTitle] = useState('');
     const [boardDescription, setBoardDescription] = useState('');
@@ -38,6 +39,7 @@ const KBBoard = () => {
     const [categoryPosition, setCategoryPosition] = useState(null);
     const [assignedMember, setAssignedMember] = useState(0);
     const [addedUsername, setAddedUsername] = useState('');
+    const [deletedMember, setDeletedMember] = useState('');
 
     const {
         loadBoardData,
@@ -52,7 +54,8 @@ const KBBoard = () => {
         assignMember,
         addMember,
         deleteBoards,
-        quitMember
+        quitMember,
+        deleteMember
     } = useBoardLogic(id, setError, setInfo, setCategories, setLoading);
 
     useEffect(() => {
@@ -86,7 +89,6 @@ const KBBoard = () => {
         setTaskDescription(task.description);
         setTaskPosition(task.position);
         setTaskCategory(task.category_id);
-        //setAssignedMember(task.assigned_users.id)
     }
     const modalEditCateg = (categ) => () => {
         setEdCateg(!edCateg);
@@ -110,7 +112,9 @@ const KBBoard = () => {
     const modalDeleteBoards = () => {
         setDelBoards(!delBoards);
     }
-    
+    const modalDeleteMember = () => {
+        setDelMember(!delMember);
+    }
     const modalQuitMember = () => {
         setQtMember(!qtMember);
     }
@@ -161,6 +165,10 @@ const KBBoard = () => {
         e.preventDefault();
         await quitMember(id, modalQuitMember);
     };
+    const handleDeleteMember = async (e) => {
+        e.preventDefault();
+        await deleteMember(assignedMember, deletedMember, modalDeleteMember);
+    };
 
 
     return (
@@ -174,7 +182,10 @@ const KBBoard = () => {
                     <div className="row">
                         <h3>{info.title}</h3>
                         <p>
-                            <strong>Участники: </strong> В разработке
+                            <strong>Участники: </strong> 
+                            {info.members.map((member) => (
+                                <img key={member.id} className='members-avatar' src={member.avatar_url}></img>
+                            ))}
                         </p>
                         <p>
                             <strong>Владелец: </strong> {" "+info.owner?.display_name}
@@ -195,7 +206,7 @@ const KBBoard = () => {
                             <button onClick={modalAddMember}>
                                 Добавить участника
                             </button>
-                            <button onClick={null}>
+                            <button onClick={modalDeleteMember}>
                                 Выгнать участника
                             </button>
                             <button onClick={modalEditBoard}>
@@ -463,7 +474,7 @@ const KBBoard = () => {
                 {addMemb && (
                     <div className="confirm-modal">
                         <div className="modal-content">
-                            <div><h3>Добавление участников</h3></div>
+                            <div><h3>Добавление участникf</h3></div>
                             <form onSubmit={handleAddMember}>
                                 <label >Введите логин человека которого хотитепригласить</label>
                                 <input
@@ -472,7 +483,7 @@ const KBBoard = () => {
                                     value={addedUsername}
                                     onChange={(e) => setAddedUsername(e.target.value)}
                                 />
-                                <button onClick={modalAddMember}>Отменить</button>
+                                <button onClick={modalAddMember} type='reset'>Отменить</button>
                                 <button type="submit" disabled={loading}>
                                     {loading ? 'Добавление...' : 'Добавить'}
                                 </button>
@@ -542,7 +553,7 @@ const KBBoard = () => {
                         <div className="modal-content">
                             <div><h3>Покинуть доску</h3></div>
                             <form onSubmit={handleQuitMember}>
-                                <label >Вы точно хотите удалить эту Канбан доску</label>
+                                <label >Вы точно хотите покинуть эту Канбан доску?</label>
                                 <button onClick={modalQuitMember} type='reset'>Отменить</button>
                                 <button className="Important-button" type="submit" disabled={loading}>
                                     {loading ? 'Удаление...' : 'Удалить'}
@@ -552,10 +563,39 @@ const KBBoard = () => {
                     </div>
                 )}
 
+                {delMember && (
+                    <div className="confirm-modal">
+                        <div className="modal-content">
+                            <div><h3>Выгнать участника</h3></div>
+                            <form onSubmit={handleDeleteMember}>
+                                <label >Выберите кого вы хотите выгнать?</label>
+                                <div>
+                                    <label >Участник:</label>
+                                    <select value={deletedMember} onChange={(e) => setDeletedMember(e.target.value)}> 
+                                        <option value={''}>
+                                            Выберите пользователя
+                                        </option>
+                                        {info.members.map((member) => ( 
+                                            (member.id !== info.owner.id) ? (
+                                            <option key={member.display_name} value={member.username}>
+                                                {member.display_name}
+                                            </option> ) : (
+                                                <></>
+                                            )
+                                        ))}
+                                    </select>
+                                </div>
+                                <button onClick={modalDeleteMember} type='reset'>Отменить</button>
+                                <button className="Important-button" type="submit" disabled={loading}>
+                                    {loading ? 'Удаление...' : 'Удалить'}
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                )}
+
 
 
-
-
                 
      		</div>
         </div>