frontend: delete own comment button added (#214)

* frontend: delete own comment button added

* fix behaviour while in admin mode

web/app/common/api.js

@@ -54,6 +54,15 @@ export const updateComment = ({ text, id }) =>
     withCredentials: true,
   });
 
+export const removeMyComment = ({ id }) =>
+  fetcher.put({
+    url: `/comment/${id}?url=${url}`,
+    body: {
+      delete: true,
+    },
+    withCredentials: true,
+  });
+
 export const getPreview = ({ text }) =>
   fetcher.post({
     url: '/preview',
@@ -153,6 +162,7 @@ export default {
   putCommentVote,
   addComment,
   updateComment,
+  removeMyComment,
   getUser,
   getPreview,
 

web/app/components/comment/__action/_type/_delete/comment__action_type_delete.scss

@@ -0,0 +1,7 @@
+.comment__action_type_delete {
+  color: #a6a6a6;
+
+  &:hover {
+    color: #31c7c5;
+  }
+}

web/app/components/comment/__edit-timer/comment__edit-timer.scss

@@ -0,0 +1,16 @@
+.comment__edit-timer {
+  font-size: 14px;
+  vertical-align: middle;
+  user-select: none;
+  color: #a6a6a6;
+  margin-left: 8px;
+
+  + .comment__controls {
+    &::before {
+      content: '•';
+      margin-left: 8px;
+      margin-right: 8px;
+      color: #777;
+    }
+  }
+}

web/app/components/comment/comment.jsx

@@ -36,6 +36,7 @@ export default class Comment extends Component {
     this.onEdit = this.onEdit.bind(this);
     this.onReply = this.onReply.bind(this);
     this.onDeleteClick = this.onDeleteClick.bind(this);
+    this.onOwnCommentDeleteClick = this.onOwnCommentDeleteClick.bind(this);
     this.onBlockUserClick = this.onBlockUserClick.bind(this);
     this.onUnblockUserClick = this.onUnblockUserClick.bind(this);
   }
@@ -226,6 +227,22 @@ export default class Comment extends Component {
     }
   }
 
+  onOwnCommentDeleteClick() {
+    const { id } = this.props.data;
+
+    if (confirm('Do you want to delete this comment?')) {
+      this.setState({
+        deleted: true,
+        isEditing: false,
+        isReplying: false,
+      });
+
+      api.removeMyComment({ id }).then(() => {
+        api.getComment({ id }).then(comment => store.replaceComment(comment));
+      });
+    }
+  }
+
   increaseScore() {
     const { score, scoreIncreased, scoreDecreased } = this.state;
     const { id } = this.props.data;
@@ -515,15 +532,23 @@ export default class Comment extends Component {
               !!o.orig &&
               isCurrentUser &&
               (!!editTimeLeft || isEditing) &&
-              mods.view !== 'user' && (
+              mods.view !== 'user' && [
                 <span
                   {...getHandleClickProps(this.toggleEditing)}
                   className="comment__action comment__action_type_edit"
                 >
                   {isEditing ? 'Cancel' : 'Edit'}
-                  {editTimeLeft && ` (${editTimeLeft})`}
-                </span>
-              )}
+                </span>,
+                !isAdmin && (
+                  <span
+                    {...getHandleClickProps(this.onOwnCommentDeleteClick)}
+                    className="comment__action comment__action_type_delete"
+                  >
+                    Delete
+                  </span>
+                ),
+                <span class="comment__edit-timer">{editTimeLeft && `${editTimeLeft}`}</span>,
+              ]}
 
             {!deleted &&
               isAdmin && (

web/app/components/comment/index.js

@@ -7,6 +7,9 @@ require('./comment.scss');
 require('./__action/comment__action.scss');
 require('./__action/_type/_collapse/comment__action_type_collapse.scss');
 require('./__action/_type/_edit/comment__action_type_edit.scss');
+require('./__action/_type/_delete/comment__action_type_delete.scss');
+
+require('./__edit-timer/comment__edit-timer.scss');
 
 require('./__body/comment__body.scss');
 require('./__control/comment__control.scss');