Make comment deleting and restoring correctly update replies

src/redux/preview.js

@@ -123,6 +123,14 @@ module.exports.previewReducer = (state, action) => {
             comments: [action.comment, ...state.comments],
             replies: Object.assign({}, state.replies, {[action.comment.id]: []})
         });
+    case 'UPDATE_ALL_REPLIES':
+        return Object.assign({}, state, {
+            replies: Object.assign({}, state.replies, {
+                [action.commentId]: state.replies[action.commentId].map(reply =>
+                    Object.assign({}, reply, action.comment)
+                )
+            })
+        });
     case 'SET_REPLIES':
         return Object.assign({}, state, {
             replies: merge({}, state.replies, action.replies)
@@ -237,6 +245,14 @@ module.exports.setCommentDeleted = (commentId, topLevelCommentId) => ({
     }
 });
 
+module.exports.setRepliesDeleted = commentId => ({
+    type: 'UPDATE_ALL_REPLIES',
+    commentId: commentId,
+    comment: {
+        visibility: 'deleted'
+    }
+});
+
 module.exports.setCommentReported = (commentId, topLevelCommentId) => ({
     type: 'UPDATE_COMMENT',
     commentId: commentId,
@@ -255,6 +271,14 @@ module.exports.setCommentRestored = (commentId, topLevelCommentId) => ({
     }
 });
 
+module.exports.setRepliesRestored = commentId => ({
+    type: 'UPDATE_ALL_REPLIES',
+    commentId: commentId,
+    comment: {
+        visibility: 'visible'
+    }
+});
+
 module.exports.addNewComment = (comment, topLevelCommentId) => ({
     type: 'ADD_NEW_COMMENT',
     comment: comment,
@@ -648,6 +672,9 @@ module.exports.deleteComment = (projectId, commentId, topLevelCommentId, token)
             return;
         }
         dispatch(module.exports.setCommentDeleted(commentId, topLevelCommentId));
+        if (!topLevelCommentId) {
+            dispatch(module.exports.setRepliesDeleted(commentId));
+        }
     });
 });
 
@@ -681,6 +708,9 @@ module.exports.restoreComment = (projectId, commentId, topLevelCommentId, token)
             return;
         }
         dispatch(module.exports.setCommentRestored(commentId, topLevelCommentId));
+        if (!topLevelCommentId) {
+            dispatch(module.exports.setRepliesRestored(commentId));
+        }
     });
 });
 

src/views/preview/comment/comment.jsx

@@ -161,7 +161,7 @@ class Comment extends React.Component {
                             <span className="comment-time">
                                 <FormattedRelative value={new Date(datetimeCreated)} />
                             </span>
-                            {canReply ? (
+                            {(canReply && visible) ? (
                                 <span
                                     className="comment-reply"
                                     onClick={this.handleToggleReplying}

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

@@ -66,6 +66,8 @@ class TopLevelComment extends React.Component {
             visibility
         } = this.props;
 
+        const canRestoreReplies = visibility === 'visible';
+
         return (
             <FlexRow className="comment-container">
                 <Comment
@@ -107,7 +109,7 @@ class TopLevelComment extends React.Component {
                                 onAddComment={this.handleAddComment}
                                 onDelete={this.handleDeleteReply}
                                 onReport={this.handleReportReply}
-                                onRestore={this.handleRestoreReply}
+                                onRestore={canRestoreReplies && this.handleRestoreReply}
                             />
                         ))}
                     </FlexRow>