compose box: Show error on sending message when not caught up.

Check if we are caught up in the current narrow, and if so, show an
error when trying to send a message asking the user to try again
after some time.

This prevents the user from possibly responding to a very old
message when the messages after it have not been loaded yet - this
can lead to the reply being out of context without the sender
realizing it.

Fixes: zulip#3800

Author: agrawal-d

src/compose/ComposeBox.js

@@ -14,8 +14,11 @@ import type {
   UserOrBot,
   Dispatch,
   Dimensions,
+  CaughtUp,
+  GetText,
 } from '../types';
 import { connect } from '../react-redux';
+import { withGetText } from '../boot/TranslationProvider';
 import {
   addToOutbox,
   draftUpdate,
@@ -39,6 +42,7 @@ import {
   getSession,
   getLastMessageTopic,
   getActiveUsersByEmail,
+  getCaughtUpForNarrow,
 } from '../selectors';
 import {
   getIsActiveStreamSubscribed,
@@ -59,6 +63,7 @@ type SelectorProps = {|
   isSubscribed: boolean,
   draft: string,
   lastMessageTopic: string,
+  caughtUp: CaughtUp,
 |};
 
 type Props = $ReadOnly<{|
@@ -68,6 +73,9 @@ type Props = $ReadOnly<{|
 
   dispatch: Dispatch,
   ...SelectorProps,
+
+  // From 'withGetText'
+  _: GetText,
 |}>;
 
 type State = {|
@@ -242,9 +250,14 @@ class ComposeBox extends PureComponent<Props, State> {
   };
 
   handleSend = () => {
-    const { dispatch, narrow } = this.props;
+    const { dispatch, narrow, caughtUp, _ } = this.props;
     const { message } = this.state;
 
+    if (!caughtUp.newer) {
+      showErrorAlert(_('Please try again after some time'), _('Failed to send message'));
+      return;
+    }
+
     dispatch(addToOutbox(this.getDestinationNarrow(), message));
 
     this.setMessageInputValue('');
@@ -436,4 +449,5 @@ export default connect<SelectorProps, _, _>((state, props) => ({
   isSubscribed: getIsActiveStreamSubscribed(state, props.narrow),
   draft: getDraftForNarrow(state, props.narrow),
   lastMessageTopic: getLastMessageTopic(state, props.narrow),
-}))(ComposeBox);
+  caughtUp: getCaughtUpForNarrow(state, props.narrow),
+}))(withGetText(ComposeBox));

static/translations/messages_en.json

@@ -213,6 +213,7 @@
   "Narrow": "Narrow",
   "Sending Message...": "Sending Message...",
   "Failed to send message": "Failed to send message",
+  "Please try again after some time": "Please try again after some time",
   "Message sent": "Message sent",
   "What's your status?": "What's your status?",
   "📅 In a meeting": "📅 In a meeting",