From 20d755f3dd5c797413177752884d8589c1f46931 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Fri, 7 Aug 2015 16:24:13 -0400 Subject: Changed post drafts to maintain a list of the names of uploading files instead of just a count --- web/react/components/create_comment.jsx | 97 ++++++++++++++++-------------- web/react/components/create_post.jsx | 103 +++++++++++++++++--------------- web/react/components/file_preview.jsx | 4 +- web/react/components/file_upload.jsx | 28 ++++++--- web/react/stores/post_store.jsx | 4 +- 5 files changed, 131 insertions(+), 105 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 88c01c586..fa7162397 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -18,7 +18,7 @@ module.exports = React.createClass({ handleSubmit: function(e) { e.preventDefault(); - if (this.state.uploadsInProgress > 0) return; + if (this.state.uploadsInProgress.length > 0) return; if (this.state.submitting) return; @@ -86,7 +86,7 @@ module.exports = React.createClass({ handleUserInput: function(messageText) { var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { - draft = { previews: [], uploadsInProgress: 0}; + draft = { previews: [], uploadsInProgress: []}; } draft.message = messageText; PostStore.storeCommentDraft(this.props.rootId, draft); @@ -95,22 +95,52 @@ module.exports = React.createClass({ $(".post-right__scroll").perfectScrollbar('update'); this.setState({messageText: messageText}); }, - handleFileUpload: function(newPreviews) { + handleUploadStart: function(filenames, channel_id) { var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { - draft = { message: '', uploadsInProgress: 0, previews: []} + draft = {}; + draft['message'] = ''; + draft['uploadsInProgress'] = []; + draft['previews'] = []; } - $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight); - $(".post-right__scroll").perfectScrollbar('update'); - var previews = this.state.previews.concat(newPreviews); - var num = this.state.uploadsInProgress; + draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames); + PostStore.storeCommentDraft(this.props.rootId, draft); - draft.previews = previews; - draft.uploadsInProgress = num-1; + this.setState({uploadsInProgress: draft['uploadsInProgress']}); + }, + handleFileUploadComplete: function(filenames, channel_id) { + var draft = PostStore.getCommentDraft(this.props.rootId); + if (!draft) { + draft = {}; + draft['message'] = ''; + draft['uploadsInProgress'] = []; + draft['previews'] = []; + } + + // remove each finished file from uploads + for (var i = 0; i < filenames.length; i++) { + var filename = filenames[i]; + + // filenames returned by the server include a path while stored uploads only have the actual file name + var index = -1; + for (var j = 0; j < draft['uploadsInProgress'].length; j++) { + var upload = draft['uploadsInProgress'][j]; + if (upload.indexOf(filename, upload.length - filename.length)) { + index = j; + break; + } + } + + if (index != -1) { + draft['uploadsInProgress'].splice(index, 1); + } + } + + draft['previews'] = draft['previews'].concat(filenames); PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({previews: previews, uploadsInProgress: num-1}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err) { this.setState({ server_error: err }); @@ -127,12 +157,12 @@ module.exports = React.createClass({ } } - var draft = PostStore.getCommentDraft(); + var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { - draft = { message: '', uploadsInProgress: 0}; + draft = { message: '', uploadsInProgress: []}; } draft.previews = previews; - PostStore.storeCommentDraft(draft); + PostStore.storeCommentDraft(this.props.rootId, draft); this.setState({previews: previews}); }, @@ -141,7 +171,7 @@ module.exports = React.createClass({ var draft = PostStore.getCommentDraft(this.props.rootId); messageText = ''; - uploadsInProgress = 0; + uploadsInProgress = []; previews = []; if (draft) { messageText = draft.message; @@ -154,7 +184,7 @@ module.exports = React.createClass({ if(newProps.rootId !== this.props.rootId) { var draft = PostStore.getCommentDraft(newProps.rootId); messageText = ''; - uploadsInProgress = 0; + uploadsInProgress = []; previews = []; if (draft) { messageText = draft.message; @@ -164,39 +194,16 @@ module.exports = React.createClass({ this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews }); } }, - 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 comments for more files."}); - } else { - this.setState({limit_error: null}); - } - - var numToUpload = newInProgress - oldInProgress; - if (numToUpload <= 0) return 0; - - var draft = PostStore.getCommentDraft(this.props.rootId); - if (!draft) { - draft = { message: '', previews: []}; - } - draft.uploadsInProgress = newInProgress; - PostStore.storeCommentDraft(this.props.rootId, draft); - - this.setState({uploadsInProgress: newInProgress}); - - return numToUpload; + getFileCount: function(channel_id) { + return this.state.previews.length + this.state.uploadsInProgress.length; }, render: function() { var server_error = this.state.server_error ?
: null; var post_error = this.state.post_error ? : null; - var limit_error = this.state.limit_error ?
: null; var preview =
; - if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) { + if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = (
@@ -227,7 +235,6 @@ module.exports = React.createClass({ { post_error } { server_error } - { limit_error } { preview } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 76286eb88..09d7acd9c 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -22,7 +22,7 @@ module.exports = React.createClass({ handleSubmit: function(e) { e.preventDefault(); - if (this.state.uploadsInProgress > 0) return; + if (this.state.uploadsInProgress.length > 0) return; if (this.state.submitting) return; @@ -118,7 +118,7 @@ module.exports = React.createClass({ if (!draft) { draft = {} draft['previews'] = []; - draft['uploadsInProgress'] = 0; + draft['uploadsInProgress'] = []; } draft['message'] = messageText; PostStore.storeCurrentDraft(draft); @@ -128,30 +128,52 @@ module.exports = React.createClass({ $(".post-list-holder-by-time").css("height", height + "px"); $(window).trigger('resize'); }, - handleFileUpload: function(newPreviews, channel_id) { + handleUploadStart: function(filenames, channel_id) { var draft = PostStore.getDraft(channel_id); if (!draft) { - draft = {} + draft = {}; draft['message'] = ''; - draft['uploadsInProgress'] = 0; + draft['uploadsInProgress'] = []; draft['previews'] = []; } - if (channel_id === this.state.channel_id) { - var num = this.state.uploadsInProgress; - var oldPreviews = this.state.previews; - var previews = oldPreviews.concat(newPreviews); + draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames); + PostStore.storeDraft(channel_id, draft); - draft['previews'] = previews; - draft['uploadsInProgress'] = num-1; - PostStore.storeCurrentDraft(draft); + this.setState({uploadsInProgress: draft['uploadsInProgress']}); + }, + handleFileUploadComplete: function(filenames, channel_id) { + var draft = PostStore.getDraft(channel_id); + if (!draft) { + draft = {}; + draft['message'] = ''; + draft['uploadsInProgress'] = []; + draft['previews'] = []; + } - 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); + // remove each finished file from uploads + for (var i = 0; i < filenames.length; i++) { + var filename = filenames[i]; + + // filenames returned by the server include a path while stored uploads only have the actual file name + var index = -1; + for (var j = 0; j < draft['uploadsInProgress'].length; j++) { + var upload = draft['uploadsInProgress'][j]; + if (upload.indexOf(filename, upload.length - filename.length)) { + index = j; + break; + } + } + + if (index != -1) { + draft['uploadsInProgress'].splice(index, 1); + } } + + draft['previews'] = draft['previews'].concat(filenames); + PostStore.storeDraft(channel_id, draft); + + this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err) { this.setState({ server_error: err }); @@ -168,7 +190,7 @@ module.exports = React.createClass({ if (!draft) { draft = {} draft['message'] = ''; - draft['uploadsInProgress'] = 0; + draft['uploadsInProgress'] = []; } draft['previews'] = previews; PostStore.storeCurrentDraft(draft); @@ -187,7 +209,7 @@ module.exports = React.createClass({ var draft = PostStore.getCurrentDraft(); var previews = []; var messageText = ''; - var uploadsInProgress = 0; + var uploadsInProgress = []; if (draft) { previews = draft['previews']; messageText = draft['message']; @@ -206,42 +228,27 @@ module.exports = React.createClass({ previews = draft['previews']; messageText = draft['message']; } - return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText }; + return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: [], previews: previews, submitting: false, initialText: messageText }; }, - 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(channel_id) { + if (channel_id === this.state.channel_id) { + 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(channel_id); - var draft = PostStore.getCurrentDraft(); - if (!draft) { - draft = {} - draft['message'] = ''; - draft['previews'] = []; + if (draft) { + return draft['previews'].length + draft['uploadsInProgress'].length; + } else { + return 0; + } } - draft['uploadsInProgress'] = newInProgress; - PostStore.storeCurrentDraft(draft); - this.setState({uploadsInProgress: newInProgress}); - - return numToUpload; }, render: function() { - var server_error = this.state.server_error ?
: null; var post_error = this.state.post_error ? : null; - var limit_error = this.state.limit_error ?
: null; var preview =
; - if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) { + if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = (
{ post_error } { server_error } - { limit_error } { preview }
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index 7c1db3e10..2b4e459f1 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -43,13 +43,13 @@ module.exports = React.createClass({ } }.bind(this)); - for (var i = 0; i < this.props.uploadsInProgress; i++) { + this.props.uploadsInProgress.forEach(function(filename) { previews.push(
); - } + }.bind(this)); return (
diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index aee089dbc..c02afc5e9 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -10,6 +10,8 @@ module.exports = React.createClass({ var element = $(this.refs.fileInput.getDOMNode()); var files = element.prop('files'); + var channel_id = ChannelStore.getCurrentId(); + this.props.onUploadError(null); // This looks redundant, but must be done this way due to @@ -21,7 +23,11 @@ module.exports = React.createClass({ } } - var numToUpload = this.props.setUploads(numFiles); + var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channel_id), numFiles); + + if (numFiles > numToUpload) { + this.props.onUploadError("Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."); + } for (var i = 0; i < files.length && i < numToUpload; i++) { if (files[i].size > Constants.MAX_FILE_SIZE) { @@ -29,8 +35,6 @@ module.exports = React.createClass({ continue; } - var channel_id = ChannelStore.getCurrentId(); - // Prepare data to be uploaded. formData = new FormData(); formData.append('channel_id', channel_id); @@ -42,10 +46,11 @@ module.exports = React.createClass({ this.props.onFileUpload(parsedData['filenames'], channel_id); }.bind(this), function(err) { - this.props.setUploads(-1); this.props.onUploadError(err); }.bind(this) ); + + this.props.onUploadStart([files[i].name], channel_id); } // clear file input for all modern browsers @@ -87,7 +92,11 @@ module.exports = React.createClass({ } } - var numToUpload = self.props.setUploads(numItems); + var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channel_id), numItems); + + if (numItems > numToUpload) { + self.props.onUploadError("Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."); + } for (var i = 0; i < items.length && i < numToUpload; i++) { if (items[i].type.indexOf("image") !== -1) { @@ -105,17 +114,20 @@ module.exports = React.createClass({ var d = new Date(); var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours()); var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); - formData.append('files', file, "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext); + var name = "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext; + formData.append('files', file, name); client.uploadFile(formData, function(data) { parsedData = $.parseJSON(data); self.props.onFileUpload(parsedData['filenames'], channel_id); - }.bind(this), + }, function(err) { self.props.onUploadError(err); - }.bind(this) + } ); + + self.props.onUploadStart([name], channel_id); } } } diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx index ea1e75ecb..044e7b300 100644 --- a/web/react/stores/post_store.jsx +++ b/web/react/stores/post_store.jsx @@ -155,7 +155,7 @@ var PostStore = assign({}, EventEmitter.prototype, { clearDraftUploads: function clearDraftUploads() { BrowserStore.actionOnItemsWithPrefix('draft_', function clearUploads(key, value) { if (value) { - value.uploadsInProgress = 0; + value.uploadsInProgress = []; BrowserStore.setItem(key, value); } }); @@ -163,7 +163,7 @@ var PostStore = assign({}, EventEmitter.prototype, { clearCommentDraftUploads: function clearCommentDraftUploads() { BrowserStore.actionOnItemsWithPrefix('comment_draft_', function clearUploads(key, value) { if (value) { - value.uploadsInProgress = 0; + value.uploadsInProgress = []; BrowserStore.setItem(key, value); } }); -- cgit v1.2.3-1-g7c22 From 4e8af44370bfb4276e009526045a4983d5ff245a Mon Sep 17 00:00:00 2001 From: hmhealey Date: Mon, 10 Aug 2015 08:41:18 -0400 Subject: Added the ability to cancel file uploads on posts --- web/react/components/create_post.jsx | 22 ++++++++++++++++----- web/react/components/file_preview.jsx | 3 ++- web/react/components/file_upload.jsx | 37 ++++++++++++++++++++++++++++++++++- web/react/utils/client.jsx | 10 +++++++--- 4 files changed, 62 insertions(+), 10 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 09d7acd9c..b32b53749 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -180,12 +180,21 @@ module.exports = React.createClass({ }, removePreview: function(filename) { 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; + + // this can be either an uploaded file or an in progress upload that we need to remove + var index = previews.indexOf(filename); + if (index !== -1) { + previews.splice(index, 1); + } else { + index = uploadsInProgress.indexOf(filename); + + if (index !== -1) { + uploadsInProgress.splice(index, 1); + this.refs.fileUpload.cancelUpload(filename); } } + var draft = PostStore.getCurrentDraft(); if (!draft) { draft = {} @@ -193,8 +202,10 @@ module.exports = React.createClass({ draft['uploadsInProgress'] = []; } 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); @@ -270,6 +281,7 @@ module.exports = React.createClass({ id="post_textbox" ref="textbox" /> +
+
); }.bind(this)); diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index c02afc5e9..11b3b3cee 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -4,8 +4,12 @@ var client = require('../utils/client.jsx'); var Constants = require('../utils/constants.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); +var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ + getInitialState: function() { + return {requests: {}}; + }, handleChange: function() { var element = $(this.refs.fileInput.getDOMNode()); var files = element.prop('files'); @@ -40,16 +44,26 @@ module.exports = React.createClass({ formData.append('channel_id', channel_id); formData.append('files', files[i], files[i].name); - client.uploadFile(formData, + var request = client.uploadFile(formData, function(data) { parsedData = $.parseJSON(data); this.props.onFileUpload(parsedData['filenames'], channel_id); + + var requests = this.state.requests; + for (var i = 0; i < parsedData['filenames'].length; i++) { + delete requests[utils.getFileName(parsedData['filenames'][i])]; + } + this.setState({requests: requests}); }.bind(this), function(err) { this.props.onUploadError(err); }.bind(this) ); + var requests = this.state.requests; + requests[files[i].name] = request; + this.setState({requests: requests}); + this.props.onUploadStart([files[i].name], channel_id); } @@ -121,18 +135,39 @@ module.exports = React.createClass({ function(data) { parsedData = $.parseJSON(data); self.props.onFileUpload(parsedData['filenames'], channel_id); + + var requests = self.state.requests; + for (var i = 0; i < parsedData['filenames'].length; i++) { + delete requests[utils.getFileName(parsedData['filenames'][i])]; + } + self.setState({requests: requests}); }, function(err) { self.props.onUploadError(err); } ); + var requests = self.state.requests; + requests[files[i].name] = request; + self.setState({requests: requests}); + self.props.onUploadStart([name], channel_id); } } } }); }, + cancelUpload: function(filename) { + var requests = this.state.requests; + var request = requests[filename]; + + if (request) { + request.abort(); + + delete requests[filename]; + this.setState({requests: requests}); + } + }, render: function() { return ( diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index b8eda0075..d979515ef 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -762,7 +762,7 @@ module.exports.getProfiles = function(success, error) { }; module.exports.uploadFile = function(formData, success, error) { - $.ajax({ + var request = $.ajax({ url: "/api/v1/files/upload", type: 'POST', data: formData, @@ -771,12 +771,16 @@ module.exports.uploadFile = function(formData, success, error) { processData: false, success: success, error: function(xhr, status, err) { - e = handleError("uploadFile", xhr, status, err); - error(e); + if (err !== 'abort') { + e = handleError("uploadFile", xhr, status, err); + error(e); + } } }); module.exports.track('api', 'api_files_upload'); + + return request; }; module.exports.getPublicLink = function(data, success, error) { -- cgit v1.2.3-1-g7c22 From 4b74c873cc95973c5434988a41f5e06446a4e586 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Mon, 10 Aug 2015 08:52:50 -0400 Subject: Added the ability to cancel file uploads on comments --- web/react/components/create_comment.jsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index fa7162397..13ee6deb4 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -150,10 +150,18 @@ module.exports = React.createClass({ }, removePreview: function(filename) { 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; + + // this can be either an uploaded file or an in progress upload that we need to remove + var index = previews.indexOf(filename); + if (index !== -1) { + previews.splice(index, 1); + } else { + index = uploadsInProgress.indexOf(filename); + + if (index !== -1) { + uploadsInProgress.splice(index, 1); + this.refs.fileUpload.cancelUpload(filename); } } @@ -162,9 +170,10 @@ module.exports = React.createClass({ draft = { message: '', uploadsInProgress: []}; } draft.previews = previews; + draft.uploadsInProgress = uploadsInProgress; PostStore.storeCommentDraft(this.props.rootId, draft); - this.setState({previews: previews}); + this.setState({previews: previews, uploadsInProgress: uploadsInProgress}); }, getInitialState: function() { PostStore.clearCommentDraftUploads(); @@ -225,6 +234,7 @@ module.exports = React.createClass({ id="reply_textbox" ref="textbox" /> Date: Mon, 10 Aug 2015 12:05:45 -0400 Subject: Changed post drafts to maintain a store a unique id for each file upload to fix issues with duplicate file names --- web/react/components/create_comment.jsx | 30 +++++++++------------------ web/react/components/create_post.jsx | 30 +++++++++------------------ web/react/components/file_preview.jsx | 11 +++++++--- web/react/components/file_upload.jsx | 36 ++++++++++++++++++++------------- web/react/utils/utils.jsx | 21 +++++++++++++++++++ 5 files changed, 71 insertions(+), 57 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 13ee6deb4..c16909b8b 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -95,7 +95,7 @@ module.exports = React.createClass({ $(".post-right__scroll").perfectScrollbar('update'); this.setState({messageText: messageText}); }, - handleUploadStart: function(filenames, channel_id) { + handleUploadStart: function(clientIds, channel_id) { var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { draft = {}; @@ -104,12 +104,12 @@ module.exports = React.createClass({ draft['previews'] = []; } - draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames); + draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); PostStore.storeCommentDraft(this.props.rootId, draft); this.setState({uploadsInProgress: draft['uploadsInProgress']}); }, - handleFileUploadComplete: function(filenames, channel_id) { + handleFileUploadComplete: function(filenames, clientIds, channel_id) { var draft = PostStore.getCommentDraft(this.props.rootId); if (!draft) { draft = {}; @@ -119,18 +119,8 @@ module.exports = React.createClass({ } // remove each finished file from uploads - for (var i = 0; i < filenames.length; i++) { - var filename = filenames[i]; - - // filenames returned by the server include a path while stored uploads only have the actual file name - var index = -1; - for (var j = 0; j < draft['uploadsInProgress'].length; j++) { - var upload = draft['uploadsInProgress'][j]; - if (upload.indexOf(filename, upload.length - filename.length)) { - index = j; - break; - } - } + for (var i = 0; i < clientIds.length; i++) { + var index = draft['uploadsInProgress'].indexOf(clientIds[i]); if (index != -1) { draft['uploadsInProgress'].splice(index, 1); @@ -148,20 +138,20 @@ module.exports = React.createClass({ clearPreviews: function() { this.setState({previews: []}); }, - removePreview: function(filename) { + removePreview: function(id) { var previews = this.state.previews; var uploadsInProgress = this.state.uploadsInProgress; - // this can be either an uploaded file or an in progress upload that we need to remove - var index = previews.indexOf(filename); + // 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(filename); + index = uploadsInProgress.indexOf(id); if (index !== -1) { uploadsInProgress.splice(index, 1); - this.refs.fileUpload.cancelUpload(filename); + this.refs.fileUpload.cancelUpload(id); } } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index b32b53749..a4107d4fc 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -128,7 +128,7 @@ module.exports = React.createClass({ $(".post-list-holder-by-time").css("height", height + "px"); $(window).trigger('resize'); }, - handleUploadStart: function(filenames, channel_id) { + handleUploadStart: function(clientIds, channel_id) { var draft = PostStore.getDraft(channel_id); if (!draft) { draft = {}; @@ -137,12 +137,12 @@ module.exports = React.createClass({ draft['previews'] = []; } - draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(filenames); + draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); PostStore.storeDraft(channel_id, draft); this.setState({uploadsInProgress: draft['uploadsInProgress']}); }, - handleFileUploadComplete: function(filenames, channel_id) { + handleFileUploadComplete: function(filenames, clientIds, channel_id) { var draft = PostStore.getDraft(channel_id); if (!draft) { draft = {}; @@ -152,18 +152,8 @@ module.exports = React.createClass({ } // remove each finished file from uploads - for (var i = 0; i < filenames.length; i++) { - var filename = filenames[i]; - - // filenames returned by the server include a path while stored uploads only have the actual file name - var index = -1; - for (var j = 0; j < draft['uploadsInProgress'].length; j++) { - var upload = draft['uploadsInProgress'][j]; - if (upload.indexOf(filename, upload.length - filename.length)) { - index = j; - break; - } - } + for (var i = 0; i < clientIds.length; i++) { + var index = draft['uploadsInProgress'].indexOf(clientIds[i]); if (index != -1) { draft['uploadsInProgress'].splice(index, 1); @@ -178,20 +168,20 @@ module.exports = React.createClass({ handleUploadError: function(err) { this.setState({ server_error: err }); }, - removePreview: function(filename) { + removePreview: function(id) { var previews = this.state.previews; var uploadsInProgress = this.state.uploadsInProgress; - // this can be either an uploaded file or an in progress upload that we need to remove - var index = previews.indexOf(filename); + // 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(filename); + index = uploadsInProgress.indexOf(id); if (index !== -1) { uploadsInProgress.splice(index, 1); - this.refs.fileUpload.cancelUpload(filename); + this.refs.fileUpload.cancelUpload(id); } } diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx index 8218429fd..d1b2f734a 100644 --- a/web/react/components/file_preview.jsx +++ b/web/react/components/file_preview.jsx @@ -10,7 +10,12 @@ var Constants = require('../utils/constants.jsx'); module.exports = React.createClass({ handleRemove: function(e) { var previewDiv = e.target.parentNode.parentNode; - this.props.onRemove(previewDiv.getAttribute('data-filename')); + + if (previewDiv.hasAttribute('data-filename')) { + this.props.onRemove(previewDiv.getAttribute('data-filename')); + } else if (previewDiv.hasAttribute('data-client-id')) { + this.props.onRemove(previewDiv.getAttribute('data-client-id')); + } }, render: function() { var previews = []; @@ -43,9 +48,9 @@ module.exports = React.createClass({ } }.bind(this)); - this.props.uploadsInProgress.forEach(function(filename) { + this.props.uploadsInProgress.forEach(function(clientId) { previews.push( -
+
diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 11b3b3cee..4b8965dcb 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -39,19 +39,23 @@ module.exports = React.createClass({ continue; } + // generate a unique id that can be used by other components to refer back to this file upload + var clientId = utils.generateId(); + // Prepare data to be uploaded. formData = new FormData(); formData.append('channel_id', channel_id); formData.append('files', files[i], files[i].name); + formData.append('client_ids', clientId); var request = client.uploadFile(formData, function(data) { parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData['filenames'], channel_id); + this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id); var requests = this.state.requests; - for (var i = 0; i < parsedData['filenames'].length; i++) { - delete requests[utils.getFileName(parsedData['filenames'][i])]; + for (var i = 0; i < parsedData['client_ids'].length; i++) { + delete requests[parsedData['client_ids'][i]]; } this.setState({requests: requests}); }.bind(this), @@ -61,10 +65,10 @@ module.exports = React.createClass({ ); var requests = this.state.requests; - requests[files[i].name] = request; + requests[clientId] = request; this.setState({requests: requests}); - this.props.onUploadStart([files[i].name], channel_id); + this.props.onUploadStart([clientId], channel_id); } // clear file input for all modern browsers @@ -123,6 +127,9 @@ module.exports = React.createClass({ var channel_id = ChannelStore.getCurrentId(); + // generate a unique id that can be used by other components to refer back to this file upload + var clientId = utils.generateId(); + formData = new FormData(); formData.append('channel_id', channel_id); var d = new Date(); @@ -130,15 +137,16 @@ module.exports = React.createClass({ var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); var name = "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext; formData.append('files', file, name); + formData.append('client_ids', clientId); - client.uploadFile(formData, + var request = client.uploadFile(formData, function(data) { parsedData = $.parseJSON(data); - self.props.onFileUpload(parsedData['filenames'], channel_id); + self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id); var requests = self.state.requests; - for (var i = 0; i < parsedData['filenames'].length; i++) { - delete requests[utils.getFileName(parsedData['filenames'][i])]; + for (var i = 0; i < parsedData['client_ids'].length; i++) { + delete requests[parsedData['client_ids'][i]]; } self.setState({requests: requests}); }, @@ -148,23 +156,23 @@ module.exports = React.createClass({ ); var requests = self.state.requests; - requests[files[i].name] = request; + requests[clientId] = request; self.setState({requests: requests}); - self.props.onUploadStart([name], channel_id); + self.props.onUploadStart([clientId], channel_id); } } } }); }, - cancelUpload: function(filename) { + cancelUpload: function(clientId) { var requests = this.state.requests; - var request = requests[filename]; + var request = requests[clientId]; if (request) { request.abort(); - delete requests[filename]; + delete requests[clientId]; this.setState({requests: requests}); } }, diff --git a/web/react/utils/utils.jsx b/web/react/utils/utils.jsx index a759cc579..2214b6239 100644 --- a/web/react/utils/utils.jsx +++ b/web/react/utils/utils.jsx @@ -913,3 +913,24 @@ module.exports.getFileName = function(path) { var split = path.split('/'); return split[split.length - 1]; }; + +// Generates a RFC-4122 version 4 compliant globally unique identifier. +module.exports.generateId = function() { + // implementation taken from http://stackoverflow.com/a/2117523 + var id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'; + + id = id.replace(/[xy]/g, function(c) { + var r = Math.floor(Math.random() * 16); + + var v; + if (c === 'x') { + v = r; + } else { + v = r & 0x3 | 0x8; + } + + return v.toString(16); + }); + + return id; +}; -- cgit v1.2.3-1-g7c22 From 96ad8cb1140f5295551154920aa215527056559d Mon Sep 17 00:00:00 2001 From: hmhealey Date: Mon, 10 Aug 2015 13:15:01 -0400 Subject: Changed file upload components to properly remove previews for failed uploads --- web/react/components/create_comment.jsx | 19 +++++++++++++++++-- web/react/components/create_post.jsx | 19 +++++++++++++++++-- web/react/components/file_upload.jsx | 4 ++-- 3 files changed, 36 insertions(+), 6 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index c16909b8b..4df6a1820 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -132,8 +132,23 @@ module.exports = React.createClass({ this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, - handleUploadError: function(err) { - this.setState({ server_error: err }); + handleUploadError: function(err, clientId) { + var draft = PostStore.getCommentDraft(this.props.rootId); + if (!draft) { + draft = {}; + draft['message'] = ''; + draft['uploadsInProgress'] = []; + draft['previews'] = []; + } + + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index != -1) { + draft['uploadsInProgress'].splice(index, 1); + } + + PostStore.storeCommentDraft(this.props.rootId, draft); + + this.setState({uploadsInProgress: draft['uploadsInProgress'], server_error: err}); }, clearPreviews: function() { this.setState({previews: []}); diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index a4107d4fc..55b2ae5c5 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -165,8 +165,23 @@ module.exports = React.createClass({ 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.channel_id); + if (!draft) { + draft = {}; + draft['message'] = ''; + draft['uploadsInProgress'] = []; + draft['previews'] = []; + } + + var index = draft['uploadsInProgress'].indexOf(clientId); + if (index != -1) { + draft['uploadsInProgress'].splice(index, 1); + } + + PostStore.storeDraft(this.state.channel_id, draft); + + this.setState({uploadsInProgress: draft['uploadsInProgress'], server_error: err}); }, removePreview: function(id) { var previews = this.state.previews; diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 4b8965dcb..21e21a58a 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -60,7 +60,7 @@ module.exports = React.createClass({ this.setState({requests: requests}); }.bind(this), function(err) { - this.props.onUploadError(err); + this.props.onUploadError(err, clientId); }.bind(this) ); @@ -151,7 +151,7 @@ module.exports = React.createClass({ self.setState({requests: requests}); }, function(err) { - self.props.onUploadError(err); + self.props.onUploadError(err, clientId); } ); -- cgit v1.2.3-1-g7c22 From 6ec1b7a8b3aad12bb337b6751a7859349aa03cf6 Mon Sep 17 00:00:00 2001 From: hmhealey Date: Mon, 10 Aug 2015 14:01:11 -0400 Subject: Formatted CreateComment, CreatePost, and FileUpload React components to match the style guide --- web/react/components/create_comment.jsx | 119 +++++++++++++++------------ web/react/components/create_post.jsx | 139 ++++++++++++++++++-------------- web/react/components/file_upload.jsx | 100 ++++++++++++++--------- 3 files changed, 208 insertions(+), 150 deletions(-) (limited to 'web/react') 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 = ( +
+ +
+ ); + } - var server_error = this.state.server_error ?
: null; - var post_error = this.state.post_error ? : null; + var postError = null; + if (this.state.postError) { + postError = ; + } - var preview =
; + var preview = null; if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = ( -
-
+
+
+ createMessage='Add a comment...' + initialText='' + id='reply_textbox' + ref='textbox' />
-
- - { post_error } - { server_error } +
+ + {postError} + {serverError}
- { preview } + {preview} ); } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 55b2ae5c5..80b1208ff 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.length > 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; } }, @@ -116,7 +112,7 @@ module.exports = React.createClass({ var draft = PostStore.getCurrentDraft(); if (!draft) { - draft = {} + draft = {}; draft['previews'] = []; draft['uploadsInProgress'] = []; } @@ -125,11 +121,11 @@ module.exports = React.createClass({ }, 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'); }, - handleUploadStart: function(clientIds, channel_id) { - var draft = PostStore.getDraft(channel_id); + handleUploadStart: function(clientIds, channelId) { + var draft = PostStore.getDraft(channelId); if (!draft) { draft = {}; draft['message'] = ''; @@ -138,12 +134,12 @@ module.exports = React.createClass({ } draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); - PostStore.storeDraft(channel_id, draft); + PostStore.storeDraft(channelId, draft); this.setState({uploadsInProgress: draft['uploadsInProgress']}); }, - handleFileUploadComplete: function(filenames, clientIds, channel_id) { - var draft = PostStore.getDraft(channel_id); + handleFileUploadComplete: function(filenames, clientIds, channelId) { + var draft = PostStore.getDraft(channelId); if (!draft) { draft = {}; draft['message'] = ''; @@ -155,18 +151,18 @@ 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); } } draft['previews'] = draft['previews'].concat(filenames); - PostStore.storeDraft(channel_id, draft); + PostStore.storeDraft(channelId, draft); this.setState({uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); }, handleUploadError: function(err, clientId) { - var draft = PostStore.getDraft(this.state.channel_id); + var draft = PostStore.getDraft(this.state.channelId); if (!draft) { draft = {}; draft['message'] = ''; @@ -175,13 +171,13 @@ module.exports = React.createClass({ } var index = draft['uploadsInProgress'].indexOf(clientId); - if (index != -1) { + if (index !== -1) { draft['uploadsInProgress'].splice(index, 1); } - PostStore.storeDraft(this.state.channel_id, draft); + PostStore.storeDraft(this.state.channelId, draft); - this.setState({uploadsInProgress: draft['uploadsInProgress'], server_error: err}); + this.setState({uploadsInProgress: draft['uploadsInProgress'], serverError: err}); }, removePreview: function(id) { var previews = this.state.previews; @@ -202,7 +198,7 @@ module.exports = React.createClass({ var draft = PostStore.getCurrentDraft(); if (!draft) { - draft = {} + draft = {}; draft['message'] = ''; draft['uploadsInProgress'] = []; } @@ -220,8 +216,8 @@ 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 = ''; @@ -231,7 +227,10 @@ module.exports = React.createClass({ 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: messageText, initialText: messageText, submitting: false, + serverError: null, postError: null, previews: previews, uploadsInProgress: uploadsInProgress + }); } }, getInitialState: function() { @@ -244,13 +243,13 @@ module.exports = React.createClass({ previews = draft['previews']; messageText = draft['message']; } - return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: [], previews: previews, submitting: false, initialText: messageText }; + return {channelId: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: [], previews: previews, submitting: false, initialText: messageText}; }, - getFileCount: function(channel_id) { - if (channel_id === this.state.channel_id) { + getFileCount: function(channelId) { + if (channelId === this.state.channelId) { return this.state.previews.length + this.state.uploadsInProgress.length; } else { - var draft = PostStore.getDraft(channel_id); + var draft = PostStore.getDraft(channelId); if (draft) { return draft['previews'].length + draft['uploadsInProgress'].length; @@ -260,10 +259,21 @@ module.exports = React.createClass({ } }, render: function() { - var server_error = this.state.server_error ?
: null; - var post_error = this.state.post_error ? : null; + var serverError = null; + if (this.state.serverError) { + serverError = ( +
+ +
+ ); + } - var preview =
; + var postError = null; + if (this.state.postError) { + postError = ; + } + + var preview = null; if (this.state.previews.length > 0 || this.state.uploadsInProgress.length > 0) { preview = ( -
-
+
+
+
+ createMessage='Write a message...' + channelId={this.state.channelId} + id='post_textbox' + ref='textbox' />
-
- { post_error } - { server_error } - { preview } - +
+ {postError} + {serverError} + {preview} +
diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index 21e21a58a..b90fa4fd3 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -14,7 +14,7 @@ module.exports = React.createClass({ var element = $(this.refs.fileInput.getDOMNode()); var files = element.prop('files'); - var channel_id = ChannelStore.getCurrentId(); + var channelId = ChannelStore.getCurrentId(); this.props.onUploadError(null); @@ -27,15 +27,15 @@ module.exports = React.createClass({ } } - var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channel_id), numFiles); + var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - this.props.getFileCount(channelId), numFiles); if (numFiles > numToUpload) { - this.props.onUploadError("Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."); + this.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.'); } for (var i = 0; i < files.length && i < numToUpload; i++) { if (files[i].size > Constants.MAX_FILE_SIZE) { - this.props.onUploadError("Files must be no more than " + Constants.MAX_FILE_SIZE/1000000 + " MB"); + this.props.onUploadError('Files must be no more than ' + Constants.MAX_FILE_SIZE / 1000000 + ' MB'); continue; } @@ -43,15 +43,15 @@ module.exports = React.createClass({ var clientId = utils.generateId(); // Prepare data to be uploaded. - formData = new FormData(); - formData.append('channel_id', channel_id); + var formData = new FormData(); + formData.append('channel_id', channelId); formData.append('files', files[i], files[i].name); formData.append('client_ids', clientId); var request = client.uploadFile(formData, function(data) { - parsedData = $.parseJSON(data); - this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id); + var parsedData = $.parseJSON(data); + this.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId); var requests = this.state.requests; for (var i = 0; i < parsedData['client_ids'].length; i++) { @@ -68,26 +68,26 @@ module.exports = React.createClass({ requests[clientId] = request; this.setState({requests: requests}); - this.props.onUploadStart([clientId], channel_id); + this.props.onUploadStart([clientId], channelId); } // clear file input for all modern browsers - try{ + try { element[0].value = ''; - if(element.value){ - element[0].type = "text"; - element[0].type = "file"; + if (element.value) { + element[0].type = 'text'; + element[0].type = 'file'; } - }catch(e){} + } catch(e) {} }, componentDidMount: function() { var inputDiv = this.refs.input.getDOMNode(); var self = this; - document.addEventListener("paste", function(e) { + document.addEventListener('paste', function(e) { var textarea = $(inputDiv.parentNode.parentNode).find('.custom-textarea')[0]; - if (textarea != e.target && !$.contains(textarea,e.target)) { + if (textarea !== e.target && !$.contains(textarea, e.target)) { return; } @@ -99,50 +99,69 @@ module.exports = React.createClass({ var numItems = 0; if (items) { for (var i = 0; i < items.length; i++) { - if (items[i].type.indexOf("image") !== -1) { + if (items[i].type.indexOf('image') !== -1) { + var ext = items[i].type.split('/')[1].toLowerCase(); + if (ext === 'jpeg') { + ext = 'jpg'; + } - ext = items[i].type.split("/")[1].toLowerCase(); - ext = ext == 'jpeg' ? 'jpg' : ext; + if (Constants.IMAGE_TYPES.indexOf(ext) < 0) { + continue; + } - if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return; - - numItems++ + numItems++; } } - var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channel_id), numItems); + var numToUpload = Math.min(Constants.MAX_UPLOAD_FILES - self.props.getFileCount(channelId), numItems); if (numItems > numToUpload) { - self.props.onUploadError("Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."); + self.props.onUploadError('Uploads limited to ' + Constants.MAX_UPLOAD_FILES + ' files maximum. Please use additional posts for more files.'); } for (var i = 0; i < items.length && i < numToUpload; i++) { - if (items[i].type.indexOf("image") !== -1) { + if (items[i].type.indexOf('image') !== -1) { var file = items[i].getAsFile(); - ext = items[i].type.split("/")[1].toLowerCase(); - ext = ext == 'jpeg' ? 'jpg' : ext; + var ext = items[i].type.split('/')[1].toLowerCase(); + if (ext === 'jpeg') { + ext = 'jpg'; + } - if (Constants.IMAGE_TYPES.indexOf(ext) < 0) return; + if (Constants.IMAGE_TYPES.indexOf(ext) < 0) { + continue; + } - var channel_id = ChannelStore.getCurrentId(); + var channelId = ChannelStore.getCurrentId(); // generate a unique id that can be used by other components to refer back to this file upload var clientId = utils.generateId(); - formData = new FormData(); - formData.append('channel_id', channel_id); + var formData = new FormData(); + formData.append('channel_id', channelId); + var d = new Date(); - var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours()); - var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); - var name = "Image Pasted at "+d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate()+" "+hour+"-"+min+"." + ext; + var hour; + if (d.getHours() < 10) { + hour = '0' + d.getHours(); + } else { + hour = String(d.getHours()); + } + var min; + if (d.getMinutes() < 10) { + min = '0' + d.getMinutes(); + } else { + min = String(d.getMinutes()); + } + + var name = 'Image Pasted at ' + d.getFullYear() + '-' + d.getMonth() + '-' + d.getDate() + ' ' + hour + '-' + min + '.' + ext; formData.append('files', file, name); formData.append('client_ids', clientId); var request = client.uploadFile(formData, function(data) { - parsedData = $.parseJSON(data); - self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channel_id); + var parsedData = $.parseJSON(data); + self.props.onFileUpload(parsedData['filenames'], parsedData['client_ids'], channelId); var requests = self.state.requests; for (var i = 0; i < parsedData['client_ids'].length; i++) { @@ -159,7 +178,7 @@ module.exports = React.createClass({ requests[clientId] = request; self.setState({requests: requests}); - self.props.onUploadStart([clientId], channel_id); + self.props.onUploadStart([clientId], channelId); } } } @@ -178,7 +197,12 @@ module.exports = React.createClass({ }, render: function() { return ( - + + + + + + ); } }); -- cgit v1.2.3-1-g7c22 From 17b05f705f910429ece1ca6c64ec56bf89dd014b Mon Sep 17 00:00:00 2001 From: hmhealey Date: Tue, 11 Aug 2015 09:41:18 -0400 Subject: Changed PostStore.getDraft/getCommentDraft to return an empty draft instead of null when no draft is found --- web/react/components/create_comment.jsx | 44 ++----------------------- web/react/components/create_post.jsx | 57 ++++----------------------------- web/react/stores/post_store.jsx | 9 ++++-- 3 files changed, 15 insertions(+), 95 deletions(-) (limited to 'web/react') diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index 0eb5e28bf..78e06c532 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -89,9 +89,6 @@ module.exports = React.createClass({ }, handleUserInput: function(messageText) { var draft = PostStore.getCommentDraft(this.props.rootId); - if (!draft) { - draft = {previews: [], uploadsInProgress: []}; - } draft.message = messageText; PostStore.storeCommentDraft(this.props.rootId, draft); @@ -101,12 +98,6 @@ module.exports = React.createClass({ }, handleUploadStart: function(clientIds, channelId) { var draft = PostStore.getCommentDraft(this.props.rootId); - if (!draft) { - draft = {}; - draft['message'] = ''; - draft['uploadsInProgress'] = []; - draft['previews'] = []; - } draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); PostStore.storeCommentDraft(this.props.rootId, draft); @@ -115,12 +106,6 @@ module.exports = React.createClass({ }, handleFileUploadComplete: function(filenames, clientIds, channelId) { var draft = PostStore.getCommentDraft(this.props.rootId); - if (!draft) { - draft = {}; - draft['message'] = ''; - draft['uploadsInProgress'] = []; - draft['previews'] = []; - } // remove each finished file from uploads for (var i = 0; i < clientIds.length; i++) { @@ -138,12 +123,6 @@ module.exports = React.createClass({ }, handleUploadError: function(err, clientId) { var draft = PostStore.getCommentDraft(this.props.rootId); - if (!draft) { - draft = {}; - draft['message'] = ''; - draft['uploadsInProgress'] = []; - draft['previews'] = []; - } var index = draft['uploadsInProgress'].indexOf(clientId); if (index !== -1) { @@ -175,9 +154,6 @@ module.exports = React.createClass({ } var draft = PostStore.getCommentDraft(this.props.rootId); - if (!draft) { - draft = {message: '', uploadsInProgress: []}; - } draft.previews = previews; draft.uploadsInProgress = uploadsInProgress; PostStore.storeCommentDraft(this.props.rootId, draft); @@ -188,28 +164,12 @@ module.exports = React.createClass({ PostStore.clearCommentDraftUploads(); var draft = PostStore.getCommentDraft(this.props.rootId); - 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: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews'], submitting: false}; }, componentWillReceiveProps: function(newProps) { if (newProps.rootId !== this.props.rootId) { var draft = PostStore.getCommentDraft(newProps.rootId); - 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: draft['message'], uploadsInProgress: draft['uploadsInProgress'], previews: draft['previews']}); } }, getFileCount: function(channelId) { diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 80b1208ff..9ca1d5388 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -111,11 +111,6 @@ module.exports = React.createClass({ this.setState({messageText: messageText}); var draft = PostStore.getCurrentDraft(); - if (!draft) { - draft = {}; - draft['previews'] = []; - draft['uploadsInProgress'] = []; - } draft['message'] = messageText; PostStore.storeCurrentDraft(draft); }, @@ -126,12 +121,6 @@ module.exports = React.createClass({ }, handleUploadStart: function(clientIds, channelId) { var draft = PostStore.getDraft(channelId); - if (!draft) { - draft = {}; - draft['message'] = ''; - draft['uploadsInProgress'] = []; - draft['previews'] = []; - } draft['uploadsInProgress'] = draft['uploadsInProgress'].concat(clientIds); PostStore.storeDraft(channelId, draft); @@ -140,12 +129,6 @@ module.exports = React.createClass({ }, handleFileUploadComplete: function(filenames, clientIds, channelId) { var draft = PostStore.getDraft(channelId); - if (!draft) { - draft = {}; - draft['message'] = ''; - draft['uploadsInProgress'] = []; - draft['previews'] = []; - } // remove each finished file from uploads for (var i = 0; i < clientIds.length; i++) { @@ -163,12 +146,6 @@ module.exports = React.createClass({ }, handleUploadError: function(err, clientId) { var draft = PostStore.getDraft(this.state.channelId); - if (!draft) { - draft = {}; - draft['message'] = ''; - draft['uploadsInProgress'] = []; - draft['previews'] = []; - } var index = draft['uploadsInProgress'].indexOf(clientId); if (index !== -1) { @@ -197,11 +174,6 @@ module.exports = React.createClass({ } var draft = PostStore.getCurrentDraft(); - if (!draft) { - draft = {}; - draft['message'] = ''; - draft['uploadsInProgress'] = []; - } draft['previews'] = previews; draft['uploadsInProgress'] = uploadsInProgress; PostStore.storeCurrentDraft(draft); @@ -219,17 +191,9 @@ module.exports = React.createClass({ var channelId = ChannelStore.getCurrentId(); if (this.state.channelId !== channelId) { var draft = PostStore.getCurrentDraft(); - var previews = []; - var messageText = ''; - var uploadsInProgress = []; - if (draft) { - previews = draft['previews']; - messageText = draft['message']; - uploadsInProgress = draft['uploadsInProgress']; - } this.setState({ - channelId: channelId, messageText: messageText, initialText: messageText, submitting: false, - serverError: null, postError: null, previews: previews, uploadsInProgress: uploadsInProgress + channelId: channelId, messageText: draft['message'], initialText: draft['message'], submitting: false, + serverError: null, postError: null, previews: draft['previews'], uploadsInProgress: draft['uploadsInProgress'] }); } }, @@ -237,13 +201,10 @@ module.exports = React.createClass({ PostStore.clearDraftUploads(); var draft = PostStore.getCurrentDraft(); - var previews = []; - var messageText = ''; - if (draft) { - previews = draft['previews']; - messageText = draft['message']; - } - return {channelId: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: [], previews: previews, submitting: false, initialText: messageText}; + return { + channelId: ChannelStore.getCurrentId(), messageText: draft['message'], uploadsInProgress: draft['uploadsInProgress'], + previews: draft['previews'], submitting: false, initialText: draft['message'] + }; }, getFileCount: function(channelId) { if (channelId === this.state.channelId) { @@ -251,11 +212,7 @@ module.exports = React.createClass({ } else { var draft = PostStore.getDraft(channelId); - if (draft) { - return draft['previews'].length + draft['uploadsInProgress'].length; - } else { - return 0; - } + return draft['previews'].length + draft['uploadsInProgress'].length; } }, render: function() { diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx index 044e7b300..9ebdf734c 100644 --- a/web/react/stores/post_store.jsx +++ b/web/react/stores/post_store.jsx @@ -132,25 +132,28 @@ var PostStore = assign({}, EventEmitter.prototype, { getSearchTerm: function getSearchTerm() { return BrowserStore.getItem('search_term'); }, + getEmptyDraft: function getEmptyDraft(draft) { + return {message: '', uploadsInProgress: [], previews: []}; + }, storeCurrentDraft: function storeCurrentDraft(draft) { var channelId = ChannelStore.getCurrentId(); BrowserStore.setItem('draft_' + channelId, draft); }, getCurrentDraft: function getCurrentDraft() { var channelId = ChannelStore.getCurrentId(); - return BrowserStore.getItem('draft_' + channelId); + return PostStore.getDraft(channelId); }, storeDraft: function storeDraft(channelId, draft) { BrowserStore.setItem('draft_' + channelId, draft); }, getDraft: function getDraft(channelId) { - return BrowserStore.getItem('draft_' + channelId); + return BrowserStore.getItem('draft_' + channelId, PostStore.getEmptyDraft()); }, storeCommentDraft: function storeCommentDraft(parentPostId, draft) { BrowserStore.setItem('comment_draft_' + parentPostId, draft); }, getCommentDraft: function getCommentDraft(parentPostId) { - return BrowserStore.getItem('comment_draft_' + parentPostId); + return BrowserStore.getItem('comment_draft_' + parentPostId, PostStore.getEmptyDraft()); }, clearDraftUploads: function clearDraftUploads() { BrowserStore.actionOnItemsWithPrefix('draft_', function clearUploads(key, value) { -- cgit v1.2.3-1-g7c22