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

Implemented editing replies

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

15
apps/comments-ui/src/actions.js
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({ const data = await api.comments.edit({
comment comment
}); });
@ -152,9 +152,20 @@ async function editComment({state, api, data: comment}) {
// Replace the comment in the state with the new one // Replace the comment in the state with the new one
return { return {
comments: state.comments.map((c) => { 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 comment;
} }
return c; return c;
}) })
}; };

6
apps/comments-ui/src/components/Comment.js
View file

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

7
apps/comments-ui/src/components/EditForm.js
View file

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

4
apps/comments-ui/src/components/Replies.js
View file

@ -1,9 +1,11 @@
import Comment from './Comment'; import Comment from './Comment';
const Replies = (props) => { const Replies = (props) => {
const comment = props.comment;
return ( return (
<div> <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> </div>
); );
}; };