Wired up deleting comments

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
 };
 

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 = '<i>This comment has been removed</i>';
+        }
+
         return (
             <div className="flex mb-8">
                 <div>

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 (
-            <div class="flex flex-col">
+            <div className="flex flex-col">
                 <button className="w-full mb-3 text-left">
                     Edit
                 </button>

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