diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js index aa296ad28c..59f648730d 100644 --- a/apps/comments-ui/src/actions.js +++ b/apps/comments-ui/src/actions.js @@ -43,10 +43,32 @@ async function hideComment({state, adminApi, data: comment}) { }; } +async function deleteComment({state, api, data: comment}) { + await api.comments.edit({ + comment: { + id: comment.id, + status: 'deleted' + } + }); + + return { + comments: state.comments.map((c) => { + if (c.id === comment.id) { + return { + ...c, + status: 'deleted' + }; + } + return c; + }) + }; +} + const Actions = { // Put your actions here addComment, hideComment, + deleteComment, loadMoreComments }; diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js index 79c62a8fd0..4dc1cc3f5b 100644 --- a/apps/comments-ui/src/components/Comment.js +++ b/apps/comments-ui/src/components/Comment.js @@ -28,6 +28,10 @@ class Comment extends React.Component { const comment = this.props.comment; const html = {__html: comment.html}; + if (comment.status !== 'published') { + html.__html = 'This comment has been removed'; + } + return (
diff --git a/apps/comments-ui/src/components/modals/AuthorContextMenu.js b/apps/comments-ui/src/components/modals/AuthorContextMenu.js index 8e57c2ed96..e82d303a2a 100644 --- a/apps/comments-ui/src/components/modals/AuthorContextMenu.js +++ b/apps/comments-ui/src/components/modals/AuthorContextMenu.js @@ -12,12 +12,12 @@ class AuthorContextMenu extends React.Component { } deleteComment(event) { - // todo + this.context.onAction('deleteComment', this.props.comment); } render() { return ( -
+
diff --git a/apps/comments-ui/src/utils/api.js b/apps/comments-ui/src/utils/api.js index 1a064f4081..c9a042d15e 100644 --- a/apps/comments-ui/src/utils/api.js +++ b/apps/comments-ui/src/utils/api.js @@ -120,6 +120,26 @@ function setupGhostApi({siteUrl = window.location.origin, apiUrl, apiKey}) { throw new Error('Failed to add comment'); } }); + }, + edit({comment}) { + const body = { + comments: [comment] + }; + const url = endpointFor({type: 'members', resource: `comments/${comment.id}`}); + return makeRequest({ + url, + method: 'PUT', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(body) + }).then(function (res) { + if (res.ok) { + return res.json(); + } else { + throw new Error('Failed to edit comment'); + } + }); } };