Fool-Stack/Kanban-Front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: пофикшен доступ Websocket через SSL

Browse Source 
refactor: косметический рефактор кода
This commit is contained in:
Dozzy7528
2026-03-30 18:31:04 +03:00
parent deb2fd4533
commit d478c1570a
1 changed files with 105 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/KBBoard/KBBoard.js
View File

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