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

1 files changed, 127 insertions, 40 deletions

diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index f6ab0ed8a..c5b015cb9 100644
--- a/web/react/components/post_info.jsx
+++ b/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({
-    getInitialState: function() {
-        return { };
-    },
-    render: function() {
+export default class PostInfo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+    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,54 +27,120 @@ module.exports = React.createClass({
             type = 'Comment';
         }
 
-        var comments = '';
-        var lastCommentClass = ' comment-icon__container__hide';
-        if (this.props.isLastComment) {
-            lastCommentClass = ' comment-icon__container__show';
+        if (!this.shouldShowComment(post.state, type, isOwner)) {
+            return '';
         }
 
-        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>;
+        var dropdownContents = [];
+        var dataComments = 0;
+        if (type === 'Post') {
+            dataComments = this.props.commentCount;
         }
 
-        var showDropdown = isOwner || (this.props.allowReply === 'true' && type !== 'Comment');
-        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
-            showDropdown = false;
+        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>
+            );
         }
 
-        var dropdownContents = [];
-        var dropdown;
-        if (showDropdown) {
-            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 (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>
+            );
+        }
 
-            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) {
+            lastCommentClass = ' comment-icon__container__show';
+        }
 
-            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>
+        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>
             );
         }
 
+        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
+};