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.

This is similar to the webapp logic in [1].

[1] /static/js/echo.js:160

Fixes: zulip#3800

Author: agrawal-d

src/compose/ComposeBox.js

@@ -14,6 +14,7 @@ import type {
   UserOrBot,
   Dispatch,
   Dimensions,
+  CaughtUp,
 } from '../types';
 import { connect } from '../react-redux';
 import {
@@ -39,6 +40,7 @@ import {
   getSession,
   getLastMessageTopic,
   getActiveUsersByEmail,
+  getCaughtUpForNarrow,
 } from '../selectors';
 import {
   getIsActiveStreamSubscribed,
@@ -59,6 +61,7 @@ type SelectorProps = {|
   isSubscribed: boolean,
   draft: string,
   lastMessageTopic: string,
+  caughtUp: CaughtUp,
 |};
 
 type Props = $ReadOnly<{|
@@ -242,9 +245,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('Failed to send message', 'Error');
+      return;
+    }
+
     dispatch(addToOutbox(this.getDestinationNarrow(), message));
 
     this.setMessageInputValue('');
@@ -436,4 +444,5 @@ export default connect<SelectorProps, _, _>((state, props) => ({
   isSubscribed: getIsActiveStreamSubscribed(state, props.narrow),
   draft: getDraftForNarrow(state, props.narrow),
   lastMessageTopic: getLastMessageTopic(state, props.narrow),
+  caughtUp: getCaughtUpForNarrow(state, props.narrow),
 }))(ComposeBox);