Move instances of Client.createPost() in components to an action (#4639)

* Move instances of Client.createPost() in components to an action

* update per review, waiting for more review and see if this is the right way

* update per code review

* update code

* remove comment per request

4 files changed, 68 insertions, 49 deletions

diff --git a/webapp/actions/post_actions.jsx b/webapp/actions/post_actions.jsx
index 4f861c909..736aef033 100644
--- a/webapp/actions/post_actions.jsx
+++ b/webapp/actions/post_actions.jsx
@@ -272,3 +272,37 @@ export function removeReaction(channelId, postId, emojiName) {
 
     AsyncClient.deleteReaction(channelId, reaction);
 }
+
+export function createPost(post, doLoadPost, success, error) {
+    Client.createPost(post,
+        (data) => {
+            if (doLoadPost) {
+                loadPosts(post.channel_id);
+            } else {
+                PostStore.removePendingPost(post.pending_post_id);
+            }
+
+            AppDispatcher.handleServerAction({
+                type: ActionTypes.RECEIVED_POST,
+                post: data
+            });
+
+            if (success) {
+                success(data);
+            }
+        },
+
+        (err) => {
+            if (err.id === 'api.post.create_post.root_id.app_error') {
+                PostStore.removePendingPost(post.pending_post_id);
+            } else {
+                post.state = Constants.POST_FAILED;
+                PostStore.updatePendingPost(post);
+            }
+
+            if (error) {
+                error(err);
+            }
+        }
+    );
+}
diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index e8378da2c..543aef202 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -4,7 +4,6 @@
 import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
-import Client from 'client/web_client.jsx';
 import EmojiStore from 'stores/emoji_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PostDeletedModal from './post_deleted_modal.jsx';
@@ -163,24 +162,16 @@ export default class CreateComment extends React.Component {
         post.create_at = time;
 
         GlobalActions.emitUserCommentedEvent(post);
-        Client.createPost(
-            post,
-            (data) => {
-                PostStore.removePendingPost(post.channel_id, post.pending_post_id);
-
-                AppDispatcher.handleServerAction({
-                    type: ActionTypes.RECEIVED_POST,
-                    post: data
-                });
+
+        PostActions.createPost(post, false,
+            () => {
+                // DO nothing.
             },
             (err) => {
                 if (err.id === 'api.post.create_post.root_id.app_error') {
                     this.showPostDeletedModal();
-
-                    PostStore.removePendingPost(post.channel_id, post.pending_post_id);
                 } else {
-                    post.state = Constants.POST_FAILED;
-                    PostStore.updatePendingPost(post);
+                    this.forceUpdate();
                 }
 
                 this.setState({
@@ -188,6 +179,18 @@ export default class CreateComment extends React.Component {
                 });
             }
         );
+
+        this.setState({
+            message: '',
+            submitting: false,
+            postError: null,
+            fileInfos: [],
+            serverError: null
+        });
+
+        const fasterThanHumanWillClick = 150;
+        const forceFocus = (Date.now() - this.state.lastBlurAt < fasterThanHumanWillClick);
+        this.focusTextbox(forceFocus);
     }
 
     handleSubmitReaction(isReaction) {
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index 2ba79af36..f2b0a7631 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -11,7 +11,6 @@ import TutorialTip from './tutorial/tutorial_tip.jsx';
 
 import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
-import Client from 'client/web_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import * as ChannelActions from 'actions/channel_actions.jsx';
@@ -158,24 +157,16 @@ export default class CreatePost extends React.Component {
 
         GlobalActions.emitUserPostedEvent(post);
 
-        Client.createPost(post,
-            (data) => {
-                PostStore.removePendingPost(post.pending_post_id);
-
-                AppDispatcher.handleServerAction({
-                    type: ActionTypes.RECEIVED_POST,
-                    post: data
-                });
+        PostActions.createPost(post, false,
+            () => {
+                // 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
                     this.showPostDeletedModal();
-
-                    PostStore.removePendingPost(post.pending_post_id);
                 } else {
-                    post.state = Constants.POST_FAILED;
-                    PostStore.updatePendingPost(post);
+                    this.forceUpdate();
                 }
 
                 this.setState({
diff --git a/webapp/components/post_view/components/pending_post_options.jsx b/webapp/components/post_view/components/pending_post_options.jsx
index 44f4794ef..d9f98e958 100644
--- a/webapp/components/post_view/components/pending_post_options.jsx
+++ b/webapp/components/post_view/components/pending_post_options.jsx
@@ -2,14 +2,10 @@
 // See License.txt for license information.
 
 import PostStore from 'stores/post_store.jsx';
-import ChannelStore from 'stores/channel_store.jsx';
 
-import {loadPosts} from 'actions/post_actions.jsx';
+import {createPost} from 'actions/post_actions.jsx';
 
-import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
-import Client from 'client/web_client.jsx';
 import Constants from 'utils/constants.jsx';
-const ActionTypes = Constants.ActionTypes;
 
 import {FormattedMessage} from 'react-intl';
 
@@ -26,25 +22,20 @@ export default class PendingPostOptions extends React.Component {
         e.preventDefault();
 
         var post = this.props.post;
-        Client.createPost(post,
-            (data) => {
-                loadPosts(post.channel_id);
-
-                var channel = ChannelStore.get(post.channel_id);
-                var member = ChannelStore.getMyMember(post.channel_id);
-                member.msg_count = channel.total_msg_count;
-                member.last_viewed_at = (new Date()).getTime();
-                ChannelStore.storeMyChannelMember(member);
+        createPost(post, true,
+            () => {
+                // DO nothing.
+            },
+            (err) => {
+                if (err.id === 'api.post.create_post.root_id.app_error') {
+                    this.showPostDeletedModal();
+                } else {
+                    this.forceUpdate();
+                }
 
-                AppDispatcher.handleServerAction({
-                    type: ActionTypes.RECEIVED_POST,
-                    post: data
+                this.setState({
+                    submitting: false
                 });
-            },
-            () => {
-                post.state = Constants.POST_FAILED;
-                PostStore.updatePendingPost(post);
-                this.forceUpdate();
             }
         );