add Comment component

resource/js/components/PageComment/Comment.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import moment from 'moment/src/moment';
+
+import UserPicture from '../User/UserPicture';
+
+export default class Comment extends React.Component {
+
+  constructor(props) {
+    super(props);
+
+    this.getRootClassName = this.getRootClassName.bind(this);
+  }
+
+  getRootClassName() {
+    let className = "page-comment"
+
+    if (this.props.comment.creator._id === this.props.currentUserId) {
+      className += ' page-comment-me'
+    }
+
+    return className;
+  }
+
+  render() {
+    const comment = this.props.comment;
+    const creator = comment.creator;
+
+    const rootClassName = this.getRootClassName();
+    const commentDate = moment(comment.createdAt).format('YYYY/MM/DD HH:mm:ss');
+    const revHref = `?revision=${comment.revision}`;
+    const revFirst8Letters = comment.revision.substr(0,8);
+
+    return (
+      <div className={rootClassName}>
+        <UserPicture user={creator} />
+        <div className="page-comment-main">
+          <div className="page-comment-creator">{creator.username}</div>
+          <div className="page-comment-body">{comment.comment.replace(/(\r\n|\r|\n)/g, '<br>')}</div>
+          <div className="page-comment-meta">
+            {commentDate}&nbsp;
+            <a className="page-comment-revision label label-primary" href={revHref}>{revFirst8Letters}</a>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+Comment.propTypes = {
+  comment: PropTypes.object.isRequired,
+  currentUserId: PropTypes.string.isRequired,
+};

resource/js/components/PageComments.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Comment from './PageComment/Comment';
+
 export default class PageComments extends React.Component {
 
   constructor(props) {
@@ -59,17 +61,24 @@ export default class PageComments extends React.Component {
 
   }
 
+  /**
+   * generate Elements of Comment
+   *
+   * @param {any} comments Array of Comment Model Obj
+   *
+   * @memberOf PageComments
+   */
+  generateCommentElements(comments) {
+    return comments.map((comment) => {
+      return <Comment comment={comment} currentUserId={this.props.crowi.me} />
+    });
+  }
+
   render() {
     // TODO impl elements
-    let currentElements = this.state.currentComments.map((comment) => {
-      return <p>{comment.comment}</p>
-    });
-    let newerElements = this.state.newerComments.map((comment) => {
-      return <p>{comment.comment}</p>
-    });
-    let olderElements = this.state.olderComments.map((comment) => {
-      return <p>{comment.comment}</p>
-    });
+    let currentElements = this.generateCommentElements(this.state.currentComments);
+    let newerElements = this.generateCommentElements(this.state.newerComments);
+    let olderElements = this.generateCommentElements(this.state.olderComments);
 
     let toggleNewer = (newerElements.length === 0)
       ? <div></div>