diff options
Diffstat (limited to 'web/react/components/create_comment.jsx')
-rw-r--r-- | web/react/components/create_comment.jsx | 119 |
1 files changed, 69 insertions, 50 deletions
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 4df6a1820..0eb5e28bf 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -18,20 +18,24 @@ module.exports = React.createClass({ handleSubmit: function(e) { e.preventDefault(); - if (this.state.uploadsInProgress.length > 0) return; + if (this.state.uploadsInProgress.length > 0) { + return; + } - if (this.state.submitting) return; + if (this.state.submitting) { + return; + } - var post = {} + var post = {}; post.filenames = []; - post.message = this.state.messageText; + if (post.message.trim().length === 0 && this.state.previews.length === 0) { return; } if (post.message.length > Constants.CHARACTER_LIMIT) { - this.setState({ post_error: 'Comment length must be less than '+Constants.CHARACTER_LIMIT+' characters.' }); + this.setState({postError: 'Comment length must be less than ' + Constants.CHARACTER_LIMIT + ' characters.'}); return; } @@ -40,62 +44,62 @@ module.exports = React.createClass({ post.parent_id = this.props.parentId; post.filenames = this.state.previews; - this.setState({ submitting: true, limit_error: null }); + this.setState({submitting: true, serverError: null}); client.createPost(post, ChannelStore.getCurrent(), function(data) { PostStore.storeCommentDraft(this.props.rootId, null); - this.setState({ messageText: '', submitting: false, post_error: null, server_error: 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); var member = ChannelStore.getMember(this.props.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; + state.serverError = err.message; state.submitting = false; - if (err.message === "Invalid RootId parameter") { - if ($('#post_deleted').length > 0) $('#post_deleted').modal('show'); - } - else { + if (err.message === 'Invalid RootId parameter') { + if ($('#post_deleted').length > 0) { + $('#post_deleted').modal('show'); + } + } else { this.setState(state); } }.bind(this) ); }, commentMsgKeyPress: 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.props.channelId, action: "typing", props: {"parent_id": this.props.rootId} }); + SocketStore.sendMessage({channel_id: this.props.channelId, action: 'typing', props: {'parent_id': this.props.rootId}}); this.lastTime = t; } }, handleUserInput: function(messageText) { var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { - draft = { previews: [], uploadsInProgress: []}; + draft = {previews: [], uploadsInProgress: []}; } draft.message = messageText; PostStore.storeCommentDraft(this.props.rootId, draft); - $(".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.setState({messageText: messageText}); }, - handleUploadStart: function(clientIds, channel_id) { + handleUploadStart: function(clientIds, channelId) { var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { draft = {}; @@ -109,7 +113,7 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress']}); }, - handleFileUploadComplete: function(filenames, clientIds, channel_id) { + handleFileUploadComplete: function(filenames, clientIds, channelId) { var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { draft = {}; @@ -122,7 +126,7 @@ module.exports = React.createClass({ for (var i = 0; i < clientIds.length; i++) { var index = draft['uploadsInProgress'].indexOf(clientIds[i]); - if (index != -1) { + if (index !== -1) { draft['uploadsInProgress'].splice(index, 1); } } @@ -142,13 +146,13 @@ module.exports = React.createClass({ } var index = draft['uploadsInProgress'].indexOf(clientId); - if (index != -1) { + if (index !== -1) { draft['uploadsInProgress'].splice(index, 1); } PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], server_error: err}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); }, clearPreviews: function() { this.setState({previews: []}); @@ -172,7 +176,7 @@ module.exports = React.createClass({ var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { - draft = { message: '', uploadsInProgress: []}; + draft = {message: '', uploadsInProgress: []}; } draft.previews = previews; draft.uploadsInProgress = uploadsInProgress; @@ -184,39 +188,49 @@ module.exports = React.createClass({ PostStore.clearCommentDraftUploads(); var draft = PostStore.getCommentDraft(this.props.rootId); - messageText = ''; - uploadsInProgress = []; - previews = []; + var messageText = ''; + var uploadsInProgress = []; + var previews = []; if (draft) { messageText = draft.message; uploadsInProgress = draft.uploadsInProgress; previews = draft.previews } - return { messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false }; + return {messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false}; }, componentWillReceiveProps: function(newProps) { - if(newProps.rootId !== this.props.rootId) { + if (newProps.rootId !== this.props.rootId) { var draft = PostStore.getCommentDraft(newProps.rootId); - messageText = ''; - uploadsInProgress = []; - previews = []; + var messageText = ''; + var uploadsInProgress = []; + var previews = []; if (draft) { messageText = draft.message; uploadsInProgress = draft.uploadsInProgress; previews = draft.previews } - this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews }); + this.setState({messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews}); } }, - getFileCount: function(channel_id) { + getFileCount: function(channelId) { return this.state.previews.length + this.state.uploadsInProgress.length; }, render: function() { + var serverError = null; + if (this.state.serverError) { + serverError = ( + <div className='form-group has-error'> + <label className='control-label'>{this.state.serverError}</label> + </div> + ); + } - var server_error = this.state.server_error ? <div className='form-group 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 postError = null; + if (this.state.postError) { + postError = <label className='control-label'>{this.state.postError}</label>; + } - var preview = <div/>; + var preview = null; if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = ( <FilePreview @@ -226,18 +240,23 @@ module.exports = React.createClass({ ); } + var postFooterClassName = 'post-create-footer'; + if (postError) { + postFooterClassName += ' has-error'; + } + return ( <form onSubmit={this.handleSubmit}> - <div className="post-create"> - <div id={this.props.rootId} className="post-create-body comment-create-body"> + <div className='post-create'> + <div id={this.props.rootId} className='post-create-body comment-create-body'> <Textbox onUserInput={this.handleUserInput} onKeyPress={this.commentMsgKeyPress} messageText={this.state.messageText} - createMessage="Add a comment..." - initialText="" - id="reply_textbox" - ref="textbox" /> + createMessage='Add a comment...' + initialText='' + id='reply_textbox' + ref='textbox' /> <FileUpload ref='fileUpload' getFileCount={this.getFileCount} @@ -246,13 +265,13 @@ module.exports = React.createClass({ onUploadError={this.handleUploadError} /> </div> <MsgTyping channelId={this.props.channelId} parentId={this.props.rootId} /> - <div className={post_error ? 'has-error' : 'post-create-footer'}> - <input type="button" className="btn btn-primary comment-btn pull-right" value="Add Comment" onClick={this.handleSubmit} /> - { post_error } - { server_error } + <div className={postFooterClassName}> + <input type='button' className='btn btn-primary comment-btn pull-right' value='Add Comment' onClick={this.handleSubmit} /> + {postError} + {serverError} </div> </div> - { preview } + {preview} </form> ); } |