From beab481d99e6a0288c2225e5c33726b6395811b1 Mon Sep 17 00:00:00 2001
From: Misha Vyrtsev <reeywhaar@gmail.com>
Date: Thu, 1 Nov 2018 22:10:36 +0300
Subject: [PATCH] frontend: delete own comment button added (#214)

* frontend: delete own comment button added

* fix behaviour while in admin mode
---
 web/app/common/api.js                         | 10 ++++++
 .../_delete/comment__action_type_delete.scss  |  7 ++++
 .../__edit-timer/comment__edit-timer.scss     | 16 +++++++++
 web/app/components/comment/comment.jsx        | 33 ++++++++++++++++---
 web/app/components/comment/index.js           |  3 ++
 5 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 web/app/components/comment/__action/_type/_delete/comment__action_type_delete.scss
 create mode 100644 web/app/components/comment/__edit-timer/comment__edit-timer.scss

diff --git a/web/app/common/api.js b/web/app/common/api.js
index 56a36175..385b039e 100644
--- a/web/app/common/api.js
+++ b/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,
 
diff --git a/web/app/components/comment/__action/_type/_delete/comment__action_type_delete.scss b/web/app/components/comment/__action/_type/_delete/comment__action_type_delete.scss
new file mode 100644
index 00000000..ce9acf91
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/web/app/components/comment/__edit-timer/comment__edit-timer.scss b/web/app/components/comment/__edit-timer/comment__edit-timer.scss
new file mode 100644
index 00000000..19f82d3d
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/web/app/components/comment/comment.jsx b/web/app/components/comment/comment.jsx
index db7b1576..b47e8345 100644
--- a/web/app/components/comment/comment.jsx
+++ b/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 && (
diff --git a/web/app/components/comment/index.js b/web/app/components/comment/index.js
index d7a0256e..a739f194 100644
--- a/web/app/components/comment/index.js
+++ b/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');