From 5596a6b37c440522176fdc05217161d7de7e169c Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Thu, 23 Jul 2015 12:45:08 -0400 Subject: added client predictive commenting --- web/react/components/create_comment.jsx | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) (limited to 'web/react/components/create_comment.jsx') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 885efab7a..fbb05c77f 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -2,15 +2,16 @@ // See License.txt for license information. var client = require('../utils/client.jsx'); -var AsyncClient =require('../utils/async_client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); var Textbox = require('./textbox.jsx'); var MsgTyping = require('./msg_typing.jsx'); var FileUpload = require('./file_upload.jsx'); var FilePreview = require('./file_preview.jsx'); - +var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); module.exports = React.createClass({ @@ -39,10 +40,16 @@ module.exports = React.createClass({ return; } + var user_id = UserStore.getCurrentId(); + post.channel_id = this.props.channelId; post.root_id = this.props.rootId; - post.parent_id = this.props.parentId; + post.parent_id = this.props.rootId; post.filenames = this.state.previews; + var time = utils.getTimestamp(); + post.pending_post_id = user_id + ":"+ time; + post.user_id = user_id; + post.create_at = time; this.setState({submitting: true, serverError: null}); @@ -69,10 +76,19 @@ module.exports = React.createClass({ $('#post_deleted').modal('show'); } } else { - this.setState(state); + post.did_fail = true; + PostStore.updatePendingPost(post); } + + state.submitting = false; + this.setState(state); }.bind(this) ); + + post.is_loading = true; + PostStore.storePendingPost(post); + PostStore.storeCommentDraft(this.props.rootId, null); + this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); }, commentMsgKeyPress: function(e) { if (e.which === 13 && !e.shiftKey && !e.altKey) { -- cgit v1.2.3-1-g7c22 From fa1491bbfbb1261757943759edf44883d31e5477 Mon Sep 17 00:00:00 2001 From: JoramWilander Date: Wed, 12 Aug 2015 12:45:15 -0400 Subject: finalize implenetation of predictive client posts so that users get immediate feedback after posting --- web/react/components/create_comment.jsx | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) (limited to 'web/react/components/create_comment.jsx') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index fbb05c77f..1de768872 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -1,6 +1,7 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var SocketStore = require('../stores/socket_store.jsx'); @@ -13,6 +14,7 @@ var FileUpload = require('./file_upload.jsx'); var FilePreview = require('./file_preview.jsx'); var utils = require('../utils/utils.jsx'); var Constants = require('../utils/constants.jsx'); +var ActionTypes = Constants.ActionTypes; module.exports = React.createClass({ lastTime: 0, @@ -27,6 +29,8 @@ module.exports = React.createClass({ return; } + this.setState({submitting: true, serverError: null}); + var post = {}; post.filenames = []; post.message = this.state.messageText; @@ -47,17 +51,16 @@ module.exports = React.createClass({ post.parent_id = this.props.rootId; post.filenames = this.state.previews; var time = utils.getTimestamp(); - post.pending_post_id = user_id + ":"+ time; + post.pending_post_id = user_id + ':'+ time; post.user_id = user_id; post.create_at = time; - this.setState({submitting: true, serverError: null}); + PostStore.storePendingPost(post); + PostStore.storeCommentDraft(this.props.rootId, null); + this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); client.createPost(post, ChannelStore.getCurrent(), function(data) { - PostStore.storeCommentDraft(this.props.rootId, null); - this.setState({messageText: '', submitting: false, postError: null, serverError: null}); - this.clearPreviews(); AsyncClient.getPosts(true, this.props.channelId); var channel = ChannelStore.get(this.props.channelId); @@ -65,18 +68,22 @@ module.exports = React.createClass({ member.msg_count = channel.total_msg_count; member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_POST, + post: data + }); }.bind(this), function(err) { var state = {}; - state.serverError = err.message; - state.submitting = false; 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; + post.state = Constants.POST_FAILED; PostStore.updatePendingPost(post); } @@ -84,11 +91,6 @@ module.exports = React.createClass({ this.setState(state); }.bind(this) ); - - post.is_loading = true; - PostStore.storePendingPost(post); - PostStore.storeCommentDraft(this.props.rootId, null); - this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); }, commentMsgKeyPress: function(e) { if (e.which === 13 && !e.shiftKey && !e.altKey) { @@ -153,9 +155,6 @@ module.exports = React.createClass({ this.setState({serverError: err}); } }, - clearPreviews: function() { - this.setState({previews: []}); - }, removePreview: function(id) { var previews = this.state.previews; var uploadsInProgress = this.state.uploadsInProgress; -- cgit v1.2.3-1-g7c22