adds predictive posting on the client

4 files changed, 98 insertions, 20 deletions

diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 377e7bd34..76f2bf262 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -65,10 +65,17 @@ module.exports = React.createClass({
             post.channel_id = this.state.channelId;
             post.filenames = this.state.previews;
 
-            client.createPost(post, ChannelStore.getCurrent(),
+            var time = utils.getTimestamp();
+            post.pending_post_id = user_id + ":"+ time;
+            post.user_id = user_id;
+            post.create_at = time;
+            post.root_id = this.state.rootId;
+            post.parent_id = this.state.parentId;
+
+            var channel = ChannelStore.getCurrent();
+
+            client.createPost(post, channel,
                 function(data) {
-                    PostStore.storeDraft(data.channel_id, null);
-                    this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
                     this.resizePostHolder();
                     AsyncClient.getPosts(true);
 
@@ -79,13 +86,25 @@ module.exports = React.createClass({
                     ChannelStore.setChannelMember(member);
                 }.bind(this),
                 function(err) {
-                    var state = {};
-                    state.serverError = err.message;
+                    var state = {}
+
+                    if (err.message === "Invalid RootId parameter") {
+                        if ($('#post_deleted').length > 0) $('#post_deleted').modal('show');
+                        PostStore.removePendingPost(post.pending_post_id);
+                    } else {
+                        post.did_fail = true;
+                        PostStore.updatePendingPost(post);
+                    }
 
                     state.submitting = false;
                     this.setState(state);
                 }.bind(this)
             );
+
+            post.is_loading = true;
+            PostStore.storePendingPost(post);
+            PostStore.storeDraft(channel.id, user_id, null);
+            this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null});
         }
 
         $('.post-list-holder-by-time').perfectScrollbar('update');
diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx
index f099c67ab..c985eaeb2 100644
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -7,6 +7,10 @@ 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');
+var PostStore = require('../stores/post_store.jsx');
+var ChannelStore = require('../stores/channel_store.jsx');
+var client = require('../utils/client.jsx');
+var AsyncClient = require('../utils/async_client.jsx');
 var ActionTypes = Constants.ActionTypes;
 
 module.exports = React.createClass({
@@ -32,6 +36,31 @@ module.exports = React.createClass({
         this.refs.info.forceUpdate();
         this.refs.header.forceUpdate();
     },
+    retryPost: function(e) {
+        e.preventDefault();
+
+        var post = this.props.post;
+        client.createPost(post, post.channel_id,
+            function(data) {
+                AsyncClient.getPosts(true);
+
+                var member = ChannelStore.getMember(post.channel_id);
+                member.msg_count = channel.total_msg_count;
+                member.last_viewed_at = (new Date).getTime();
+                ChannelStore.setChannelMember(member);
+            }.bind(this),
+            function(err) {
+                post.did_fail = true;
+                PostStore.updatePendingPost(post);
+                this.forceUpdate();
+            }.bind(this)
+        );
+
+        post.did_fail = false;
+        post.is_loading = true;
+        PostStore.updatePendingPost(post);
+        this.forceUpdate();
+    },
     getInitialState: function() {
         return { };
     },
@@ -79,7 +108,7 @@ module.exports = React.createClass({
                     : null }
                     <div className="post__content">
                         <PostHeader ref="header" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} isLastComment={this.props.isLastComment} />
-                        <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} />
+                        <PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} retryPost={this.retryPost} />
                         <PostInfo ref="info" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} allowReply="true" />
                     </div>
                 </div>
diff --git a/web/react/components/post_body.jsx b/web/react/components/post_body.jsx
index 860c96d84..65e045344 100644
--- a/web/react/components/post_body.jsx
+++ b/web/react/components/post_body.jsx
@@ -59,23 +59,35 @@ module.exports = React.createClass({
             postClass += " post-comment";
         }
 
+        var loading;
+        if (post.did_fail) {
+            postClass += " post-fail";
+            loading = <a className="post-retry pull-right" href="#" onClick={this.props.retryPost}>Retry</a>;
+        } else if (post.is_loading) {
+            postClass += " post-waiting";
+            loading = <img className="post-loading-gif pull-right" src="/static/images/load.gif"/>;
+        }
+
         var embed;
         if (filenames.length === 0 && this.state.links) {
             embed = utils.getEmbed(this.state.links[0]);
         }
 
+        var fileAttachmentHolder = '';
+        if (filenames && filenames.length > 0) {
+            fileAttachmentHolder = (<FileAttachmentList
+                                        filenames={filenames}
+                                        modalId={'view_image_modal_' + post.id}
+                                        channelId={post.channel_id}
+                                        userId={post.user_id} />);
+        }
+
         return (
             <div className="post-body">
-                { comment }
-                <p key={post.id+"_message"} className={postClass}><span>{inner}</span></p>
-                { filenames && filenames.length > 0 ?
-                    <FileAttachmentList
-                        filenames={filenames}
-                        modalId={"view_image_modal_" + post.id}
-                        channelId={post.channel_id}
-                        userId={post.user_id} />
-                : "" }
-                { embed }
+                {comment}
+                <p key={post.id+"_message"} className={postClass}>{loading}<span>{inner}</span></p>
+                {fileAttachmentHolder}
+                {embed}
             </div>
         );
     }
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index 8c76eb82c..834d7b0ff 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -20,8 +20,16 @@ function getStateFromStores() {
 
     if (channel == null) channel = {};
 
+    var post_list = PostStore.getCurrentPosts();
+    var pending_post_list = PostStore.getPendingPosts(channel.id);
+
+    if (pending_post_list) {
+        post_list.order = pending_post_list.order.concat(post_list.order);
+        for (var pid in pending_post_list.posts) { post_list.posts[pid] = pending_post_list.posts[pid] };
+    }
+
     return {
-        post_list: PostStore.getCurrentPosts(),
+        post_list: post_list,
         channel: channel
     };
 }
@@ -186,8 +194,16 @@ module.exports = React.createClass({
         if (msg.action == "posted") {
             var post = JSON.parse(msg.props.post);
 
-            var post_list = PostStore.getPosts(msg.channel_id);
-            if (!post_list) return;
+            if (post.pending_post_id !== "") {
+                PostStore.removePendingPost(post.channel_id, post.pending_post_id);
+            }
+
+            post.pending_post_id = "";
+
+            postList.posts[post.id] = post;
+            if (postList.order.indexOf(post.id) === -1) {
+                postList.order.unshift(post.id);
+            }
 
             post_list.posts[post.id] = post;
             if (post_list.order.indexOf(post.id) === -1) {
@@ -456,7 +472,9 @@ module.exports = React.createClass({
                     );
                 }
 
-                if (post.create_at > last_viewed && !rendered_last_viewed) {
+                var userId = UserStore.getCurrentId();
+
+                if (post.user_id !== userId && post.create_at > last_viewed && !rendered_last_viewed) {
                     rendered_last_viewed = true;
                     postCtls.push(
                         <div key="unviewed" className="new-separator">