diff options
author | JoramWilander <jwawilander@gmail.com> | 2015-07-23 12:45:08 -0400 |
---|---|---|
committer | JoramWilander <jwawilander@gmail.com> | 2015-08-18 08:58:31 -0400 |
commit | 5596a6b37c440522176fdc05217161d7de7e169c (patch) | |
tree | 934ea924e0096d7d49621163c07da46ed67b68ac /web/react/components/post_right.jsx | |
parent | 32f7b50bb5c62d27def3f2e6d2839511c0b8f9a9 (diff) | |
download | chat-5596a6b37c440522176fdc05217161d7de7e169c.tar.gz chat-5596a6b37c440522176fdc05217161d7de7e169c.tar.bz2 chat-5596a6b37c440522176fdc05217161d7de7e169c.zip |
added client predictive commenting
Diffstat (limited to 'web/react/components/post_right.jsx')
-rw-r--r-- | web/react/components/post_right.jsx | 53 |
1 files changed, 50 insertions, 3 deletions
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index e46979ff7..69e514e11 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -12,6 +12,7 @@ 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 ActionTypes = Constants.ActionTypes; RhsHeaderPost = React.createClass({ @@ -119,10 +120,36 @@ RootPost = React.createClass({ }); CommentPost = React.createClass({ + retryComment: 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(); + }, render: function() { var post = this.props.post; var commentClass = "post"; + var post = this.props.post; var currentUserCss = ""; if (UserStore.getCurrentId() === post.user_id) { @@ -139,6 +166,16 @@ CommentPost = React.createClass({ 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"/>; + } + return ( <div className={commentClass + " " + currentUserCss}> <div className="post-profile-img__container"> @@ -149,7 +186,7 @@ CommentPost = React.createClass({ <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 ? + { 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"> @@ -161,7 +198,7 @@ CommentPost = React.createClass({ </li> </ul> <div className="post-body"> - <p>{message}</p> + <p className={postClass}>{loading}{message}</p> { post.filenames && post.filenames.length > 0 ? <FileAttachmentList filenames={post.filenames} @@ -177,7 +214,17 @@ CommentPost = React.createClass({ }); function getStateFromStores() { - return { post_list: PostStore.getSelectedPost() }; + var post_list = PostStore.getSelectedPost(); + if (!post_list || post_list.order.length < 1) return { post_list: {} }; + + var channel_id = post_list.posts[post_list.order[0]].channel_id; + var pending_post_list = PostStore.getPendingPosts(channel_id); + + if (pending_post_list) { + for (var pid in pending_post_list.posts) { post_list.posts[pid] = pending_post_list.posts[pid] }; + } + + return { post_list: post_list }; } module.exports = React.createClass({ |