From 121f1711cdd9e120300102e2a1b7e64d9a75d560 Mon Sep 17 00:00:00 2001
From: Simon Backx <simon@ghost.org>
Date: Wed, 6 Jul 2022 11:45:45 +0200
Subject: [PATCH] Added 'show comment' implementation for admins

---
 apps/comments-ui/src/actions.js               | 17 +++++++++++++
 apps/comments-ui/src/components/Comment.js    |  4 +--
 .../src/components/modals/AdminContextMenu.js | 25 ++++++++++++++++---
 .../components/modals/CommentContextMenu.js   |  2 +-
 4 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/apps/comments-ui/src/actions.js b/apps/comments-ui/src/actions.js
index 59f648730d..f809b557e5 100644
--- a/apps/comments-ui/src/actions.js
+++ b/apps/comments-ui/src/actions.js
@@ -43,6 +43,22 @@ async function hideComment({state, adminApi, data: comment}) {
     };
 }
 
+async function showComment({state, adminApi, data: comment}) {
+    await adminApi.showComment(comment.id);
+
+    return {
+        comments: state.comments.map((c) => {
+            if (c.id === comment.id) {
+                return {
+                    ...c,
+                    status: 'published'
+                };
+            }
+            return c;
+        })
+    };
+}
+
 async function deleteComment({state, api, data: comment}) {
     await api.comments.edit({
         comment: {
@@ -69,6 +85,7 @@ const Actions = {
     addComment,
     hideComment,
     deleteComment,
+    showComment,
     loadMoreComments
 };
 
diff --git a/apps/comments-ui/src/components/Comment.js b/apps/comments-ui/src/components/Comment.js
index 84f65e79f6..da89edf4a2 100644
--- a/apps/comments-ui/src/components/Comment.js
+++ b/apps/comments-ui/src/components/Comment.js
@@ -29,7 +29,7 @@ class Comment extends React.Component {
      * (to hide the 'more' icon if we don't have any actions)
      */
     get hasMoreContextMenu() {
-        return !!this.context.member || !!this.context.admin;
+        return (!!this.context.member && this.props.comment.status === 'published') || !!this.context.admin;
     }
 
     render() {
@@ -37,7 +37,7 @@ class Comment extends React.Component {
         const html = {__html: comment.html};
 
         if (comment.status !== 'published') {
-            html.__html = '<i>This comment has been removed</i>';
+            html.__html = '<i>This comment has been removed.</i>';
         }
 
         return (
diff --git a/apps/comments-ui/src/components/modals/AdminContextMenu.js b/apps/comments-ui/src/components/modals/AdminContextMenu.js
index 7bcfaa4c30..547f5079a9 100644
--- a/apps/comments-ui/src/components/modals/AdminContextMenu.js
+++ b/apps/comments-ui/src/components/modals/AdminContextMenu.js
@@ -9,6 +9,7 @@ class AdminContextMenu extends React.Component {
         this.state = {};
 
         this.hideComment = this.hideComment.bind(this);
+        this.showComment = this.showComment.bind(this);
     }
 
     hideComment(event) {
@@ -16,15 +17,33 @@ class AdminContextMenu extends React.Component {
         this.close();
     }
 
+    showComment(event) {
+        this.context.onAction('showComment', this.props.comment);
+        this.close();
+    }
+
+    get isHidden() {
+        return this.props.comment.status !== 'published';
+    }
+
     close() {
         this.props.close();
     }
 
     render() {
         return (
-            <button onClick={this.hideComment}>
-                Hide comment
-            </button>
+            <div className="flex flex-col">
+                {
+                    this.isHidden ? 
+                        <button onClick={this.showComment}>
+                            Show comment
+                        </button> 
+                        : 
+                        <button onClick={this.hideComment}>
+                            Hide comment
+                        </button>
+                }
+            </div>
         );
     }
 }
diff --git a/apps/comments-ui/src/components/modals/CommentContextMenu.js b/apps/comments-ui/src/components/modals/CommentContextMenu.js
index 0317c2df80..f5293f7c22 100644
--- a/apps/comments-ui/src/components/modals/CommentContextMenu.js
+++ b/apps/comments-ui/src/components/modals/CommentContextMenu.js
@@ -31,7 +31,7 @@ class CommentContextMenu extends React.Component {
 
         return (
             <div className="bg-white absolute font-sans rounded py-3 px-4 drop-shadow-xl text-sm whitespace-nowrap">
-                {this.isAuthor ? <AuthorContextMenu comment={comment} close={this.close}/> : (this.isAdmin ? <AdminContextMenu comment={comment} close={this.close}/> : <NotAuthorContextMenu comment={comment} close={this.close}/>)}
+                {this.isAuthor && comment.status === 'published' ? <AuthorContextMenu comment={comment} close={this.close}/> : (this.isAdmin ? <AdminContextMenu comment={comment} close={this.close}/> : <NotAuthorContextMenu comment={comment} close={this.close}/>)}
             </div>
         );
     }