PLT-4431 Add post queuing to the webapp (#4800)

* Add post queuing to the webapp

* Add more abstraction

webapp/actions/post_actions.jsx

@@ -280,6 +280,55 @@ export function removeReaction(channelId, postId, emojiName) {
     AsyncClient.deleteReaction(channelId, reaction);
 }
 
+const postQueue = [];
+
+export function queuePost(post, doLoadPost, success, error) {
+    postQueue.push(
+        createPost.bind(
+            this,
+            post,
+            doLoadPost,
+            (data) => {
+                if (success) {
+                    success(data);
+                }
+
+                postSendComplete();
+            },
+            (err) => {
+                if (error) {
+                    error(err);
+                }
+
+                postSendComplete();
+            }
+        )
+    );
+
+    sendFirstPostInQueue();
+}
+
+// Remove the completed post from the queue and send the next one
+function postSendComplete() {
+    postQueue.shift();
+    sendNextPostInQueue();
+}
+
+// Start sending posts if a new queue has started
+function sendFirstPostInQueue() {
+    if (postQueue.length === 1) {
+        sendNextPostInQueue();
+    }
+}
+
+// Send the next post in the queue if there is one
+function sendNextPostInQueue() {
+    const nextPostAction = postQueue[0];
+    if (nextPostAction) {
+        nextPostAction();
+    }
+}
+
 export function createPost(post, doLoadPost, success, error) {
     Client.createPost(post,
         (data) => {

webapp/components/create_comment.jsx

@@ -196,10 +196,7 @@ export default class CreateComment extends React.Component {
 
         GlobalActions.emitUserCommentedEvent(post);
 
-        PostActions.createPost(post, false,
+        PostActions.queuePost(post, false, null,
-            () => {
-                // DO nothing.
-            },
             (err) => {
                 if (err.id === 'api.post.create_post.root_id.app_error') {
                     this.showPostDeletedModal();

webapp/components/create_post.jsx

@@ -161,10 +161,7 @@ export default class CreatePost extends React.Component {
 
         GlobalActions.emitUserPostedEvent(post);
 
-        PostActions.createPost(post, false,
+        PostActions.queuePost(post, false, null,
-            () => {
-                // DO nothing.
-            },
             (err) => {
                 if (err.id === 'api.post.create_post.root_id.app_error') {
                     // this should never actually happen since you can't reply from this textbox

webapp/components/post_view/components/pending_post_options.jsx

@@ -3,7 +3,7 @@
 
 import PostStore from 'stores/post_store.jsx';
 
-import {createPost} from 'actions/post_actions.jsx';
+import {queuePost} from 'actions/post_actions.jsx';
 
 import Constants from 'utils/constants.jsx';
 
@@ -22,10 +22,7 @@ export default class PendingPostOptions extends React.Component {
         e.preventDefault();
 
         var post = this.props.post;
-        createPost(post, true,
+        queuePost(post, true, null,
-            () => {
-                // DO nothing.
-            },
             (err) => {
                 if (err.id === 'api.post.create_post.root_id.app_error') {
                     this.showPostDeletedModal();

webapp/components/rhs_thread.jsx

@@ -332,10 +332,12 @@ export default class RhsThread extends React.Component {
                                         status = this.state.statuses[p.id] || 'offline';
                                     }
 
+                                    const keyPrefix = comPost.id ? comPost.id : comPost.pending_post_id;
+
                                     return (
                                         <Comment
                                             ref={comPost.id}
-                                            key={comPost.id + 'commentKey'}
+                                            key={keyPrefix + 'commentKey'}
                                             post={comPost}
                                             user={p}
                                             currentUser={this.props.currentUser}