Add a delete button for own comments

storybookjs · Oct 12, 2016 · e565c40 · e565c40
1 parent 95366de
commit e565c40
Show file tree

Hide file tree

Showing 7 changed files with 148 additions and 90 deletions.
diff --git a/src/manager/components/CommentItem/index.js b/src/manager/components/CommentItem/index.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import moment from 'moment';
+import renderHTML from 'react-render-html';
+import insertCss from 'insert-css';
+import style from './style';
+import commentCSS from './style.css';
+
+insertCss(commentCSS);
+
+export default class CommentItem extends Component {
+  constructor(props, ...args) {
+    super(props, ...args);
+    this.state = { hovered: false };
+    this.mouseEnter = this.mouseEnter.bind(this);
+    this.mouseLeave = this.mouseLeave.bind(this);
+    this.deleteComment = this.deleteComment.bind(this);
+  }
+
+  mouseEnter() {
+    this.setState({ hovered: true });
+  }
+
+  mouseLeave() {
+    this.setState({ hovered: false });
+  }
+
+  deleteComment() {
+    this.props.deleteComment();
+  }
+
+  renderDelete() {
+    return (
+      <a
+        href="#"
+        style={style.commentDelete}
+        onClick={this.props.deleteComment}>
+        delete
+      </a>
+    );
+  }
+
+  render() {
+    const comment = this.props.comment;
+    let commentStyle = style.commentItem;
+    if (comment.loading) {
+      commentStyle = style.commentItemloading;
+    }
+
+    const time = moment(new Date(comment.time), "YYYYMMDD").fromNow();
+    const body = renderHTML(`<span>${comment.text}</span>`);
+    const showDelete = this.state.hovered && this.props.ownComment;
+
+    return (
+      <div style={commentStyle} onMouseEnter={this.mouseEnter} onMouseLeave={this.mouseLeave}>
+        <div style={style.commentAside}>
+          <img style={style.commentAvatar} src={comment.user.avatar} />
+        </div>
+        <div className="comment-content" style={style.commentContent}>
+          <div style={style.commentHead}>
+            <span style={style.commentUser}>{comment.user.name}</span>
+            <span style={style.commentTime}>{time}</span>
+          </div>
+          <span style={style.commentText}>{body}</span>
+          {showDelete ? this.renderDelete() : null}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/...CommentList/comment_content_styles.css.js → ...nager/components/CommentItem/style.css.js b/...CommentList/comment_content_styles.css.js → ...nager/components/CommentItem/style.css.js
diff --git a/src/manager/components/CommentItem/style.js b/src/manager/components/CommentItem/style.js
@@ -0,0 +1,58 @@
+const commentItem = {
+  display: 'flex',
+  paddingBottom: '5px',
+  WebkitFontSmoothing: 'antialiased',
+  transition: 'opacity 0.5s',
+}
+
+export default {
+  commentItem: {
+    ...commentItem,
+  },
+  commentItemloading: {
+    ...commentItem,
+    opacity: 0.25,
+  },
+  commentAside: {
+    margin: '5px 10px 0 0',
+  },
+  commentAvatar: {
+    width: 32,
+    height: 32,
+    borderRadius: 5,
+  },
+  commentContent: {
+    position: 'relative',
+    flex: 1,
+  },
+  commentHead: {
+    //
+  },
+  commentUser: {
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1,
+    fontWeight: 'bold',
+    marginRight: 5,
+  },
+  commentTime: {
+    fontFamily: 'sans-serif',
+    fontSize: 11,
+    lineHeight: 1,
+    color: 'rgb(150, 150, 150)',
+  },
+  commentText: {
+    fontFamily: 'sans-serif',
+    fontSize: 13,
+    lineHeight: 1.7,
+    maxWidth: 650,
+  },
+  commentDelete: {
+    fontFamily: 'sans-serif',
+    position: 'absolute',
+    top: 2,
+    right: 0,
+    fontSize: 11,
+    color: 'rgb(200, 200, 200)',
+  },
+}
diff --git a/src/manager/components/CommentList/index.js b/src/manager/components/CommentList/index.js
@@ -1,11 +1,6 @@
 import React, { Component } from 'react';
-import moment from 'moment';
-import renderHTML from 'react-render-html';
-import insertCss from 'insert-css';
 import style from './style';
-import commentContentCSS from './comment_content_styles.css';
-
-insertCss(commentContentCSS);
+import CommentItem from '../CommentItem';
 
 export default class CommentList extends Component {
   componentDidMount() {
@@ -20,34 +15,6 @@ export default class CommentList extends Component {
     }
   }
 
-  formatTime(ts) {
-    return moment(new Date(ts), "YYYYMMDD").fromNow();
-  }
-
-  renderComment(comment, key) {
-    if (!comment.user) return null;
-
-    let commentStyle = style.commentItem;
-    if (comment.loading) {
-      commentStyle = style.commentItemloading;
-    }
-
-    return (
-      <div style={commentStyle} key={key}>
-        <div style={style.commentAside}>
-          <img style={style.commentAvatar} src={comment.user.avatar} />
-        </div>
-        <div className="comment-content" style={style.commentContent}>
-          <div style={style.commentHead}>
-            <span style={style.commentUser}>{comment.user.name}</span>
-            <span style={style.commentTime}>{this.formatTime(comment.time)}</span>
-          </div>
-          <span style={style.commentText}>{ renderHTML(`<span>${comment.text}</span>`) }</span>
-        </div>
-      </div>
-    );
-  }
-
   render() {
     const { comments } = this.props;
 
@@ -61,7 +28,14 @@ export default class CommentList extends Component {
 
     return (
       <div ref="wrapper" style={style.wrapper}>
-        {comments.map((c, idx) => this.renderComment(c, idx))}
+        {comments.map((comment, idx) => (
+          <CommentItem
+            key={`comment_${idx}`}
+            comment={comment}
+            ownComment={comment.userId === this.props.user.id}
+            deleteComment={() => this.props.deleteComment(comment.id)}
+          />
+        ))}
       </div>
     );
   }

diff --git a/src/manager/components/CommentList/style.js b/src/manager/components/CommentList/style.js
@@ -1,57 +1,9 @@
-const commentItem = {
-  display: 'flex',
-  paddingBottom: '5px',
-  WebkitFontSmoothing: 'antialiased',
-  transition: 'opacity 0.5s',
-  maxWidth: 700,
-}
-
 export default {
   wrapper: {
     flex: 1,
     overflow: 'auto',
     padding: '7px 15px',
   },
-  commentItem: {
-    ...commentItem,
-  },
-  commentItemloading: {
-    ...commentItem,
-    opacity: 0.25,
-  },
-  commentAside: {
-    margin: '5px 10px 0 0',
-  },
-  commentAvatar: {
-    width: 32,
-    height: 32,
-    borderRadius: 5,
-  },
-  commentContent: {
-    flex: 1,
-  },
-  commentHead: {
-    //
-  },
-  commentUser: {
-    fontFamily: 'sans-serif',
-    fontSize: 13,
-    lineHeight: 1,
-    fontWeight: 'bold',
-    marginRight: 5,
-  },
-  commentTime: {
-    fontFamily: 'sans-serif',
-    fontSize: 11,
-    lineHeight: 1,
-    color: 'rgb(150, 150, 150)',
-  },
-  commentText: {
-    fontFamily: 'sans-serif',
-    fontSize: 13,
-    lineHeight: 1.7,
-    maxWidth: 650,
-  },
   noComments: {
     fontFamily: 'sans-serif',
     fontSize: 13,

diff --git a/src/manager/containers/CommentsPanel/dataStore.js b/src/manager/containers/CommentsPanel/dataStore.js
@@ -90,10 +90,10 @@ export default class DataStore {
     return Promise.resolve(null);
   }
 
-  _setDeletedComment(comment) {
+  _setDeletedComment(commentId) {
     const storyKey = this._getStoryKey(this.currentStory);
     const comments = this.cache[storyKey];
-    const deleted = comments.find(c => c.id === comment.id);
+    const deleted = comments.find(c => c.id === commentId);
     if (deleted) {
       deleted.loading = true;
     }
@@ -121,8 +121,8 @@ export default class DataStore {
     return this.db.getCollection('comments').set(doc);
   }
 
-  _deleteCommentOnDatabase(comment) {
-    const query = { id: comment.id };
+  _deleteCommentOnDatabase(commentId) {
+    const query = { id: commentId };
     return this.db.getCollection('comments').del(query);
   }
 
@@ -134,9 +134,9 @@ export default class DataStore {
       .then(() => this._loadComments())
   }
 
-  deleteComment(comment) {
-    this._setDeletedComment(comment)
-      .then(() => this._deleteCommentOnDatabase(comment))
+  deleteComment(commentId) {
+    this._setDeletedComment(commentId)
+      .then(() => this._deleteCommentOnDatabase(commentId))
       .then(() => this._loadComments())
   }
 }
diff --git a/src/manager/containers/CommentsPanel/index.js b/src/manager/containers/CommentsPanel/index.js
@@ -64,11 +64,16 @@ export default class Container extends Component {
     this.store.addComment(comment);
   }
 
+  deleteComment(commentId) {
+    this.store.deleteComment(commentId);
+  }
+
   render() {
     const props = {
       user: this.state.user,
       comments: this.state.comments,
       loading: this.state.loading,
+      deleteComment: commentId => this.deleteComment(commentId),
       addComment: text => this.addComment(text),
     };