Add error to RHS reply box for messages > 4000 chars, consistent with create post and edit post errors (#4871)

* functionality

* CSS updates

* cleanup

* moved message length checks to Textbox component

* cleanup

1 files changed, 8 insertions, 15 deletions

diff --git a/webapp/components/edit_post_modal.jsx b/webapp/components/edit_post_modal.jsx
index 1617d9f65..5f312170f 100644
--- a/webapp/components/edit_post_modal.jsx
+++ b/webapp/components/edit_post_modal.jsx
@@ -38,6 +38,7 @@ export default class EditPostModal extends React.Component {
         this.onModalShown = this.onModalShown.bind(this);
         this.onModalHide = this.onModalHide.bind(this);
         this.onModalKeyDown = this.onModalKeyDown.bind(this);
+        this.handlePostError = this.handlePostError.bind(this);
 
         this.state = {
             editText: '',
@@ -52,6 +53,12 @@ export default class EditPostModal extends React.Component {
         };
     }
 
+    handlePostError(postError) {
+        if (this.state.postError !== postError) {
+            this.setState({postError});
+        }
+    }
+
     handleEdit() {
         const updatedPost = {
             message: this.state.editText,
@@ -103,21 +110,6 @@ export default class EditPostModal extends React.Component {
         this.setState({
             editText: message
         });
-
-        if (message.length > Constants.CHARACTER_LIMIT) {
-            const errorMessage = (
-                <FormattedMessage
-                    id='create_post.error_message'
-                    defaultMessage='Your message is too long. Character count: {length}/{limit}'
-                    values={{
-                        length: message.length,
-                        limit: Constants.CHARACTER_LIMIT
-                    }}
-                />);
-            this.setState({postError: errorMessage});
-        } else {
-            this.setState({postError: ''});
-        }
     }
 
     handleEditKeyPress(e) {
@@ -262,6 +254,7 @@ export default class EditPostModal extends React.Component {
                                 onChange={this.handleChange}
                                 onKeyPress={this.handleEditKeyPress}
                                 onKeyDown={this.handleKeyDown}
+                                handlePostError={this.handlePostError}
                                 value={this.state.editText}
                                 channelId={this.state.channel_id}
                                 createMessage={Utils.localizeMessage('edit_post.editPost', 'Edit the post...')}