fix: пофикшен доступ Websocket через SSL
refactor: косметический рефактор кода
This commit is contained in:
Dozzy7528
@@ -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);
|
||||
@@ -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);
|
||||
@@ -304,7 +305,6 @@ const KBBoard = () => {
|
||||
};
|
||||
|
||||
|
||||
|
||||
const handleTaskReorder = async (e, targetPosition, targetCategoryPos) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
@@ -329,13 +329,13 @@ const KBBoard = () => {
|
||||
|
||||
// Проверяем, что задача не перемещается в ту же позицию той же категории
|
||||
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;
|
||||
|
||||
|
||||
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);
|
||||
@@ -346,12 +346,12 @@ const KBBoard = () => {
|
||||
|
||||
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>
|
||||
@@ -360,7 +360,8 @@ const KBBoard = () => {
|
||||
{(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,7 +380,7 @@ const KBBoard = () => {
|
||||
<p><strong>Описание: </strong> {info.description ? info.description : 'Отсутствует'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="set-panel" >
|
||||
<div className="set-panel">
|
||||
{loading ? (
|
||||
<>
|
||||
|
||||
@@ -407,16 +408,16 @@ const KBBoard = () => {
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="board-panel" >
|
||||
<div className="board-panel">
|
||||
{categories.map((category) => (
|
||||
<div className="categori" key={category.position}
|
||||
draggable="true"
|
||||
draggable="true"
|
||||
|
||||
onDragStart={(e) => handleCategoryDragStart(e, category)}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDragEnd={handleDragEnd}
|
||||
onDragOver={handleDragOver}
|
||||
onDrop={(e) => handleCategoryReorder(e, category.position)}
|
||||
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'>
|
||||
@@ -427,13 +428,14 @@ const KBBoard = () => {
|
||||
<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>
|
||||
@@ -445,13 +447,15 @@ 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>
|
||||
)}
|
||||
@@ -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>
|
||||
@@ -490,11 +494,11 @@ const KBBoard = () => {
|
||||
<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}
|
||||
@@ -655,12 +660,13 @@ const KBBoard = () => {
|
||||
<div>
|
||||
<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,7 +706,7 @@ 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 ? 'Удаление...' : 'Удалить'}
|
||||
@@ -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>
|
||||
<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.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;
|
||||
Reference in New Issue
Block a user