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');
+ }
+ });
}
};