diff options
Diffstat (limited to 'web/react/components/create_post.jsx')
| -rw-r--r-- | web/react/components/create_post.jsx | 246 |
1 files changed, 121 insertions, 125 deletions
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 76286eb88..9ca1d5388 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -22,13 +22,12 @@ module.exports = React.createClass({ handleSubmit: function(e) { e.preventDefault(); - if (this.state.uploadsInProgress > 0) return; - - if (this.state.submitting) return; + if (this.state.uploadsInProgress.length > 0 || this.state.submitting) { + return; + } var post = {}; post.filenames = []; - post.message = this.state.messageText; if (post.message.trim().length === 0 && this.state.previews.length === 0) { @@ -36,55 +35,52 @@ module.exports = React.createClass({ } if (post.message.length > Constants.CHARACTER_LIMIT) { - this.setState({ post_error: 'Post length must be less than '+Constants.CHARACTER_LIMIT+' characters.' }); + this.setState({postError: 'Post length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'}); return; } - this.setState({ submitting: true, limit_error: null }); - - var user_id = UserStore.getCurrentId(); + this.setState({submitting: true, serverError: null}); - if (post.message.indexOf("/") == 0) { + if (post.message.indexOf('/') === 0) { client.executeCommand( - this.state.channel_id, + this.state.channelId, post.message, false, function(data) { PostStore.storeDraft(data.channel_id, null); - this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); + this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); if (data.goto_location.length > 0) { window.location.href = data.goto_location; } }.bind(this), - function(err){ - var state = {} - state.server_error = err.message; + function(err) { + var state = {}; + state.serverError = err.message; state.submitting = false; this.setState(state); }.bind(this) ); } else { - post.channel_id = this.state.channel_id; + post.channel_id = this.state.channelId; post.filenames = this.state.previews; client.createPost(post, ChannelStore.getCurrent(), function(data) { PostStore.storeDraft(data.channel_id, null); - this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); + this.setState({messageText: '', submitting: false, postError: null, previews: [], serverError: null}); this.resizePostHolder(); AsyncClient.getPosts(true); - var channel = ChannelStore.get(this.state.channel_id); - var member = ChannelStore.getMember(this.state.channel_id); + var channel = ChannelStore.get(this.state.channelId); + var member = ChannelStore.getMember(this.state.channelId); member.msg_count = channel.total_msg_count; - member.last_viewed_at = (new Date).getTime(); + member.last_viewed_at = Date.now(); ChannelStore.setChannelMember(member); - }.bind(this), function(err) { - var state = {} - state.server_error = err.message; + var state = {}; + state.serverError = err.message; state.submitting = false; this.setState(state); @@ -92,21 +88,21 @@ module.exports = React.createClass({ ); } - $(".post-list-holder-by-time").perfectScrollbar('update'); + $('.post-list-holder-by-time').perfectScrollbar('update'); }, componentDidUpdate: function() { this.resizePostHolder(); }, postMsgKeyPress: function(e) { - if (e.which == 13 && !e.shiftKey && !e.altKey) { + if (e.which === 13 && !e.shiftKey && !e.altKey) { e.preventDefault(); this.refs.textbox.getDOMNode().blur(); this.handleSubmit(e); } - var t = new Date().getTime(); + var t = Date.now(); if ((t - this.lastTime) > 5000) { - SocketStore.sendMessage({channel_id: this.state.channel_id, action: "typing", props: {"parent_id": ""}, state: {} }); + SocketStore.sendMessage({channelId: this.state.channelId, action: 'typing', props: {'parent_id': ''}, state: {}}); this.lastTime = t; } }, @@ -115,64 +111,74 @@ module.exports = React.createClass({ this.setState({messageText: messageText}); var draft = PostStore.getCurrentDraft(); - if (!draft) { - draft = {} - draft['previews'] = []; - draft['uploadsInProgress'] = 0; - } draft['message'] = messageText; PostStore.storeCurrentDraft(draft); }, resizePostHolder: function() { var height = $(window).height() - $(this.refs.topDiv.getDOMNode()).height() - $('#error_bar').outerHeight() - 50; - $(".post-list-holder-by-time").css("height", height + "px"); + $('.post-list-holder-by-time').css('height', height + 'px'); $(window).trigger('resize'); }, - handleFileUpload: function(newPreviews, channel_id) { - var draft = PostStore.getDraft(channel_id); - if (!draft) { - draft = {} - draft['message'] = ''; - draft['uploadsInProgress'] = 0; - draft['previews'] = []; - } + handleUploadStart: function(clientIds, channelId) { + var draft = PostStore.getDraft(channelId); + + draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); + PostStore.storeDraft(channelId, draft); - if (channel_id === this.state.channel_id) { - var num = this.state.uploadsInProgress; - var oldPreviews = this.state.previews; - var previews = oldPreviews.concat(newPreviews); + this.setState({uploadsInProgress: draft['uploadsInProgress']}); + }, + handleFileUploadComplete: function(filenames, clientIds, channelId) { + var draft = PostStore.getDraft(channelId); - draft['previews'] = previews; - draft['uploadsInProgress'] = num-1; - PostStore.storeCurrentDraft(draft); + // remove each finished file from uploads + for (var i = 0; i < clientIds.length; i++) { + var index = draft['uploadsInProgress'].indexOf(clientIds[i]); - this.setState({previews: previews, uploadsInProgress:num-1}); - } else { - draft['previews'] = draft['previews'].concat(newPreviews); - draft['uploadsInProgress'] = draft['uploadsInProgress'] > 0 ? draft['uploadsInProgress'] - 1 : 0; - PostStore.storeDraft(channel_id, draft); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } } + + draft['previews'] = draft['previews'].concat(filenames); + PostStore.storeDraft(channelId, draft); + + this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, - handleUploadError: function(err) { - this.setState({ server_error: err }); + handleUploadError: function(err, clientId) { + var draft = PostStore.getDraft(this.state.channelId); + + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index !== -1) { + draft['uploadsInProgress'].splice(index, 1); + } + + PostStore.storeDraft(this.state.channelId, draft); + + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); }, - removePreview: function(filename) { + removePreview: function(id) { var previews = this.state.previews; - for (var i = 0; i < previews.length; i++) { - if (previews[i] === filename) { - previews.splice(i, 1); - break; + var uploadsInProgress = this.state.uploadsInProgress; + + // id can either be the path of an uploaded file or the client id of an in progress upload + var index = previews.indexOf(id); + if (index !== -1) { + previews.splice(index, 1); + } else { + index = uploadsInProgress.indexOf(id); + + if (index !== -1) { + uploadsInProgress.splice(index, 1); + this.refs.fileUpload.cancelUpload(id); } } + var draft = PostStore.getCurrentDraft(); - if (!draft) { - draft = {} - draft['message'] = ''; - draft['uploadsInProgress'] = 0; - } draft['previews'] = previews; + draft['uploadsInProgress'] = uploadsInProgress; PostStore.storeCurrentDraft(draft); - this.setState({previews: previews}); + + this.setState({previews: previews, uploadsInProgress: uploadsInProgress}); }, componentDidMount: function() { ChannelStore.addChangeListener(this._onChange); @@ -182,66 +188,50 @@ module.exports = React.createClass({ ChannelStore.removeChangeListener(this._onChange); }, _onChange: function() { - var channel_id = ChannelStore.getCurrentId(); - if (this.state.channel_id != channel_id) { + var channelId = ChannelStore.getCurrentId(); + if (this.state.channelId !== channelId) { var draft = PostStore.getCurrentDraft(); - var previews = []; - var messageText = ''; - var uploadsInProgress = 0; - if (draft) { - previews = draft['previews']; - messageText = draft['message']; - uploadsInProgress = draft['uploadsInProgress']; - } - this.setState({ channel_id: channel_id, messageText: messageText, initialText: messageText, submitting: false, limit_error: null, server_error: null, post_error: null, previews: previews, uploadsInProgress: uploadsInProgress }); + this.setState({ + channelId: channelId, messageText: draft['message'], initialText: draft['message'], submitting: false, + serverError: null, postError: null, previews: draft['previews'], uploadsInProgress: draft['uploadsInProgress'] + }); } }, getInitialState: function() { PostStore.clearDraftUploads(); var draft = PostStore.getCurrentDraft(); - var previews = []; - var messageText = ''; - if (draft) { - previews = draft['previews']; - messageText = draft['message']; - } - return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText }; + return { + channelId: ChannelStore.getCurrentId(), messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], + previews: draft['previews'], submitting: false, initialText: draft['message'] + }; }, - setUploads: function(val) { - var oldInProgress = this.state.uploadsInProgress - var newInProgress = oldInProgress + val; - - if (newInProgress + this.state.previews.length > Constants.MAX_UPLOAD_FILES) { - newInProgress = Constants.MAX_UPLOAD_FILES - this.state.previews.length; - this.setState({limit_error: "Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."}); + getFileCount: function(channelId) { + if (channelId === this.state.channelId) { + return this.state.previews.length + this.state.uploadsInProgress.length; } else { - this.setState({limit_error: null}); - } - - var numToUpload = newInProgress - oldInProgress; - if (numToUpload <= 0) return 0; + var draft = PostStore.getDraft(channelId); - var draft = PostStore.getCurrentDraft(); - if (!draft) { - draft = {} - draft['message'] = ''; - draft['previews'] = []; + return draft['previews'].length + draft['uploadsInProgress'].length; } - draft['uploadsInProgress'] = newInProgress; - PostStore.storeCurrentDraft(draft); - this.setState({uploadsInProgress: newInProgress}); - - return numToUpload; }, render: function() { + var serverError = null; + if (this.state.serverError) { + serverError = ( + <div className='has-error'> + <label className='control-label'>{this.state.serverError}</label> + </div> + ); + } - var server_error = this.state.server_error ? <div className='has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; - var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null; - var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null; + var postError = null; + if (this.state.postError) { + postError = <label className='control-label'>{this.state.postError}</label>; + } - var preview = <div/>; - if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) { + var preview = null; + if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = ( <FilePreview files={this.state.previews} @@ -250,29 +240,35 @@ module.exports = React.createClass({ ); } + var postFooterClassName = 'post-create-footer'; + if (postError) { + postFooterClassName += ' has-error'; + } + return ( - <form id="create_post" ref="topDiv" role="form" onSubmit={this.handleSubmit}> - <div className="post-create"> - <div className="post-create-body"> + <form id='create_post' ref='topDiv' role='form' onSubmit={this.handleSubmit}> + <div className='post-create'> + <div className='post-create-body'> <Textbox onUserInput={this.handleUserInput} onKeyPress={this.postMsgKeyPress} messageText={this.state.messageText} - createMessage="Write a message..." - channelId={this.state.channel_id} - id="post_textbox" - ref="textbox" /> + createMessage='Write a message...' + channelId={this.state.channelId} + id='post_textbox' + ref='textbox' /> <FileUpload - setUploads={this.setUploads} - onFileUpload={this.handleFileUpload} + ref='fileUpload' + getFileCount={this.getFileCount} + onUploadStart={this.handleUploadStart} + onFileUpload={this.handleFileUploadComplete} onUploadError={this.handleUploadError} /> </div> - <div className={post_error ? 'post-create-footer has-error' : 'post-create-footer'}> - { post_error } - { server_error } - { limit_error } - { preview } - <MsgTyping channelId={this.state.channel_id} parentId=""/> + <div className={postFooterClassName}> + {postError} + {serverError} + {preview} + <MsgTyping channelId={this.state.channelId} parentId=''/> </div> </div> </form> |