finalize implenetation of predictive client posts so that users get immediate feedback after posting

1 files changed, 117 insertions, 92 deletions

diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 69e514e11..8672df439 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -3,16 +3,17 @@
 
 var PostStore = require('../stores/post_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
-var UserProfile = require( './user_profile.jsx' );
+var UserProfile = require('./user_profile.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var AppDispatcher = require('../dispatcher/app_dispatcher.jsx');
 var utils = require('../utils/utils.jsx');
-var SearchBox =require('./search_bar.jsx');
-var CreateComment = require( './create_comment.jsx' );
+var SearchBox = require('./search_bar.jsx');
+var CreateComment = require('./create_comment.jsx');
 var Constants = require('../utils/constants.jsx');
 var FileAttachmentList = require('./file_attachment_list.jsx');
 var FileUploadOverlay = require('./file_upload_overlay.jsx');
 var client = require('../utils/client.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 RhsHeaderPost = React.createClass({
@@ -45,12 +46,15 @@ RhsHeaderPost = React.createClass({
         });
     },
     render: function() {
-        var back = this.props.fromSearch ? <a href="#" onClick={this.handleBack} className="sidebar--right__back"><i className="fa fa-chevron-left"></i></a> : "";
+        var back;
+        if (this.props.fromSearch) {
+            back = <a href='#' onClick={this.handleBack} className='sidebar--right__back'><i className='fa fa-chevron-left'></i></a>;
+        }
 
         return (
-            <div className="sidebar--right__header">
-                <span className="sidebar--right__title">{back}Message Details</span>
-                <button type="button" className="sidebar--right__close" aria-label="Close" onClick={this.handleClose}></button>
+            <div className='sidebar--right__header'>
+                <span className='sidebar--right__title'>{back}Message Details</span>
+                <button type='button' className='sidebar--right__close' aria-label='Close' onClick={this.handleClose}></button>
             </div>
         );
     }
@@ -60,57 +64,72 @@ RootPost = React.createClass({
     render: function() {
         var post = this.props.post;
         var message = utils.textToJsx(post.message);
-        var isOwner = UserStore.getCurrentId() == post.user_id;
+        var isOwner = UserStore.getCurrentId() === post.user_id;
         var timestamp = UserStore.getProfile(post.user_id).update_at;
         var channel = ChannelStore.get(post.channel_id);
 
-        var type = "Post";
+        var type = 'Post';
         if (post.root_id.length > 0) {
-            type = "Comment";
+            type = 'Comment';
         }
 
-        var currentUserCss = "";
+        var currentUserCss = '';
         if (UserStore.getCurrentId() === post.user_id) {
-            currentUserCss = "current--user";
+            currentUserCss = 'current--user';
         }
 
+        var channelName;
         if (channel) {
-            channelName = (channel.type === 'D') ? "Private Message" : channel.display_name;
+            if (channel.type === 'D') {
+                channelName = 'Private Message';
+            } else {
+                channelName = channel.display_name;
+            }
+        }
+
+        var ownerOptions;
+        if (isOwner) {
+            ownerOptions = (
+                <div>
+                    <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' />
+                    <ul className='dropdown-menu' role='menu'>
+                        <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}>Edit</a></li>
+                        <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={this.props.commentCount}>Delete</a></li>
+                    </ul>
+                </div>
+            );
+        }
+
+        var fileAttachment;
+        if (post.filenames && post.filenames.length > 0) {
+            fileAttachment = (
+                <FileAttachmentList
+                    filenames={post.filenames}
+                    modalId={'rhs_view_image_modal_' + post.id}
+                    channelId={post.channel_id}
+                    userId={post.user_id} />
+            );
         }
 
         return (
-            <div className={"post post--root " + currentUserCss}>
-                <div className="post-right-channel__name">{ channelName }</div>
-                <div className="post-profile-img__container">
-                    <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" />
+            <div className={'post post--root ' + currentUserCss}>
+                <div className='post-right-channel__name'>{ channelName }</div>
+                <div className='post-profile-img__container'>
+                    <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' />
                 </div>
-                <div className="post__content">
-                    <ul className="post-header">
-                        <li className="post-header-col"><strong><UserProfile userId={post.user_id} /></strong></li>
-                        <li className="post-header-col"><time className="post-right-root-time">{ utils.displayDate(post.create_at)+' '+utils.displayTime(post.create_at)  }</time></li>
-                        <li className="post-header-col post-header__reply">
-                            <div className="dropdown">
-                            { isOwner ?
-                                <div>
-                                <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" />
-                                <ul className="dropdown-menu" role="menu">
-                                    <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}>Edit</a></li>
-                                    <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={this.props.commentCount}>Delete</a></li>
-                                </ul>
-                                </div>
-                            : "" }
+                <div className='post__content'>
+                    <ul className='post-header'>
+                        <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li>
+                        <li className='post-header-col'><time className='post-right-root-time'>{utils.displayDate(post.create_at) + ' ' + utils.displayTime(post.create_at)}</time></li>
+                        <li className='post-header-col post-header__reply'>
+                            <div className='dropdown'>
+                                {ownerOptions}
                             </div>
                         </li>
                     </ul>
                     <div className="post-body">
                         <p>{message}</p>
-                        { post.filenames && post.filenames.length > 0 ?
-                            <FileAttachmentList
-                                filenames={post.filenames}
-                                modalId={"rhs_view_image_modal_" + post.id}
-                                channelId={post.channel_id}
-                                userId={post.user_id} />
-                        : "" }
+                        {fileAttachment}
                     </div>
                 </div>
                 <hr />
@@ -134,78 +153,84 @@ CommentPost = React.createClass({
                 ChannelStore.setChannelMember(member);
             }.bind(this),
             function(err) {
-                post.did_fail = true;
+                post.state = Constants.POST_FAILED;
                 PostStore.updatePendingPost(post);
                 this.forceUpdate();
             }.bind(this)
         );
 
-        post.did_fail = false;
-        post.is_loading = true;
+        post.state = Constants.POST_LOADING;
         PostStore.updatePendingPost(post);
         this.forceUpdate();
     },
     render: function() {
         var post = this.props.post;
 
-        var commentClass = "post";
-        var post = this.props.post;
-
-        var currentUserCss = "";
+        var currentUserCss = '';
         if (UserStore.getCurrentId() === post.user_id) {
-            currentUserCss = "current--user";
+            currentUserCss = 'current--user';
         }
 
-        var isOwner = UserStore.getCurrentId() == post.user_id;
+        var isOwner = UserStore.getCurrentId() === post.user_id;
 
-        var type = "Post"
+        var type = 'Post';
         if (post.root_id.length > 0) {
-            type = "Comment"
+            type = 'Comment';
         }
 
         var message = utils.textToJsx(post.message);
         var timestamp = UserStore.getCurrentUser().update_at;
 
         var loading;
-        var postClass = "";
-        if (post.did_fail) {
-            postClass += " post-fail";
-            loading = <a className="post-retry pull-right" href="#" onClick={this.retryComment}>Retry</a>;
-        } else if (post.is_loading) {
-            postClass += " post-waiting";
-            loading = <img className="post-loading-gif pull-right" src="/static/images/load.gif"/>;
+        var postClass = '';
+        if (post.state === Constants.POST_FAILED) {
+            postClass += ' post-fail';
+            loading = <a className='post-retry pull-right' href='#' onClick={this.retryComment}>Retry</a>;
+        } else if (post.state === Constants.POST_LOADING) {
+            postClass += ' post-waiting';
+            loading = <img className='post-loading-gif pull-right' src='/static/images/load.gif'/>;
+        }
+
+        var ownerOptions;
+        if (isOwner && post.state !== Constants.POST_FAILED && post.state !== Constants.POST_LOADING) {
+            ownerOptions = (
+                <div className='dropdown' onClick={function(e){$('.post-list-holder-by-time').scrollTop($('.post-list-holder-by-time').scrollTop() + 50);}}>
+                    <a href='#' className='dropdown-toggle theme' type='button' data-toggle='dropdown' aria-expanded='false' />
+                    <ul className='dropdown-menu' role='menu'>
+                        <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}>Edit</a></li>
+                        <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={0}>Delete</a></li>
+                    </ul>
+                </div>
+            );
+        }
+
+        var fileAttachment;
+        if (post.filenames && post.filenames.length > 0) {
+            fileAttachment = (
+                <FileAttachmentList
+                    filenames={post.filenames}
+                    modalId={'rhs_comment_view_image_modal_' + post.id}
+                    channelId={post.channel_id}
+                    userId={post.user_id} />
+            );
         }
 
         return (
-            <div className={commentClass + " " + currentUserCss}>
-                <div className="post-profile-img__container">
-                    <img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" />
+            <div className={'post ' + currentUserCss}>
+                <div className='post-profile-img__container'>
+                    <img className='post-profile-img' src={'/api/v1/users/' + post.user_id + '/image?time=' + timestamp} height='36' width='36' />
                 </div>
-                <div className="post__content">
-                    <ul className="post-header">
-                        <li className="post-header-col"><strong><UserProfile userId={post.user_id} /></strong></li>
-                        <li className="post-header-col"><time className="post-right-comment-time">{ utils.displayDateTime(post.create_at) }</time></li>
-                        <li className="post-header-col post-header__reply">
-                        { isOwner && !post.did_fail && !post.is_loading ?
-                        <div className="dropdown" onClick={function(e){$('.post-list-holder-by-time').scrollTop($(".post-list-holder-by-time").scrollTop() + 50);}}>
-                            <a href="#" className="dropdown-toggle theme" type="button" data-toggle="dropdown" aria-expanded="false" />
-                            <ul className="dropdown-menu" role="menu">
-                                <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}>Edit</a></li>
-                                <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={0}>Delete</a></li>
-                            </ul>
-                        </div>
-                        : "" }
+                <div className='post__content'>
+                    <ul className='post-header'>
+                        <li className='post-header-col'><strong><UserProfile userId={post.user_id} /></strong></li>
+                        <li className='post-header-col'><time className='post-right-comment-time'>{utils.displayDateTime(post.create_at)}</time></li>
+                        <li className='post-header-col post-header__reply'>
+                            {ownerOptions}
                         </li>
                     </ul>
                     <div className="post-body">
                         <p className={postClass}>{loading}{message}</p>
-                        { post.filenames && post.filenames.length > 0 ?
-                            <FileAttachmentList
-                                filenames={post.filenames}
-                                modalId={"rhs_comment_view_image_modal_" + post.id}
-                                channelId={post.channel_id}
-                                userId={post.user_id} />
-                        : "" }
+                        {fileAttachment}
                     </div>
                 </div>
             </div>
@@ -239,8 +264,8 @@ module.exports = React.createClass({
         });
     },
     componentDidUpdate: function() {
-        $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
-        $(".post-right__scroll").perfectScrollbar('update');
+        $('.post-right__scroll').scrollTop($('.post-right__scroll')[0].scrollHeight);
+        $('.post-right__scroll').perfectScrollbar('update');
         this.resize();
     },
     componentWillUnmount: function() {
@@ -296,10 +321,10 @@ module.exports = React.createClass({
     },
     resize: function() {
         var height = $(window).height() - $('#error_bar').outerHeight() - 100;
-        $(".post-right__scroll").css("height", height + "px");
-        $(".post-right__scroll").scrollTop(100000);
-        $(".post-right__scroll").perfectScrollbar();
-        $(".post-right__scroll").perfectScrollbar('update');
+        $('.post-right__scroll').css('height', height + 'px');
+        $('.post-right__scroll').scrollTop(100000);
+        $('.post-right__scroll').perfectScrollbar();
+        $('.post-right__scroll').perfectScrollbar('update');
     },
     render: function() {
 
@@ -314,7 +339,7 @@ module.exports = React.createClass({
         var selected_post = post_list.posts[post_list.order[0]];
         var root_post = null;
 
-        if (selected_post.root_id == "") {
+        if (selected_post.root_id == '') {
             root_post = selected_post;
         }
         else {
@@ -343,11 +368,11 @@ module.exports = React.createClass({
         var searchForm = currentId == null ? null : <SearchBox />;
 
         return (
-            <div className="post-right__container">
+            <div className='post-right__container'>
                 <FileUploadOverlay
                     overlayType='right' />
-                <div className="search-bar__container sidebar--right__search-header">{searchForm}</div>
-                <div className="sidebar-right__body">
+                <div className='search-bar__container sidebar--right__search-header'>{searchForm}</div>
+                <div className='sidebar-right__body'>
                     <RhsHeaderPost fromSearch={this.props.fromSearch} isMentionSearch={this.props.isMentionSearch} />
                     <div className="post-right__scroll">
                         <RootPost post={root_post} commentCount={posts_array.length}/>
@@ -356,7 +381,7 @@ module.exports = React.createClass({
                                 return <CommentPost ref={cpost.id} key={cpost.id} post={cpost} selected={ (cpost.id == selected_post.id) } />
                         })}
                         </div>
-                        <div className="post-create__container">
+                        <div className='post-create__container'>
                             <CreateComment channelId={root_post.channel_id} rootId={root_post.id} />
                         </div>
                     </div>