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' && [
{isEditing ? 'Cancel' : 'Edit'}
- {editTimeLeft && ` (${editTimeLeft})`}
-
- )}
+ ,
+ !isAdmin && (
+
+ Delete
+
+ ),
+ ,
+ ]}
{!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');