add loading state for message send

Author: Dan Carbonell

examples/NativeMessaging/ios/Podfile.lock

@@ -56,7 +56,7 @@ PODS:
     - React-cxxreact (= 0.60.5)
     - React-jsi (= 0.60.5)
   - React-jsinspector (0.60.5)
-  - react-native-document-picker (3.3.3):
+  - react-native-document-picker (3.5.2):
     - React
   - react-native-image-picker (1.1.0):
     - React
@@ -87,7 +87,7 @@ PODS:
     - React-Core (= 0.60.5)
   - RNGestureHandler (1.6.1):
     - React
-  - RNReanimated (1.8.0):
+  - RNReanimated (1.9.0):
     - React
   - yoga (0.60.5.React)
 
@@ -189,7 +189,7 @@ SPEC CHECKSUMS:
   React-jsi: 4d8c9efb6312a9725b18d6fc818ffc103f60fec2
   React-jsiexecutor: 90ad2f9db09513fc763bc757fdc3c4ff8bde2a30
   React-jsinspector: e08662d1bf5b129a3d556eb9ea343a3f40353ae4
-  react-native-document-picker: dd96ce05bf1453b110d7a3912097bf6d298d2cb6
+  react-native-document-picker: 3026780fc04e7ad27534a0f35d5daefb550aa03a
   react-native-image-picker: 7a85cf7b0a53845f03ae52fb4592a2748ded069b
   react-native-netinfo: ddaca8bbb9e6e914b1a23787ccb879bc642931c9
   React-RCTActionSheet: b0f1ea83f4bf75fb966eae9bfc47b78c8d3efd90
@@ -203,9 +203,9 @@ SPEC CHECKSUMS:
   React-RCTVibration: 2105b2e0e2b66a6408fc69a46c8a7fb5b2fdade0
   React-RCTWebSocket: cd932a16b7214898b6b7f788c8bddb3637246ac4
   RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
-  RNReanimated: 955cf4068714003d2f1a6e2bae3fb1118f359aff
+  RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
   yoga: 312528f5bbbba37b4dcea5ef00e8b4033fdd9411
 
 PODFILE CHECKSUM: 065a6a4c98f1b2dac9e014ba39d9e216c45e149f
 
-COCOAPODS: 1.8.4
+COCOAPODS: 1.9.3

native-package/yarn.lock

@@ -6266,10 +6266,10 @@ stream-browserify@^2.0.1:
     inherits "~2.0.1"
     readable-stream "^2.0.2"
 
-[email protected].2:
-  version "0.12.2"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-0.12.2.tgz#130f1416cff05dceb6bd6b0603f62dd954c91a0b"
-  integrity sha512-dgnUXgjNlA0WjmzsPHu0lDH/9blIv3JrwG9P6HpnSppEFddoK2lvq0Q7KrC+YTH1xBA68rYM9VT1Mgy2nqahQQ==
+[email protected].3:
+  version "0.12.3"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-0.12.3.tgz#d180d51a1661d578dbb6253791fa59dc23f71b6e"
+  integrity sha512-/uE95FKsct9jghHw29JVLVZxlq/IodQOjES29aIJh3XfqKyOS9MPtu/wKJpBPDGpxrr2Xc+H8XU0Ocs3UgjMZA==
   dependencies:
     "@babel/runtime" "^7.1.2"
     "@stream-io/react-native-simple-markdown" "^1.1.3"

src/components/AutoCompleteInput.js

@@ -41,7 +41,6 @@ class AutoCompleteInput extends React.PureComponent {
     super(props);
 
     this.state = {
-      text: props.value,
       selectionStart: 0,
       selectionEnd: 0,
       currentTrigger: null,
@@ -52,7 +51,6 @@ class AutoCompleteInput extends React.PureComponent {
 
   componentDidUpdate(prevProps) {
     if (prevProps.value !== this.props.value) {
-      this.setState({ text: this.props.value });
       this.handleChange(this.props.value, true);
     }
   }
@@ -77,7 +75,7 @@ class AutoCompleteInput extends React.PureComponent {
     const triggers = this.props.triggerSettings;
     await triggers[this.state.currentTrigger].dataProvider(
       q,
-      this.state.text,
+      this.props.value,
       (data, query) => {
         // Make sure that the result is still relevant for current query
         if (this.state.currentTokenForSuggestions !== query) {
@@ -109,8 +107,8 @@ class AutoCompleteInput extends React.PureComponent {
   };
 
   onSelectSuggestion = (item) => {
-    const { text, currentTrigger } = this.state;
-    const { selectionEnd } = this.state;
+    const { value: text } = this.props;
+    const { currentTrigger, selectionEnd } = this.state;
     const triggers = this.props.triggerSettings;
     const newToken = triggers[currentTrigger].output(item);
     // const { onChange, trigger } = this.props;
@@ -218,7 +216,7 @@ class AutoCompleteInput extends React.PureComponent {
   handleSuggestions = (text) => {
     // react native is not consistent in order of execution of onSelectionChange and onTextChange
     // with android and iOS. onSelectionChange gets executed first on iOS (which is ideal for our scenario)
-    // Although on android, this order is reveresed. So need to add following 0 timeout to make sure that
+    // Although on android, this order is reversed. So need to add following 0 timeout to make sure that
     // onSelectionChange is executed first before we proceed with handleSuggestions.
     setTimeout(() => {
       const { selectionEnd: selectionEnd } = this.state;
@@ -236,7 +234,7 @@ class AutoCompleteInput extends React.PureComponent {
   };
 
   render() {
-    const { t } = this.props;
+    const { t, value } = this.props;
 
     return (
       <InputBox
@@ -245,7 +243,7 @@ class AutoCompleteInput extends React.PureComponent {
         onChangeText={(text) => {
           this.handleChange(text);
         }}
-        value={this.state.text}
+        value={value}
         onSelectionChange={this.handleSelectionChange}
         multiline
         {...this.props.additionalTextInputProps}

src/components/MessageInput.js

@@ -128,7 +128,7 @@ class MessageInput extends PureComponent {
       props.editing,
       props.initialValue,
     );
-    this.state = { ...state };
+    this.state = { ...state, sending: false };
   }
 
   static themePath = 'messageInput';
@@ -405,7 +405,14 @@ class MessageInput extends PureComponent {
     return false;
   };
 
-  sendMessage = () => {
+  sendMessage = async () => {
+    if (this.state.sending) return;
+
+    const { text } = this.state;
+    await this.setState({ sending: true, text: '' }, () =>
+      this.inputBox.clear(),
+    );
+
     const attachments = [];
     for (const id of this.state.imageOrder) {
       const image = this.state.imageUploads[id];
@@ -414,7 +421,7 @@ class MessageInput extends PureComponent {
       }
       if (image.state === FileState.UPLOADING) {
         // TODO: show error to user that they should wait until image is uploaded
-        return;
+        return this.setState({ sending: false });
       }
       attachments.push({
         type: 'image',
@@ -430,7 +437,7 @@ class MessageInput extends PureComponent {
       }
       if (upload.state === FileState.UPLOADING) {
         // TODO: show error to user that they should wait until image is uploaded
-        return;
+        return this.setState({ sending: false });
       }
       attachments.push({
         type: 'file',
@@ -442,12 +449,14 @@ class MessageInput extends PureComponent {
     }
 
     // Disallow sending message if its empty.
-    if (!this.state.text && attachments.length === 0) return;
+    if (!text && attachments.length === 0) {
+      return this.setState({ sending: false });
+    }
 
     if (this.props.editing) {
       const updatedMessage = { ...this.props.editing };
 
-      updatedMessage.text = this.state.text;
+      updatedMessage.text = text;
       updatedMessage.attachments = attachments;
       updatedMessage.mentioned_users = this.state.mentioned_users.map(
         (mu) => mu.id,
@@ -459,24 +468,29 @@ class MessageInput extends PureComponent {
         .editMessage(updatedMessage)
         .then(this.props.clearEditingState);
       logChatPromiseExecution(updateMessagePromise, 'update message');
+
+      this.setState({ sending: false });
     } else {
       try {
-        this.props.sendMessage({
-          text: this.state.text,
+        await this.props.sendMessage({
+          text,
           parent: this.props.parent,
           mentioned_users: uniq(this.state.mentioned_users),
           attachments,
         });
+
         this.setState({
           text: '',
           imageUploads: Immutable({}),
           imageOrder: Immutable([]),
           fileUploads: Immutable({}),
           fileOrder: Immutable([]),
           mentioned_users: [],
+          sending: false,
         });
       } catch (err) {
-        console.log('Fialed');
+        this.setState({ sending: false, text });
+        console.log('Failed');
       }
     }
   };
@@ -719,6 +733,7 @@ class MessageInput extends PureComponent {
   };
 
   onChangeText = (text) => {
+    if (this.state.sending) return;
     this.setState({ text });
 
     if (text) {
@@ -898,7 +913,9 @@ class MessageInput extends PureComponent {
                 title={t('Send message')}
                 sendMessage={this.sendMessage}
                 editing={this.props.editing}
-                disabled={disabled || !this.isValidMessage()}
+                disabled={
+                  disabled || this.state.sending || !this.isValidMessage()
+                }
               />
             </>
           )}