reformatting and minor refactoring of post_*.jsx to match style guide

1 files changed, 54 insertions, 30 deletions

diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index 37e525717..f6ab0ed8a 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -12,44 +12,68 @@ module.exports = React.createClass({
     },
     render: function() {
         var post = this.props.post;
-        var isOwner = UserStore.getCurrentId() == post.user_id;
-        var isAdmin = UserStore.getCurrentUser().roles.indexOf("admin") > -1
+        var isOwner = UserStore.getCurrentId() === post.user_id;
+        var isAdmin = UserStore.getCurrentUser().roles.indexOf('admin') > -1;
 
-        var type = "Post";
+        var type = 'Post';
         if (post.root_id && post.root_id.length > 0) {
-            type = "Comment";
+            type = 'Comment';
         }
 
-        var comments = "";
-        var lastCommentClass = this.props.isLastComment ? " comment-icon__container__show" : " comment-icon__container__hide";
-        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 comments = '';
+        var lastCommentClass = ' comment-icon__container__hide';
+        if (this.props.isLastComment) {
+            lastCommentClass = ' comment-icon__container__show';
         }
 
-        var show_dropdown = isOwner || (this.props.allowReply === "true" && type != "Comment");
-        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) show_dropdown = false;
+        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 showDropdown = isOwner || (this.props.allowReply === 'true' && type !== 'Comment');
+        if (post.state === Constants.POST_FAILED || post.state === Constants.POST_LOADING) {
+            showDropdown = false;
+        }
+
+        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 (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>
+            );
+        }
 
         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 post-header__reply">
-                        <div className="dropdown">
-                        { show_dropdown ?
-                            <div>
-                                <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" />
-                                <ul className="dropdown-menu" role="menu">
-                                    { isOwner ? <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={type === "Post" ? this.props.commentCount : 0}>Edit</a></li>
-                                    : "" }
-                                    { isOwner || isAdmin ? <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={type === "Post" ? this.props.commentCount : 0}>Delete</a></li>
-                                    : "" }
-                                    { this.props.allowReply === "true" ? <li role="presentation"><a className="reply-link theme" href="#" onClick={this.props.handleCommentClick}>Reply</a></li>
-                                    : "" }
-                                </ul>
-                            </div>
-                            : "" }
-                        </div>
-                        { comments }
-                    </li>
+            <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 post-header__reply'>
+                    <div className='dropdown'>
+                        {dropdown}
+                    </div>
+                    {comments}
+                </li>
             </ul>
         );
     }