Refacting post_info.jsx to be an example for ES6 class syntax

web/react/components/post.jsx

@@ -3,7 +3,6 @@
 
 var PostHeader = require('./post_header.jsx');
 var PostBody = require('./post_body.jsx');
-var PostInfo = require('./post_info.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var Constants = require('../utils/constants.jsx');
 var UserStore = require('../stores/user_store.jsx');
@@ -13,6 +12,8 @@ var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var ActionTypes = Constants.ActionTypes;
 
+var PostInfo = require('./post_info.jsx');
+
 module.exports = React.createClass({
     displayName: "Post",
     handleCommentClick: function(e) {

web/react/components/post_info.jsx

@@ -6,11 +6,18 @@ var utils = require('../utils/utils.jsx');
 
 var Constants = require('../utils/constants.jsx');
 
-module.exports = React.createClass({
+export default class PostInfo extends React.Component {
-    getInitialState: function() {
+    constructor(props) {
-        return { };
+        super(props);
-    },
+        this.state = {};
-    render: function() {
+    }
+    shouldShowComment(state, type, isOwner) {
+        if (state === Constants.POST_FAILED || state === Constants.POST_LOADING) {
+            return false;
+        }
+        return isOwner || (this.props.allowReply === 'true' && type !== 'Comment');
+    }
+    createDropdown() {
         var post = this.props.post;
         var isOwner = UserStore.getCurrentId() === post.user_id;
         var isAdmin = UserStore.getCurrentUser().roles.indexOf('admin') > -1;
@@ -20,6 +27,89 @@ module.exports = React.createClass({
             type = 'Comment';
         }
 
+        if (!this.shouldShowComment(post.state, type, isOwner)) {
+            return '';
+        }
+
+        var dropdownContents = [];
+        var dataComments = 0;
+        if (type === 'Post') {
+            dataComments = this.props.commentCount;
+        }
+
+        if (isOwner) {
+            dropdownContents.push(
+                <li role='presentation'>
+                    <a
+                        href='#'
+                        role='menuitem'
+                        data-toggle='modal'
+                        data-target='#edit_post'
+                        data-title={type}
+                        data-message={post.message}
+                        data-postid={post.id}
+                        data-channelid={post.channel_id}
+                        data-comments={dataComments}
+                    >
+                        Edit
+                    </a>
+                </li>
+            );
+        }
+
+        if (isOwner || isAdmin) {
+            dropdownContents.push(
+                <li role='presentation'>
+                    <a
+                        href='#'
+                        role='menuitem'
+                        data-toggle='modal'
+                        data-target='#delete_post'
+                        data-title={type}
+                        data-postid={post.id}
+                        data-channelid={post.channel_id}
+                        data-comments={dataComments}
+                    >
+                        Delete
+                    </a>
+                </li>
+            );
+        }
+
+        if (this.props.allowReply === 'true') {
+            dropdownContents.push(
+                <li role='presentation'>
+                    <a
+                        className='reply-link theme'
+                        href='#'
+                        onClick={this.props.handleCommentClick}
+                    >
+                        Reply
+                    </a>
+                </li>
+            );
+        }
+
+        return (
+            <div>
+                <a
+                    href='#'
+                    className='dropdown-toggle theme'
+                    type='button'
+                    data-toggle='dropdown'
+                    aria-expanded='false'
+                />
+                <ul
+                    className='dropdown-menu'
+                    role='menu'
+                >
+                    {dropdownContents}
+                </ul>
+            </div>
+        );
+    }
+    render() {
+        var post = this.props.post;
         var comments = '';
         var lastCommentClass = ' comment-icon__container__hide';
         if (this.props.isLastComment) {
@@ -27,47 +117,30 @@ module.exports = React.createClass({
         }
 
         if (this.props.commentCount >= 1 && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) {
-            comments = <a href='#' className={'comment-icon__container theme' + lastCommentClass} onClick={this.props.handleCommentClick}><span className='comment-icon' dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}} />{this.props.commentCount}</a>;
+            comments = (
-        }
+                <a
-
+                    href='#'
-        var showDropdown = isOwner || (this.props.allowReply === 'true' && type !== 'Comment');
+                    className={'comment-icon__container theme' + lastCommentClass}
-        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
+                    onClick={this.props.handleCommentClick}
-            showDropdown = false;
+                >
-        }
+                    <span
-
+                        className='comment-icon'
-        var dropdownContents = [];
+                        dangerouslySetInnerHTML={{__html: Constants.COMMENT_ICON}}
-        var dropdown;
+                    />
-        if (showDropdown) {
+                    {this.props.commentCount}
-            var dataComments = 0;
+                </a>
-            if (type === 'Post') {
-                dataComments = this.props.commentCount;
-            }
-
-            if (isOwner) {
-                dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#edit_post' data-title={type} data-message={post.message} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Edit</a></li>);
-            }
-
-            if (isOwner || isAdmin) {
-                dropdownContents.push(<li role='presentation'><a href='#' role='menuitem' data-toggle='modal' data-target='#delete_post' data-title={type} data-postid={post.id} data-channelid={post.channel_id} data-comments={dataComments}>Delete</a></li>);
-            }
-
-            if (this.props.allowReply === 'true') {
-                dropdownContents.push(<li role='presentation'><a className='reply-link theme' href='#' onClick={this.props.handleCommentClick}>Reply</a></li>);
-            }
-
-            dropdown = (
-                <div>
-                    <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' />
-                    <ul className='dropdown-menu' role='menu'>
-                        {dropdownContents}
-                    </ul>
-                </div>
             );
         }
 
+        var dropdown = this.createDropdown();
+
         return (
             <ul className='post-header post-info'>
-                <li className='post-header-col'><time className='post-profile-time'>{utils.displayDateTime(post.create_at)}</time></li>
+                <li className='post-header-col'>
+                    <time className='post-profile-time'>
+                        {utils.displayDateTime(post.create_at)}
+                    </time>
+                </li>
                 <li className='post-header-col post-header__reply'>
                     <div className='dropdown'>
                         {dropdown}
@@ -77,4 +150,18 @@ module.exports = React.createClass({
             </ul>
         );
     }
-});
+}
+
+PostInfo.defaultProps = {
+    post: null,
+    commentCount: 0,
+    isLastComment: false,
+    allowReply: false
+};
+PostInfo.propTypes = {
+    post: React.PropTypes.object,
+    commentCount: React.PropTypes.number,
+    isLastComment: React.PropTypes.bool,
+    allowReply: React.PropTypes.string,
+    handleCommentClick: React.PropTypes.func
+};