Combine comment reported and deleted flags into visibility string

To prepare for server including visibility

src/l10n.json

@@ -227,5 +227,18 @@
     "comments.post": "Post",
     "comments.cancel": "Cancel",
     "comments.lengthWarning": "{remainingCharacters, plural, one {1 character left} other {{remainingCharacters} characters left}}",
-    "comments.seeMoreReplies": "{repliesCount, plural, one {See 1 more reply} other {See all {repliesCount} replies}}"
+    "comments.seeMoreReplies": "{repliesCount, plural, one {See 1 more reply} other {See all {repliesCount} replies}}",
+    "comments.status.delbyusr": "Deleted by project owner",
+    "comments.status.censbyfilter": "Censored by filter",
+    "comments.status.delbyparentcomment": "Parent comment deleted",
+    "comments.status.censbyadmin": "Censored by admin",
+    "comments.status.delbyadmin": "Deleted by admin",
+    "comments.status.parentcommentcensored": "Parent comment censored",
+    "comments.status.delbyclass": "Deleted by class",
+    "comments.status.hiddenduetourl": "Hidden due to URL",
+    "comments.status.markedbyfilter": "Marked by filter",
+    "comments.status.suspended": "Suspended",
+    "comments.status.acctdel": "Account deleted",
+    "comments.status.deleted": "Deleted",
+    "comments.status.reported": "Reported"
 }

src/redux/preview.js

@@ -233,7 +233,7 @@ module.exports.setCommentDeleted = (commentId, topLevelCommentId) => ({
     commentId: commentId,
     topLevelCommentId: topLevelCommentId,
     comment: {
-        deleted: true
+        visibility: 'deleted'
     }
 });
 
@@ -242,7 +242,7 @@ module.exports.setCommentReported = (commentId, topLevelCommentId) => ({
     commentId: commentId,
     topLevelCommentId: topLevelCommentId,
     comment: {
-        reported: true
+        visibility: 'reported'
     }
 });
 

src/views/preview/comment/comment.jsx

@@ -13,6 +13,10 @@ const ReportCommentModal = require('../../../components/modal/comments/report-co
 
 require('./comment.scss');
 
+const CommentVisibility = {
+    VISIBLE: 'visible' // Has to match the server response for visibility
+};
+
 class Comment extends React.Component {
     constructor (props) {
         super(props);
@@ -81,15 +85,16 @@ class Comment extends React.Component {
         const {
             author,
             deletable,
-            deleted,
             canReply,
             content,
             datetimeCreated,
             id,
             projectId,
-            reported
+            visibility
         } = this.props;
 
+        const visible = visibility === CommentVisibility.VISIBLE;
+
         return (
             <div
                 className="flex-row comment"
@@ -105,27 +110,35 @@ class Comment extends React.Component {
                             href={`/users/${author.username}`}
                         >{author.username}</a>
                         <div className="action-list">
-                            {deletable ? (
-                                <span
-                                    className="comment-delete"
-                                    onClick={this.handleDelete}
-                                >
-                                    <FormattedMessage id="comments.delete" />
+                            {visible ? (
+                                <React.Fragment>
+                                    {deletable ? (
+                                        <span
+                                            className="comment-delete"
+                                            onClick={this.handleDelete}
+                                        >
+                                            <FormattedMessage id="comments.delete" />
+                                        </span>
+                                    ) : null}
+                                    <span
+                                        className="comment-report"
+                                        onClick={this.handleReport}
+                                    >
+                                        <FormattedMessage id="comments.report" />
+                                    </span>
+                                </React.Fragment>
+                            ) : (
+                                <span className="comment-visibility">
+                                    <FormattedMessage id={`comments.status.${visibility}`} />
+                                    {/* TODO restore action will go here */}
                                 </span>
-                            ) : null}
-                            <span
-                                className="comment-report"
-                                onClick={this.handleReport}
-                            >
-                                <FormattedMessage id="comments.report" />
-                            </span>
+                            )}
                         </div>
                     </FlexRow>
                     <div
                         className={classNames({
                             'comment-bubble': true,
-                            'comment-bubble-deleted': deleted,
-                            'comment-bubble-reported': reported
+                            'comment-bubble-reported': !visible
                         })}
                     >
                         {/* TODO: at the moment, comment content does not properly display
@@ -193,13 +206,12 @@ Comment.propTypes = {
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
     deletable: PropTypes.bool,
-    deleted: PropTypes.bool,
     id: PropTypes.number,
     onAddComment: PropTypes.func,
     onDelete: PropTypes.func,
     onReport: PropTypes.func,
     projectId: PropTypes.string,
-    reported: PropTypes.bool
+    visibility: PropTypes.string
 };
 
 module.exports = Comment;

src/views/preview/comment/comment.scss

@@ -82,6 +82,7 @@
             opacity: .5;
             font-size: .75rem;
             font-weight: 500;
+            cursor: pointer;
 
             &:before {
                 display: inline-block;
@@ -93,6 +94,11 @@
             }
         }
 
+        .comment-visibility {
+            opacity: .5;
+            font-size: .75rem;
+        }
+
         .comment-delete {
             margin-right: 1rem;
 
@@ -150,19 +156,6 @@
                 content: "";
             }
 
-            &.comment-bubble-deleted {
-                $deleted-outline:  $active-gray;
-                $deleted-background: rgb(215, 222, 234);
-
-                border-color: $deleted-outline;
-                background-color: $deleted-background;
-
-                &:before {
-                    border-color: $deleted-outline transparent $deleted-outline $deleted-outline;
-                    background: $deleted-background;
-                }
-            }
-
             &.comment-bubble-reported {
                 $reported-outline:  #ff6680;
                 $reported-background: rgb(236, 206, 223);

src/views/preview/comment/top-level-comment.jsx

@@ -52,13 +52,12 @@ class TopLevelComment extends React.Component {
             content,
             datetimeCreated,
             deletable,
-            deleted,
             id,
             onDelete,
             onReport,
             replies,
-            reported,
-            projectId
+            projectId,
+            visibility
         } = this.props;
 
         return (
@@ -71,12 +70,11 @@ class TopLevelComment extends React.Component {
                         content,
                         datetimeCreated,
                         deletable,
-                        deleted,
                         canReply,
                         id,
                         onDelete,
                         onReport,
-                        reported
+                        visibility
                     }}
                 />
                 {replies.length > 0 &&
@@ -95,11 +93,10 @@ class TopLevelComment extends React.Component {
                                 content={reply.content}
                                 datetimeCreated={reply.datetime_created}
                                 deletable={deletable}
-                                deleted={reply.deleted}
                                 id={reply.id}
                                 key={reply.id}
                                 projectId={projectId}
-                                reported={reply.reported}
+                                visibility={reply.visibility}
                                 onAddComment={this.handleAddComment}
                                 onDelete={this.handleDeleteReply}
                                 onReport={this.handleReportReply}
@@ -135,7 +132,6 @@ TopLevelComment.propTypes = {
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
     deletable: PropTypes.bool,
-    deleted: PropTypes.bool,
     id: PropTypes.number,
     onAddComment: PropTypes.func,
     onDelete: PropTypes.func,
@@ -143,7 +139,7 @@ TopLevelComment.propTypes = {
     parentId: PropTypes.number,
     projectId: PropTypes.string,
     replies: PropTypes.arrayOf(PropTypes.object),
-    reported: PropTypes.bool
+    visibility: PropTypes.string
 };
 
 module.exports = TopLevelComment;

src/views/preview/presentation.jsx

@@ -366,13 +366,12 @@ const PreviewPresentation = ({
                                                 content={comment.content}
                                                 datetimeCreated={comment.datetime_created}
                                                 deletable={userOwnsProject}
-                                                deleted={comment.deleted}
                                                 id={comment.id}
                                                 key={comment.id}
                                                 parentId={comment.parent_id}
                                                 projectId={projectId}
                                                 replies={replies && replies[comment.id] ? replies[comment.id] : []}
-                                                reported={comment.reported}
+                                                visibility={comment.visibility}
                                                 onAddComment={onAddComment}
                                                 onDelete={onDeleteComment}
                                                 onReport={onReportComment}