From d478c1570a57b19a03d03e31abbcdc86b9a50084 Mon Sep 17 00:00:00 2001
From: Dozzy7528 <tashcher2019@bk.ru>
Date: Mon, 30 Mar 2026 18:31:04 +0300
Subject: [PATCH] =?UTF-8?q?fix:=20=D0=BF=D0=BE=D1=84=D0=B8=D0=BA=D1=88?=
 =?UTF-8?q?=D0=B5=D0=BD=20=D0=B4=D0=BE=D1=81=D1=82=D1=83=D0=BF=20Websocket?=
 =?UTF-8?q?=20=D1=87=D0=B5=D1=80=D0=B5=D0=B7=20SSL=20refactor:=20=D0=BA?=
 =?UTF-8?q?=D0=BE=D1=81=D0=BC=D0=B5=D1=82=D0=B8=D1=87=D0=B5=D1=81=D0=BA?=
 =?UTF-8?q?=D0=B8=D0=B9=20=D1=80=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE=D1=80?=
 =?UTF-8?q?=20=D0=BA=D0=BE=D0=B4=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/KBBoard/KBBoard.js | 202 +++++++++++++++++++++--------------------
 1 file changed, 105 insertions(+), 97 deletions(-)

diff --git a/src/KBBoard/KBBoard.js b/src/KBBoard/KBBoard.js
index c69d452..413cce5 100644
--- a/src/KBBoard/KBBoard.js
+++ b/src/KBBoard/KBBoard.js
@@ -1,12 +1,12 @@
-import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
-import { useBoardLogic } from './BoardLogic';
+import {useEffect, useState} from 'react';
+import {useNavigate, useParams} from 'react-router-dom';
+import {useBoardLogic} from './BoardLogic';
 import Header from './../Header';
 import './../css/Board.css';
 
 const KBBoard = () => {
     const navigate = useNavigate();
-    const { id } = useParams();
+    const {id} = useParams();
     const [error, setError] = useState('');
     const [loading, setLoading] = useState(false);
     const [info, setInfo] = useState({});
@@ -64,9 +64,11 @@ const KBBoard = () => {
         deleteMember,
     } = useBoardLogic(id, setError, setInfo, setCategories, setLoading, setItems);
 
-    function ListItem({ item }) {
+    function ListItem({item}) {
         if (!item) return null;
-        const user = () => { navigate('/profile/' + item.id); };
+        const user = () => {
+            navigate('/profile/' + item.id);
+        };
         return (
             <>
                 <button onClick={user}>
@@ -83,7 +85,7 @@ const KBBoard = () => {
     const [socket, setSocket] = useState(null);
     useEffect(() => {
         const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const ws = new WebSocket(`${protocol}//back.fool-stack.ru/api/boards/ws/`+id);
+        const ws = new WebSocket(`${protocol}//ws.back.fool-stack.ru/api/boards/ws/` + id);
         ws.onopen = () => {
             console.log('WebSocket соединение установлено');
             setSocket(ws);
@@ -162,7 +164,7 @@ const KBBoard = () => {
         setQtMember(!qtMember);
     }
 
-    
+
     const handleCreateCategory = async (e) => {
         e.preventDefault();
         await createCategory(categoryTitle, modalCrCateg);
@@ -174,7 +176,7 @@ const KBBoard = () => {
     const handleEditBoard = async (e) => {
         e.preventDefault();
         await editBoard(id, boardTitle, boardDescription, modalEditBoard);
-    }; 
+    };
     const handleEditCategory = async (e) => {
         e.preventDefault();
         await editCategory(editedCateg.id, categoryTitle, modalEditCateg);
@@ -227,7 +229,7 @@ const KBBoard = () => {
     const handleTaskDragStart = (e, task, categoryId) => {
         e.stopPropagation();
         setDraggedType('t');
-        setDraggedItem({ ...task, categoryId });
+        setDraggedItem({...task, categoryId});
         e.dataTransfer.setData('text/plain', JSON.stringify({
             id: task.id,
             type: 't',
@@ -239,7 +241,6 @@ const KBBoard = () => {
     };
 
 
-
     const handleDragEnd = (e) => {
         setDraggedType(null);
         setDraggedItem(null);
@@ -295,7 +296,7 @@ const KBBoard = () => {
                     }));
                     return updatedItems;
                 });
-                await editCategoryPosition(draggedItem.id, targetPosition); 
+                await editCategoryPosition(draggedItem.id, targetPosition);
             }
         } catch (err) {
             console.error('Ошибка при переупорядочивании категорий:', err);
@@ -304,7 +305,6 @@ const KBBoard = () => {
     };
 
 
-
     const handleTaskReorder = async (e, targetPosition, targetCategoryPos) => {
         e.stopPropagation();
         e.preventDefault();
@@ -328,39 +328,40 @@ const KBBoard = () => {
             if (!targetCat) return;
 
             // Проверяем, что задача не перемещается в ту же позицию той же категории
-            if ((draggedItem.position === targetPosition || 
-                (draggedItem.position === targetCat.length-1 && targetPosition === targetCat.length)) &&
+            if ((draggedItem.position === targetPosition ||
+                    (draggedItem.position === targetCat.length - 1 && targetPosition === targetCat.length)) &&
                 draggedItem.category_id === targetCat.id) return;
-            
 
-            await editTask( draggedItem.id, draggedItem.title, 
-                            draggedItem.description, targetPosition, 
-                            draggedItem.deadline, targetCat.id, null );
+
+            await editTask(draggedItem.id, draggedItem.title,
+                draggedItem.description, targetPosition,
+                draggedItem.deadline, targetCat.id, null);
 
         } catch (err) {
             console.error('Ошибка при переупорядочивании задач:', err);
             setError('Не удалось переупорядочить задачи');
         }
-    };         
+    };
 
 
     return (
         <div className="app-container">
-        	<Header />
-			<div className="page-container">
-      			{
+            <Header/>
+            <div className="page-container">
+                {
                     error && <div className="error">{error}</div>
-            	}
-                <div className="inf-panel" >
+                }
+                <div className="inf-panel">
                     <div className="row">
                         <h3>{info.title}</h3>
                         <p>
                             <button onClick={modalMemList}>
-                                <strong>Участники: </strong> 
+                                <strong>Участники: </strong>
                                 {(info.members || []).map((member) => (
                                     <div key={member.id}>
                                         {(member.id !== info.owner?.id) ? (
-                                            <img className='members-avatar' src={member.avatar_url} alt={member.display_name || 'Участник'}></img>
+                                            <img className='members-avatar' src={member.avatar_url}
+                                                 alt={member.display_name || 'Участник'}></img>
                                         ) : (
                                             <></>
                                         )}
@@ -369,8 +370,8 @@ const KBBoard = () => {
                             </button>
                         </p>
                         <p>
-                            <button onClick={()=>navigate('/profile/' + info.owner.id)}>
-                                <strong>Владелец: </strong> {" "+info.owner?.display_name}
+                            <button onClick={() => navigate('/profile/' + info.owner.id)}>
+                                <strong>Владелец: </strong> {" " + info.owner?.display_name}
                                 <img className="nav-avatar" src={info.owner?.avatar_url} alt=''></img>
                             </button>
                         </p>
@@ -379,11 +380,11 @@ const KBBoard = () => {
                         <p><strong>Описание: </strong> {info.description ? info.description : 'Отсутствует'}</p>
                     </div>
                 </div>
-                <div className="set-panel" >
+                <div className="set-panel">
                     {loading ? (
                         <>
 
-                        </>           
+                        </>
                     ) : isOwner ? (
                         <>
                             <button onClick={modalAddMember}>
@@ -407,34 +408,35 @@ const KBBoard = () => {
                         </>
                     )}
                 </div>
-                <div className="board-panel" >
+                <div className="board-panel">
                     {categories.map((category) => (
-                        <div className="categori" key={category.position} 
-                            draggable="true" 
-                            
-                            onDragStart={(e) => handleCategoryDragStart(e, category)}
-                            onDragLeave={handleDragLeave}
-                            onDragEnd={handleDragEnd}
-                            onDragOver={handleDragOver}
-                            onDrop={(e) => handleCategoryReorder(e, category.position)}
+                        <div className="categori" key={category.position}
+                             draggable="true"
+
+                             onDragStart={(e) => handleCategoryDragStart(e, category)}
+                             onDragLeave={handleDragLeave}
+                             onDragEnd={handleDragEnd}
+                             onDragOver={handleDragOver}
+                             onDrop={(e) => handleCategoryReorder(e, category.position)}
                         >
                             <button onClick={modalEditCateg(category)}><h3>{category.title}</h3></button>
                             <div className='task create'>
                                 <button onClick={modalCrTask(category.id)}>
                                     Новая задача
-                                </button>  
+                                </button>
                             </div>
                             <div className='task-list'>
                                 {category.tasks.length > 0 ? (
                                     category.tasks.map((task) => (
-                                        <button className='task' onClick={modalEditTask(task, category.id)} key={task.position}
-                                            draggable="true"
-                                            onDragStart={(e) => handleTaskDragStart(e, task, category.position)}
-                                            onDragLeave={handleDragLeave} 
-                                            onDragEnd={handleDragEnd} 
-                                            onDragOver={handleDragOver} 
-                                            onDrop={(e) => handleTaskReorder(e, task.position, category.position)}
-                                            
+                                        <button className='task' onClick={modalEditTask(task, category.id)}
+                                                key={task.position}
+                                                draggable="true"
+                                                onDragStart={(e) => handleTaskDragStart(e, task, category.position)}
+                                                onDragLeave={handleDragLeave}
+                                                onDragEnd={handleDragEnd}
+                                                onDragOver={handleDragOver}
+                                                onDrop={(e) => handleTaskReorder(e, task.position, category.position)}
+
                                         >
                                             <div>{task.title}</div>
                                             <div>{task.description} </div>
@@ -445,15 +447,17 @@ const KBBoard = () => {
                                                     year: 'numeric',
                                                     hour: '2-digit',
                                                     minute: '2-digit',
-                                                    timeZone: 'UTC'})}
+                                                    timeZone: 'UTC'
+                                                })}
                                                 </div>
                                             )}
                                             {task.assigned_users[0] !== undefined && (
                                                 <div>Исполнители:
                                                     {task.assigned_users.map((member) => (
-                                                        <img key={member.id} className='members-avatar' src={member.avatar_url} alt=''></img>
+                                                        <img key={member.id} className='members-avatar'
+                                                             src={member.avatar_url} alt=''></img>
                                                     ))}
-                                                </div>  
+                                                </div>
                                             )}
                                         </button>
                                     ))
@@ -461,10 +465,10 @@ const KBBoard = () => {
                                     <p>Нет задач</p>
                                 )}
                                 <div className='task move'
-                                    onDrop={(e) => handleTaskReorder(e, category.tasks.length, category.position)}
-                                    onDragLeave={handleDragLeave}
-                                    onDragEnd={handleDragEnd}
-                                    onDragOver={handleDragOver}
+                                     onDrop={(e) => handleTaskReorder(e, category.tasks.length, category.position)}
+                                     onDragLeave={handleDragLeave}
+                                     onDragEnd={handleDragEnd}
+                                     onDragOver={handleDragOver}
                                 ></div>
                             </div>
                         </div>
@@ -483,18 +487,18 @@ const KBBoard = () => {
                         </div>
                     ) : (
                         <></>
-                    )}    
+                    )}
                 </div>
 
                 {memList && (
                     <div className="confirm-modal">
                         <div className="modal-content modal-member">
                             <div><h3>Изменение задачи</h3></div>
-                            <label >Участники:</label>
+                            <label>Участники:</label>
                             <div className='task-list members-list'>
                                 {items.length > 0 ? (
                                     items.map((item) => (
-                                        <ListItem key={item.id} item={item} />
+                                        <ListItem key={item.id} item={item}/>
                                     ))
                                 ) : (
                                     <p>Нет участников</p>
@@ -511,7 +515,7 @@ const KBBoard = () => {
                             <div><h3>Новая категория</h3></div>
                             <form onSubmit={handleCreateCategory}>
                                 <div>
-                                    <label >Название:</label>
+                                    <label>Название:</label>
                                     <input
                                         type="text"
                                         value={categoryTitle}
@@ -534,14 +538,14 @@ const KBBoard = () => {
                             <div><h3>Новая задача</h3></div>
                             <form onSubmit={handleCreateTask}>
                                 <div>
-                                    <label >Название:</label>
+                                    <label>Название:</label>
                                     <input
                                         type="text"
                                         value={taskTitle}
                                         onChange={(e) => setTaskTitle(e.target.value)}
                                         required
                                     />
-                                    <label >Описание:</label>
+                                    <label>Описание:</label>
                                     <input
                                         type="text"
                                         value={taskDescription}
@@ -559,7 +563,8 @@ const KBBoard = () => {
                                 </div>
                                 <div>
                                     <label>Исполнитель:</label>
-                                    <select value={assignedMembers} onChange={(e) => setAssignedMembers(e.target.value)}> 
+                                    <select value={assignedMembers}
+                                            onChange={(e) => setAssignedMembers(e.target.value)}>
                                         <option value={null}>
                                             Выберите пользователя
                                         </option>
@@ -585,14 +590,14 @@ const KBBoard = () => {
                             <div><h3>Изменение доски</h3></div>
                             <form onSubmit={handleEditBoard}>
                                 <div>
-                                    <label >Название:</label>
+                                    <label>Название:</label>
                                     <input
                                         type="text"
                                         value={boardTitle}
                                         onChange={(e) => setBoardTitle(e.target.value)}
                                         required
                                     />
-                                    <label >Описание:</label>
+                                    <label>Описание:</label>
                                     <input
                                         type="text"
                                         value={boardDescription}
@@ -614,7 +619,7 @@ const KBBoard = () => {
                             <div><h3>Изменение категории</h3></div>
                             <form onSubmit={handleEditCategory}>
                                 <div>
-                                    <label >Название:</label>
+                                    <label>Название:</label>
                                     <input
                                         type="text"
                                         value={categoryTitle}
@@ -638,14 +643,14 @@ const KBBoard = () => {
                             <div><h3>Изменение задачи</h3></div>
                             <form onSubmit={handleEditTask}>
                                 <div>
-                                    <label >Название:</label>
+                                    <label>Название:</label>
                                     <input
                                         type="text"
                                         value={taskTitle}
                                         onChange={(e) => setTaskTitle(e.target.value)}
                                         required
                                     />
-                                    <label >Описание:</label>
+                                    <label>Описание:</label>
                                     <input
                                         type="text"
                                         value={taskDescription}
@@ -653,14 +658,15 @@ const KBBoard = () => {
                                         required
                                     />
                                     <div>
-                                        <label>Дедлайн: 
+                                        <label>Дедлайн:
                                             {editedTask.deadline != null ? new Date(editedTask.deadline).toLocaleString('ru-RU', {
-                                            day: '2-digit',
-                                            month: '2-digit',
-                                            year: 'numeric',
-                                            hour: '2-digit',
-                                            minute: '2-digit',
-                                            timeZone: 'UTC'}) : ""}
+                                                day: '2-digit',
+                                                month: '2-digit',
+                                                year: 'numeric',
+                                                hour: '2-digit',
+                                                minute: '2-digit',
+                                                timeZone: 'UTC'
+                                            }) : ""}
                                         </label>
                                         <input
                                             type="datetime-local"
@@ -670,7 +676,7 @@ const KBBoard = () => {
                                         />
                                     </div>
                                     <div>
-                                        <label >Категория:</label>
+                                        <label>Категория:</label>
                                         <select value={taskCategory} onChange={(e) => setTaskCategory(e.target.value)}>
                                             {categories.map((category) => (
                                                 <option key={category.position} value={category.id}>
@@ -680,7 +686,7 @@ const KBBoard = () => {
                                         </select>
                                     </div>
                                     <div>
-                                        <label >Исполнитель:</label>
+                                        <label>Исполнитель:</label>
                                         <button type="button" onClick={modalAssignMember(true)}>Назначить</button>
                                         <button type="button" onClick={modalAssignMember(false)}>Снять</button>
                                     </div>
@@ -689,7 +695,7 @@ const KBBoard = () => {
                                     {loading ? 'Изменение...' : 'Изменить'}
                                 </button>
                             </form>
-                            <button onClick={modalEditTask({},null)}>Отменить</button>
+                            <button onClick={modalEditTask({}, null)}>Отменить</button>
                             <button className="Important-button" onClick={modalDelTask}>Удалить</button>
                         </div>
                     </div>
@@ -700,12 +706,12 @@ const KBBoard = () => {
                         <div className="modal-content">
                             <div><h3>Удаление задачи</h3></div>
                             <form onSubmit={handleDeleteTask}>
-                                <label >Вы точно хотите удалить задачу {editedTask.title}</label>
+                                <label>Вы точно хотите удалить задачу {editedTask.title}</label>
                                 <button onClick={modalDelTask}>Отменить</button>
                                 <button className="Important-button" type="submit" disabled={loading}>
                                     {loading ? 'Удаление...' : 'Удалить'}
                                 </button>
-                            </form> 
+                            </form>
                         </div>
                     </div>
                 )}
@@ -715,7 +721,7 @@ const KBBoard = () => {
                         <div className="modal-content">
                             <div><h3>Удаление категории</h3></div>
                             <form onSubmit={handleDeleteCategory}>
-                                <label >Вы точно хотите удалить эту категорию</label>
+                                <label>Вы точно хотите удалить эту категорию</label>
                                 <button onClick={modalDelCateg}>Отменить</button>
                                 <button className="Important-button" type="submit" disabled={loading}>
                                     {loading ? 'Удаление...' : 'Удалить'}
@@ -730,7 +736,7 @@ const KBBoard = () => {
                         <div className="modal-content">
                             <div><h3>Удаление доски</h3></div>
                             <form onSubmit={handleDeleteBoards}>
-                                <label >Вы точно хотите удалить эту Канбан доску</label>
+                                <label>Вы точно хотите удалить эту Канбан доску</label>
                                 <button onClick={modalDeleteBoards} type='reset'>Отменить</button>
                                 <button className="Important-button" type="submit" disabled={loading}>
                                     {loading ? 'Удаление...' : 'Удалить'}
@@ -746,7 +752,7 @@ const KBBoard = () => {
                         <div className="modal-content">
                             <div><h3>Добавление участника</h3></div>
                             <form onSubmit={handleAddMember}>
-                                <label >Введите логин человека которого хотите пригласить</label>
+                                <label>Введите логин человека которого хотите пригласить</label>
                                 <input
                                     type="text"
                                     placeholder="Поиск по логину..."
@@ -770,8 +776,9 @@ const KBBoard = () => {
                                 <form onSubmit={handleAssignMember}>
                                     <div>
                                         <div>
-                                            <label >Исполнитель:</label>
-                                            <select value={assignedMember} onChange={(e) => setAssignedMember(e.target.value)}> 
+                                            <label>Исполнитель:</label>
+                                            <select value={assignedMember}
+                                                    onChange={(e) => setAssignedMember(e.target.value)}>
                                                 <option value={0}>
                                                     Выберите пользователя
                                                 </option>
@@ -795,8 +802,9 @@ const KBBoard = () => {
                                 <form onSubmit={handleAssignMember}>
                                     <div>
                                         <div>
-                                            <label >Исполнитель:</label>
-                                            <select value={assignedMember} onChange={(e) => setAssignedMember(e.target.value)}> 
+                                            <label>Исполнитель:</label>
+                                            <select value={assignedMember}
+                                                    onChange={(e) => setAssignedMember(e.target.value)}>
                                                 <option value={0}>
                                                     Выберите пользователя
                                                 </option>
@@ -823,7 +831,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 ? 'Покинуть...' : 'Покинуть'}
@@ -838,18 +846,18 @@ const KBBoard = () => {
                         <div className="modal-content">
                             <div><h3>Выгнать участника</h3></div>
                             <form onSubmit={handleDeleteMember}>
-                                <label >Выберите кого вы хотите выгнать?</label>
+                                <label>Выберите кого вы хотите выгнать?</label>
                                 <div>
-                                    <label >Участник:</label>
-                                    <select value={deletedMember} onChange={(e) => setDeletedMember(e.target.value)}> 
+                                    <label>Участник:</label>
+                                    <select value={deletedMember} onChange={(e) => setDeletedMember(e.target.value)}>
                                         <option value={''}>
                                             Выберите пользователя
                                         </option>
-                                        {info.members.map((member) => ( 
+                                        {info.members.map((member) => (
                                             (member.id !== info.owner.id) ? (
-                                            <option key={member.display_name} value={member.id}>
-                                                {member.display_name}
-                                            </option> ) : (
+                                                <option key={member.display_name} value={member.id}>
+                                                    {member.display_name}
+                                                </option>) : (
                                                 <></>
                                             )
                                         ))}
@@ -864,9 +872,9 @@ const KBBoard = () => {
                     </div>
                 )}
 
-     		</div>
+            </div>
         </div>
-	);
+    );
 }
 
 export default KBBoard;
\ No newline at end of file