0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00

Implemented editing replies

This commit is contained in:
Simon Backx 2022-07-07 11:39:12 +02:00
parent 25c86689f8
commit 68012c9264
4 changed files with 24 additions and 8 deletions

View file

@ -143,7 +143,7 @@ async function deleteComment({state, api, data: comment}) {
};
}
async function editComment({state, api, data: comment}) {
async function editComment({state, api, data: {comment, parent}}) {
const data = await api.comments.edit({
comment
});
@ -152,9 +152,20 @@ async function editComment({state, api, data: comment}) {
// Replace the comment in the state with the new one
return {
comments: state.comments.map((c) => {
if (c.id === comment.id) {
if (parent && parent.id === c.id) {
return {
...c,
replies: c.replies.map((r) => {
if (r.id === comment.id) {
return comment;
}
return r;
})
};
} else if (c.id === comment.id) {
return comment;
}
return c;
})
};

View file

@ -30,7 +30,7 @@ const Comment = (props) => {
if (isInEditMode) {
return (
<EditForm comment={comment} toggle={toggleEditMode} />
<EditForm comment={comment} toggle={toggleEditMode} parent={props.parent} />
);
} else {
return (
@ -48,13 +48,13 @@ const Comment = (props) => {
</div>
<div className="flex gap-6">
<Like comment={comment} />
{!props.isReply && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />}
{!props.parent && <Reply comment={comment} toggleReply={toggleReplyMode} isReplying={isInReplyMode} />}
<More comment={comment} toggleEdit={toggleEditMode} />
</div>
</div>
{hasReplies &&
<div className={`ml-14 ${isInReplyMode ? 'mt-8' : 'mt-14'}`}>
<Replies replies={comment.replies} />
<Replies comment={comment} />
</div>
}
{isInReplyMode &&

View file

@ -17,8 +17,11 @@ const EditForm = (props) => {
event.preventDefault();
await dispatchAction('editComment', {
id: props.comment.id,
html: getHTML()
comment: {
id: props.comment.id,
html: getHTML()
},
parent: props.parent
});
props.toggle();

View file

@ -1,9 +1,11 @@
import Comment from './Comment';
const Replies = (props) => {
const comment = props.comment;
return (
<div>
{props.replies.map((reply => <Comment comment={reply} key={reply.id} isReply={true} />))}
{comment.replies.map((reply => <Comment comment={reply} parent={comment} key={reply.id} />))}
</div>
);
};