prettier fixed
This commit is contained in:
MaxOvs19
@ -1,129 +1,161 @@
|
||||
import React, { useState } from "react";
|
||||
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
import { apiRequest } from "../../api/request";
|
||||
import {urlForLocal} from '../../utils/helper';
|
||||
import {getCorrectDate} from "../Calendar/calendarHelper";
|
||||
import edit from "../../assets/icons/edit.svg";
|
||||
import del from "../../assets/icons/delete.svg";
|
||||
import edit from "../../assets/icons/edit.svg";
|
||||
import accept from "../../assets/images/accept.png";
|
||||
import { urlForLocal } from "../../utils/helper";
|
||||
import { getCorrectDate } from "../Calendar/calendarHelper";
|
||||
import TrackerTaskSubComment from "../TrackerTaskComment/TrackerTaskComment";
|
||||
|
||||
export const TrackerTaskComment = ({
|
||||
taskId,
|
||||
comment,
|
||||
commentDelete,
|
||||
addSubComment,
|
||||
subCommentDelete
|
||||
taskId,
|
||||
comment,
|
||||
commentDelete,
|
||||
addSubComment,
|
||||
subCommentDelete,
|
||||
}) => {
|
||||
const [commentsEditOpen, setCommentsEditOpen] = useState(false)
|
||||
const [commentsEditText, setCommentsEditText] = useState(comment.text)
|
||||
const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false)
|
||||
const [subCommentsCreateText, setSubCommentsCreateText] = useState('')
|
||||
const [commentsEditOpen, setCommentsEditOpen] = useState(false);
|
||||
const [commentsEditText, setCommentsEditText] = useState(comment.text);
|
||||
const [subCommentsCreateOpen, setSubCommentsCreateOpen] = useState(false);
|
||||
const [subCommentsCreateText, setSubCommentsCreateText] = useState("");
|
||||
|
||||
function editComment() {
|
||||
if (commentsEditText === comment.text) return
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: comment.id,
|
||||
text: commentsEditText
|
||||
}
|
||||
}).then(() => {
|
||||
})
|
||||
}
|
||||
function editComment() {
|
||||
if (commentsEditText === comment.text) return;
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: comment.id,
|
||||
text: commentsEditText,
|
||||
},
|
||||
}).then(() => {});
|
||||
}
|
||||
|
||||
function deleteComment() {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: comment.id,
|
||||
status: 0
|
||||
}
|
||||
}).then(() => {
|
||||
if (comment.parent_id) {
|
||||
subCommentDelete(comment)
|
||||
} else {
|
||||
commentDelete(comment)
|
||||
}
|
||||
})
|
||||
}
|
||||
function deleteComment() {
|
||||
apiRequest("/comment/update", {
|
||||
method: "PUT",
|
||||
data: {
|
||||
comment_id: comment.id,
|
||||
status: 0,
|
||||
},
|
||||
}).then(() => {
|
||||
if (comment.parent_id) {
|
||||
subCommentDelete(comment);
|
||||
} else {
|
||||
commentDelete(comment);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createSubComment() {
|
||||
setSubCommentsCreateOpen(false)
|
||||
if(!subCommentsCreateText) return
|
||||
apiRequest("/comment/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
text: subCommentsCreateText,
|
||||
entity_type: 2,
|
||||
entity_id: taskId,
|
||||
parent_id: comment.id
|
||||
}
|
||||
}).then((res) => {
|
||||
let newSubComment = res
|
||||
newSubComment.created_at = new Date()
|
||||
setSubCommentsCreateText('')
|
||||
addSubComment(comment.id, newSubComment)
|
||||
})
|
||||
}
|
||||
function createSubComment() {
|
||||
setSubCommentsCreateOpen(false);
|
||||
if (!subCommentsCreateText) return;
|
||||
apiRequest("/comment/create", {
|
||||
method: "POST",
|
||||
data: {
|
||||
text: subCommentsCreateText,
|
||||
entity_type: 2,
|
||||
entity_id: taskId,
|
||||
parent_id: comment.id,
|
||||
},
|
||||
}).then((res) => {
|
||||
let newSubComment = res;
|
||||
newSubComment.created_at = new Date();
|
||||
setSubCommentsCreateText("");
|
||||
addSubComment(comment.id, newSubComment);
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={[!comment.parent_id && comment.subComments.length ? 'comments__list__item__main': '',
|
||||
'comments__list__item',
|
||||
comment.parent_id ? 'comments__list__item__subComment' : ''].join(' ')}>
|
||||
<div className='comments__list__item__info'>
|
||||
<div className='comments__list__item__fio'>
|
||||
<img src={urlForLocal(comment.user.avatar)} alt='avatar' />
|
||||
<p>{comment.user.fio}</p>
|
||||
</div>
|
||||
<div className='comments__list__item__date'>
|
||||
<span>{getCorrectDate(comment.created_at)}</span>
|
||||
{comment.user_id === Number(localStorage.getItem('id')) &&
|
||||
<>
|
||||
<div className={commentsEditOpen ? 'edit edit__open' : 'edit'} >
|
||||
<img src={edit} alt='edit' onClick={() => {
|
||||
if (commentsEditOpen) {
|
||||
editComment()
|
||||
}
|
||||
setCommentsEditOpen(!commentsEditOpen)
|
||||
}} />
|
||||
</div>
|
||||
<img src={del} alt='delete' onClick={() => deleteComment()} />
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
{commentsEditOpen ?
|
||||
<input className='comments__list__item__text' value={commentsEditText} onChange={(e) => {
|
||||
setCommentsEditText(e.target.value)
|
||||
}} /> :
|
||||
<p className='comments__list__item__text'>{commentsEditText}</p>}
|
||||
{!comment.parent_id &&
|
||||
<>
|
||||
{
|
||||
subCommentsCreateOpen ?
|
||||
<div className='comments__list__item__answer__new'>
|
||||
<input value={subCommentsCreateText} onChange={(e) => {
|
||||
setSubCommentsCreateText(e.target.value)
|
||||
}}/>
|
||||
<img src={accept} alt='accept'
|
||||
onClick={() => {
|
||||
createSubComment()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<span onClick={() => {
|
||||
setSubCommentsCreateOpen(true)
|
||||
}} className='comments__list__item__answer'>Ответить</span>
|
||||
}
|
||||
</>
|
||||
}
|
||||
{Boolean(comment.subComments?.length) && comment.subComments.map((subComment) => {
|
||||
return <TrackerTaskSubComment key={subComment.id} taskId={taskId} comment={subComment} subCommentDelete={subCommentDelete}/>
|
||||
})
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
!comment.parent_id && comment.subComments.length
|
||||
? "comments__list__item__main"
|
||||
: "",
|
||||
"comments__list__item",
|
||||
comment.parent_id ? "comments__list__item__subComment" : "",
|
||||
].join(" ")}
|
||||
>
|
||||
<div className="comments__list__item__info">
|
||||
<div className="comments__list__item__fio">
|
||||
<img src={urlForLocal(comment.user.avatar)} alt="avatar" />
|
||||
<p>{comment.user.fio}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div className="comments__list__item__date">
|
||||
<span>{getCorrectDate(comment.created_at)}</span>
|
||||
{comment.user_id === Number(localStorage.getItem("id")) && (
|
||||
<>
|
||||
<div className={commentsEditOpen ? "edit edit__open" : "edit"}>
|
||||
<img
|
||||
src={edit}
|
||||
alt="edit"
|
||||
onClick={() => {
|
||||
if (commentsEditOpen) {
|
||||
editComment();
|
||||
}
|
||||
setCommentsEditOpen(!commentsEditOpen);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<img src={del} alt="delete" onClick={() => deleteComment()} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{commentsEditOpen ? (
|
||||
<input
|
||||
className="comments__list__item__text"
|
||||
value={commentsEditText}
|
||||
onChange={(e) => {
|
||||
setCommentsEditText(e.target.value);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<p className="comments__list__item__text">{commentsEditText}</p>
|
||||
)}
|
||||
{!comment.parent_id && (
|
||||
<>
|
||||
{subCommentsCreateOpen ? (
|
||||
<div className="comments__list__item__answer__new">
|
||||
<input
|
||||
value={subCommentsCreateText}
|
||||
onChange={(e) => {
|
||||
setSubCommentsCreateText(e.target.value);
|
||||
}}
|
||||
/>
|
||||
<img
|
||||
src={accept}
|
||||
alt="accept"
|
||||
onClick={() => {
|
||||
createSubComment();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<span
|
||||
onClick={() => {
|
||||
setSubCommentsCreateOpen(true);
|
||||
}}
|
||||
className="comments__list__item__answer"
|
||||
>
|
||||
Ответить
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{Boolean(comment.subComments?.length) &&
|
||||
comment.subComments.map((subComment) => {
|
||||
return (
|
||||
<TrackerTaskSubComment
|
||||
key={subComment.id}
|
||||
taskId={taskId}
|
||||
comment={subComment}
|
||||
subCommentDelete={subCommentDelete}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default TrackerTaskComment
|
||||
export default TrackerTaskComment;
|
||||
|
||||
Reference in New Issue
Block a user