From e2031de0ab647a12288d22e89d33906905e33971 Mon Sep 17 00:00:00 2001
From: Devin Binnie <52460000+devinbinnie@users.noreply.github.com>
Date: Thu, 5 Sep 2019 09:12:21 -0400
Subject: [PATCH] [MM-18172] Added state for message length such that alerts
 for long length aren't fired too often (#3218)

* [MM-18172] Added state for message length such that alerts for long length aren't fired too often

* Added a test

* Naming change
---
 .../post_textbox/post_textbox.test.js         | 22 +++++++++++++
 .../post_textbox/post_textbox_base.js         | 33 +++++++++++--------
 2 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/app/components/post_textbox/post_textbox.test.js b/app/components/post_textbox/post_textbox.test.js
index 7e3f8db80..24e17cf7b 100644
--- a/app/components/post_textbox/post_textbox.test.js
+++ b/app/components/post_textbox/post_textbox.test.js
@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
+import {Alert} from 'react-native';
 import assert from 'assert';
 import {shallowWithIntl} from 'test/intl-test-helper';
 
@@ -14,6 +15,12 @@ import PostTextbox from './post_textbox.ios';
 
 jest.mock('NativeEventEmitter');
 
+jest.mock('Alert', () => {
+    return {
+        alert: jest.fn(),
+    };
+});
+
 describe('PostTextBox', () => {
     const baseProps = {
         actions: {
@@ -91,6 +98,21 @@ describe('PostTextBox', () => {
         expect(baseProps.actions.handlePostDraftChanged).toHaveBeenCalledTimes(1);
     });
 
+    test('should not send multiple alerts when message is too long', () => {
+        const wrapper = shallowWithIntl(
+            <PostTextbox {...baseProps}/>
+        );
+
+        const instance = wrapper.instance();
+        const longString = [...Array(baseProps.maxMessageLength + 2).keys()].map(() => Math.random().toString(36).slice(0, 1)).join('');
+
+        instance.handleTextChange(longString);
+        instance.handleTextChange(longString.slice(1));
+
+        expect(Alert.alert).toBeCalled();
+        expect(Alert.alert).toHaveBeenCalledTimes(1);
+    });
+
     test('should return correct @all (same for @channel)', () => {
         for (const data of [
             {
diff --git a/app/components/post_textbox/post_textbox_base.js b/app/components/post_textbox/post_textbox_base.js
index cdae4f287..dcb619c48 100644
--- a/app/components/post_textbox/post_textbox_base.js
+++ b/app/components/post_textbox/post_textbox_base.js
@@ -106,6 +106,7 @@ export default class PostTextBoxBase extends PureComponent {
             top: 0,
             value: props.value,
             channelTimezoneCount: 0,
+            longMessageAlertShown: false,
         };
     }
 
@@ -192,19 +193,25 @@ export default class PostTextBoxBase extends PureComponent {
         const valueLength = value.trim().length;
 
         if (valueLength > maxMessageLength) {
-            Alert.alert(
-                intl.formatMessage({
-                    id: 'mobile.message_length.title',
-                    defaultMessage: 'Message Length',
-                }),
-                intl.formatMessage({
-                    id: 'mobile.message_length.message',
-                    defaultMessage: 'Your current message is too long. Current character count: {max}/{count}',
-                }, {
-                    max: maxMessageLength,
-                    count: valueLength,
-                })
-            );
+            // Check if component is already aware message is too long
+            if (!this.state.longMessageAlertShown) {
+                Alert.alert(
+                    intl.formatMessage({
+                        id: 'mobile.message_length.title',
+                        defaultMessage: 'Message Length',
+                    }),
+                    intl.formatMessage({
+                        id: 'mobile.message_length.message',
+                        defaultMessage: 'Your current message is too long. Current character count: {max}/{count}',
+                    }, {
+                        max: maxMessageLength,
+                        count: valueLength,
+                    })
+                );
+                this.setState({longMessageAlertShown: true});
+            }
+        } else if (this.state.longMessageAlertShown) {
+            this.setState({longMessageAlertShown: false});
         }
     };