Merge pull request #228 from nickago/MM-1547

MM-1547 Added local cache storing of drafts for comments

3 files changed, 86 insertions, 15 deletions

diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 6ed0f0b34..3f8e9ed2e 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -5,6 +5,7 @@ var client = require('../utils/client.jsx');
 var AsyncClient =require('../utils/async_client.jsx');
 var SocketStore = require('../stores/socket_store.jsx');
 var ChannelStore = require('../stores/channel_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');
@@ -43,6 +44,7 @@ module.exports = React.createClass({
 
         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.clearPreviews();
                 AsyncClient.getPosts(true, this.props.channelId);
@@ -82,16 +84,33 @@ module.exports = React.createClass({
         }
     },
     handleUserInput: function(messageText) {
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+        if (!draft) {
+            draft = { previews: [], uploadsInProgress: 0};
+        }
+        draft.message = messageText;
+        PostStore.storeCommentDraft(this.props.rootId, draft);
+
         $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
         $(".post-right__scroll").perfectScrollbar('update');
         this.setState({messageText: messageText});
     },
     handleFileUpload: function(newPreviews) {
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+        if (!draft) {
+            draft = { message: '', uploadsInProgress: 0, previews: []}
+        }
+
         $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
         $(".post-right__scroll").perfectScrollbar('update');
-        var oldPreviews = this.state.previews;
+        var previews = this.state.previews.concat(newPreviews);
         var num = this.state.uploadsInProgress;
-        this.setState({previews: oldPreviews.concat(newPreviews), uploadsInProgress:num-1});
+
+        draft.previews = previews;
+        draft.uploadsInProgress = num-1;
+        PostStore.storeCommentDraft(this.props.rootId, draft);
+
+        this.setState({previews: previews, uploadsInProgress: num-1});
     },
     handleUploadError: function(err) {
         this.setState({ server_error: err });
@@ -107,10 +126,43 @@ module.exports = React.createClass({
                 break;
             }
         }
+
+        var draft = PostStore.getCommentDraft();
+        if (!draft) {
+            draft = { message: '', uploadsInProgress: 0};
+        }
+        draft.previews = previews;
+        PostStore.storeCommentDraft(draft);
+
         this.setState({previews: previews});
     },
     getInitialState: function() {
-        return { messageText: '', uploadsInProgress: 0, previews: [], submitting: false };
+        PostStore.clearCommentDraftUploads();
+
+        var draft = PostStore.getCommentDraft(this.props.rootId);
+        messageText = '';
+        uploadsInProgress = 0;
+        previews = [];
+        if (draft) {
+            messageText = draft.message;
+            uploadsInProgress = draft.uploadsInProgress;
+            previews = draft.previews
+        }
+        return { messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false };
+    },
+    componentWillReceiveProps: function(newProps) {
+        if(newProps.rootId !== this.props.rootId) {
+            var draft = PostStore.getCommentDraft(newProps.rootId);
+            messageText = '';
+            uploadsInProgress = 0;
+            previews = [];
+            if (draft) {
+                messageText = draft.message;
+                uploadsInProgress = draft.uploadsInProgress;
+                previews = draft.previews
+            }
+            this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews });
+        }
     },
     setUploads: function(val) {
         var oldInProgress = this.state.uploadsInProgress
@@ -126,6 +178,13 @@ module.exports = React.createClass({
         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;
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index a2448b569..91d070958 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -55,7 +55,7 @@ module.exports = React.createClass({
                 post.message,
                 false,
                 function(data) {
-                    PostStore.storeDraft(data.channel_id, user_id, null);
+                    PostStore.storeDraft(data.channel_id, null);
                     this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
 
                     if (data.goto_location.length > 0) {
@@ -78,7 +78,7 @@ module.exports = React.createClass({
 
             client.createPost(post, ChannelStore.getCurrent(),
                 function(data) {
-                    PostStore.storeDraft(data.channel_id, data.user_id, null);
+                    PostStore.storeDraft(data.channel_id, null);
                     this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
                     this.resizePostHolder();
                     AsyncClient.getPosts(true);
@@ -209,7 +209,7 @@ module.exports = React.createClass({
         $(window).trigger('resize');
     },
     handleFileUpload: function(newPreviews, channel_id) {
-        var draft = PostStore.getDraft(channel_id, UserStore.getCurrentId());
+        var draft = PostStore.getDraft(channel_id);
         if (!draft) {
             draft = {}
             draft['message'] = '';
@@ -230,7 +230,7 @@ module.exports = React.createClass({
         } else {
             draft['previews'] = draft['previews'].concat(newPreviews);
             draft['uploadsInProgress'] = draft['uploadsInProgress'] > 0 ? draft['uploadsInProgress'] - 1 : 0;
-            PostStore.storeDraft(channel_id, UserStore.getCurrentId(), draft);
+            PostStore.storeDraft(channel_id, draft);
         }
     },
     handleUploadError: function(err) {
diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx
index 1b3e1a119..0745fcdc3 100644
--- a/web/react/stores/post_store.jsx
+++ b/web/react/stores/post_store.jsx
@@ -149,19 +149,23 @@ var PostStore = assign({}, EventEmitter.prototype, {
   },
   storeCurrentDraft: function(draft) {
     var channel_id = ChannelStore.getCurrentId();
-    var user_id = UserStore.getCurrentId();
-    BrowserStore.setItem("draft_" + channel_id + "_" + user_id, draft);
+    BrowserStore.setItem("draft_" + channel_id, draft);
   },
   getCurrentDraft: function() {
     var channel_id = ChannelStore.getCurrentId();
-    var user_id = UserStore.getCurrentId();
-    return BrowserStore.getItem("draft_" + channel_id + "_" + user_id);
+    return BrowserStore.getItem("draft_" + channel_id);
   },
-  storeDraft: function(channel_id, user_id, draft) {
-    BrowserStore.setItem("draft_" + channel_id + "_" + user_id, draft);
+  storeDraft: function(channel_id, draft) {
+    BrowserStore.setItem("draft_" + channel_id, draft);
   },
-  getDraft: function(channel_id, user_id) {
-    return BrowserStore.getItem("draft_" + channel_id + "_" + user_id);
+  getDraft: function(channel_id) {
+    return BrowserStore.getItem("draft_" + channel_id);
+  },
+  storeCommentDraft: function(parent_post_id, draft) {
+    BrowserStore.setItem("comment_draft_" + parent_post_id, draft);
+  },
+  getCommentDraft: function(parent_post_id) {
+    return BrowserStore.getItem("comment_draft_" + parent_post_id);
   },
   clearDraftUploads: function() {
       BrowserStore.actionOnItemsWithPrefix("draft_", function (key, value) {
@@ -170,6 +174,14 @@ var PostStore = assign({}, EventEmitter.prototype, {
               BrowserStore.setItem(key, value);
           }
       });
+  },
+  clearCommentDraftUploads: function() {
+    BrowserStore.actionOnItemsWithPrefix("comment_draft_", function (key, value) {
+      if (value) {
+        value.uploadsInProgress = 0;
+        BrowserStore.setItem(key, value);
+      }
+    });
   }
 });