Use can prefix instead of undefined callback

src/views/preview/comment/comment.jsx

@@ -85,8 +85,9 @@ class Comment extends React.Component {
     render () {
         const {
             author,
-            deletable,
+            canDelete,
             canReply,
+            canRestore,
             content,
             datetimeCreated,
             id,
@@ -113,7 +114,7 @@ class Comment extends React.Component {
                         <div className="action-list">
                             {visible ? (
                                 <React.Fragment>
-                                    {deletable ? (
+                                    {canDelete ? (
                                         <span
                                             className="comment-delete"
                                             onClick={this.handleDelete}
@@ -133,7 +134,7 @@ class Comment extends React.Component {
                                     <span className="comment-visibility">
                                         <FormattedMessage id={`comments.status.${visibility}`} />
                                     </span>
-                                    {this.props.onRestore && (
+                                    {canRestore && (
                                         <span
                                             className="comment-restore"
                                             onClick={this.handleRestore}
@@ -212,10 +213,11 @@ Comment.propTypes = {
         image: PropTypes.string,
         username: PropTypes.string
     }),
+    canDelete: PropTypes.bool,
     canReply: PropTypes.bool,
+    canRestore: PropTypes.bool,
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
-    deletable: PropTypes.bool,
     id: PropTypes.number,
     onAddComment: PropTypes.func,
     onDelete: PropTypes.func,

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

@@ -53,10 +53,11 @@ class TopLevelComment extends React.Component {
     render () {
         const {
             author,
+            canDelete,
             canReply,
+            canRestore,
             content,
             datetimeCreated,
-            deletable,
             id,
             onDelete,
             onReport,
@@ -66,7 +67,7 @@ class TopLevelComment extends React.Component {
             visibility
         } = this.props;
 
-        const canRestoreReplies = visibility === 'visible';
+        const parentVisible = visibility === 'visible';
 
         return (
             <FlexRow className="comment-container">
@@ -77,8 +78,9 @@ class TopLevelComment extends React.Component {
                         author,
                         content,
                         datetimeCreated,
-                        deletable,
+                        canDelete,
                         canReply,
+                        canRestore,
                         id,
                         onDelete,
                         onReport,
@@ -98,10 +100,11 @@ class TopLevelComment extends React.Component {
                         {(this.state.expanded ? replies : replies.slice(0, 3)).map(reply => (
                             <Comment
                                 author={reply.author}
+                                canDelete={canDelete}
                                 canReply={canReply}
+                                canRestore={canRestore && parentVisible}
                                 content={reply.content}
                                 datetimeCreated={reply.datetime_created}
-                                deletable={deletable}
                                 id={reply.id}
                                 key={reply.id}
                                 projectId={projectId}
@@ -109,7 +112,7 @@ class TopLevelComment extends React.Component {
                                 onAddComment={this.handleAddComment}
                                 onDelete={this.handleDeleteReply}
                                 onReport={this.handleReportReply}
-                                onRestore={canRestoreReplies && this.handleRestoreReply}
+                                onRestore={this.handleRestoreReply}
                             />
                         ))}
                     </FlexRow>
@@ -138,7 +141,9 @@ TopLevelComment.propTypes = {
         image: PropTypes.string,
         username: PropTypes.string
     }),
+    canDelete: PropTypes.bool,
     canReply: PropTypes.bool,
+    canRestore: PropTypes.bool,
     content: PropTypes.string,
     datetimeCreated: PropTypes.string,
     deletable: PropTypes.bool,

src/views/preview/presentation.jsx

@@ -46,6 +46,7 @@ const PreviewPresentation = ({
     backpackOptions,
     canAddToStudio,
     canReport,
+    canRestoreComments,
     comments,
     editable,
     extensions,
@@ -363,10 +364,11 @@ const PreviewPresentation = ({
                                         {comments.map(comment => (
                                             <TopLevelComment
                                                 author={comment.author}
+                                                canDelete={userOwnsProject}
                                                 canReply={isLoggedIn && projectInfo.comments_allowed}
+                                                canRestore={canRestoreComments}
                                                 content={comment.content}
                                                 datetimeCreated={comment.datetime_created}
-                                                deletable={userOwnsProject}
                                                 id={comment.id}
                                                 key={comment.id}
                                                 parentId={comment.parent_id}
@@ -411,6 +413,7 @@ PreviewPresentation.propTypes = {
     }),
     canAddToStudio: PropTypes.bool,
     canReport: PropTypes.bool,
+    canRestoreComments: PropTypes.bool,
     comments: PropTypes.arrayOf(PropTypes.object),
     editable: PropTypes.bool,
     extensions: PropTypes.arrayOf(PropTypes.object),

src/views/preview/preview.jsx

@@ -351,6 +351,7 @@ class Preview extends React.Component {
                         backpackOptions={this.props.backpackOptions}
                         canAddToStudio={this.props.canAddToStudio}
                         canReport={this.props.canReport}
+                        canRestoreComments={this.props.isAdmin}
                         comments={this.props.comments}
                         editable={this.props.isEditable}
                         extensions={this.state.extensions}
@@ -383,7 +384,7 @@ class Preview extends React.Component {
                         onReportClose={this.handleReportClose}
                         onReportComment={this.handleReportComment}
                         onReportSubmit={this.handleReportSubmit}
-                        onRestoreComment={this.props.isAdmin && this.handleRestoreComment}
+                        onRestoreComment={this.handleRestoreComment}
                         onSeeInside={this.handleSeeInside}
                         onShare={this.handleShare}
                         onToggleComments={this.handleToggleComments}