Fix some bugs Tim reported in share-to-Android experience.

src/autocomplete/StreamAutocomplete.js

@@ -25,9 +25,13 @@ export default function StreamAutocomplete(props: Props): Node {
     [onAutocomplete],
   );
 
-  const matchingSubscriptions = subscriptions.filter(x =>
-    x.name.toLowerCase().startsWith(filter.toLowerCase()),
-  );
+  const isPrefixMatch = x => x.name.toLowerCase().startsWith(filter.toLowerCase());
+
+  const matchingSubscriptions = subscriptions
+    // Include it if there's a match anywhere in the name…
+    .filter(x => x.name.toLowerCase().includes(filter.toLowerCase()))
+    // …but show prefix matches at the top of the list.
+    .sort((a, b) => +isPrefixMatch(b) - +isPrefixMatch(a));
 
   if (matchingSubscriptions.length === 0) {
     return null;

src/common/ZulipButton.js

@@ -104,6 +104,7 @@ type Props = $ReadOnly<{|
   text: LocalizableText,
   secondary?: boolean,
   onPress: () => void | Promise<void>,
+  isPressHandledWhenDisabled?: boolean,
 |}>;
 
 /**
@@ -121,6 +122,8 @@ type Props = $ReadOnly<{|
  * @prop text - The button text
  * @prop [secondary] - Less prominent styling, the button is not as important.
  * @prop onPress - Event called on button press.
+ * @prop isPressHandledWhenDisabled - Whether `onPress` is used even when
+ *   `disabled` is true
  */
 export default function ZulipButton(props: Props): Node {
   const {
@@ -131,6 +134,7 @@ export default function ZulipButton(props: Props): Node {
     progress = false,
     onPress,
     Icon,
+    isPressHandledWhenDisabled = false,
   } = props;
   const frameStyle = [
     styles.frame,
@@ -162,7 +166,7 @@ export default function ZulipButton(props: Props): Node {
 
   return (
     <View style={frameStyle}>
-      <Touchable onPress={disabled ? undefined : onPress}>
+      <Touchable onPress={disabled && !isPressHandledWhenDisabled ? undefined : onPress}>
         <View style={styles.buttonContent}>
           {!!Icon && <Icon style={iconStyle} size={25} />}
           <Text style={textStyle}>

src/compose/ComposeBox.js

@@ -548,6 +548,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
                 // work.
                 !this.getCanSelectTopic() && { position: 'absolute', transform: [{ scale: 0 }] },
               ]}
+              autoCapitalize="none"
               underlineColorAndroid="transparent"
               placeholder="Topic"
               defaultValue={topic}

src/sharing/ShareToPm.js

@@ -3,6 +3,7 @@ import React from 'react';
 import type { Node, Context } from 'react';
 import { View, Modal } from 'react-native';
 
+import type { ValidationError } from './ShareWrapper';
 import type { RouteProp } from '../react-navigation';
 import type { SharingNavigationProp } from './SharingScreen';
 import type { GetText, UserId } from '../types';
@@ -54,15 +55,21 @@ export default class ShareToPm extends React.Component<Props, State> {
     this.setState({ choosingRecipients: false });
   };
 
-  isSendButtonEnabled: string => boolean = message => {
+  getValidationErrors: string => $ReadOnlyArray<ValidationError> = message => {
     const { selectedRecipients } = this.state;
     const { sharedData } = this.props.route.params;
 
-    if (sharedData.type === 'text') {
-      return message !== '' && selectedRecipients.length > 0;
+    const result = [];
+
+    if (selectedRecipients.length === 0) {
+      result.push('recipients-empty');
+    }
+
+    if (sharedData.type === 'text' && message === '') {
+      result.push('message-empty');
     }
 
-    return selectedRecipients.length > 0;
+    return result;
   };
 
   renderUsersPreview: () => Node = () => {
@@ -93,7 +100,7 @@ export default class ShareToPm extends React.Component<Props, State> {
 
     return (
       <ShareWrapper
-        isSendButtonEnabled={this.isSendButtonEnabled}
+        getValidationErrors={this.getValidationErrors}
         sharedData={sharedData}
         sendTo={sendTo}
       >

src/sharing/ShareToStream.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import type { ComponentType } from 'react';
 
+import type { ValidationError } from './ShareWrapper';
 import type { SharingNavigationProp } from './SharingScreen';
 import type { RouteProp } from '../react-navigation';
 import type { Dispatch, Subscription, Auth, GetText } from '../types';
@@ -77,33 +78,43 @@ class ShareToStreamInner extends React.Component<Props, State> {
   };
 
   handleStreamChange = stream => {
-    this.setState({ stream: stream.trim() });
+    this.setState({ stream });
   };
 
   handleTopicChange = topic => {
-    this.setState({ topic: topic.trim() });
+    this.setState({ topic });
   };
 
   handleStreamAutoComplete = (rawStream: string) => {
     // TODO: What is this for? (write down our assumptions)
     const stream = rawStream.split('**')[1];
-    this.setState({ stream: stream.trim(), isStreamFocused: false });
+    this.setState({ stream, isStreamFocused: false });
   };
 
   handleTopicAutoComplete = (topic: string) => {
-    this.setState({ topic: topic.trim() });
+    this.setState({ topic });
   };
 
-  isSendButtonEnabled = (message: string) => {
+  getValidationErrors: string => $ReadOnlyArray<ValidationError> = message => {
     const { mandatoryTopics } = this.props;
     const { stream, topic } = this.state;
     const { sharedData } = this.props.route.params;
 
-    if (sharedData.type !== 'text') {
-      return stream !== '' && (topic !== '' || !mandatoryTopics);
+    const result = [];
+
+    if (stream.trim() === '') {
+      result.push('stream-empty');
+    }
+
+    if (topic.trim() === '' && mandatoryTopics) {
+      result.push('mandatory-topic-empty');
+    }
+
+    if (sharedData.type === 'text' && message === '') {
+      result.push('message-empty');
     }
 
-    return stream !== '' && (topic !== '' || !mandatoryTopics) && message !== '';
+    return result;
   };
 
   render() {
@@ -115,7 +126,7 @@ class ShareToStreamInner extends React.Component<Props, State> {
     return (
       <ShareWrapper
         sharedData={sharedData}
-        isSendButtonEnabled={this.isSendButtonEnabled}
+        getValidationErrors={this.getValidationErrors}
         sendTo={sendTo}
       >
         <AnimatedScaleComponent visible={isStreamFocused}>
@@ -145,6 +156,7 @@ class ShareToStreamInner extends React.Component<Props, State> {
           onBlur={this.blurTopic}
           onChangeText={this.handleTopicChange}
           editable={stream !== ''}
+          autoCapitalize="none"
         />
       </ShareWrapper>
     );

src/sharing/ShareWrapper.js

@@ -13,7 +13,7 @@ import { Input, ZulipButton, ComponentWithOverlay } from '../common';
 import { TranslationContext } from '../boot/TranslationProvider';
 import * as NavigationService from '../nav/NavigationService';
 import { navigateBack, replaceWithChat } from '../nav/navActions';
-import { showToast } from '../utils/info';
+import { showToast, showErrorAlert } from '../utils/info';
 import { getAuth, getOwnUserId } from '../selectors';
 import { connect } from '../react-redux';
 import { streamNarrow, pmNarrowFromRecipients } from '../utils/narrow';
@@ -57,9 +57,15 @@ const styles = createStyleSheet({
   },
 });
 
+export type ValidationError =
+  | 'mandatory-topic-empty'
+  | 'stream-empty'
+  | 'recipients-empty'
+  | 'message-empty';
+
 type OuterProps = $ReadOnly<{|
   children: Node,
-  isSendButtonEnabled: (message: string) => boolean,
+  getValidationErrors: (message: string) => $ReadOnlyArray<ValidationError>,
   sendTo: SendTo,
   sharedData: SharedData,
 |}>;
@@ -115,9 +121,34 @@ class ShareWrapperInner extends React.Component<Props, State> {
    */
   handleSend = async () => {
     const _ = this.context;
-    const { auth, sendTo, sharedData } = this.props;
+    const { auth, sendTo, sharedData, getValidationErrors } = this.props;
     let messageToSend = this.state.message;
 
+    const validationErrors = getValidationErrors(messageToSend);
+
+    if (validationErrors.length > 0) {
+      const msg = validationErrors
+        .map(error => {
+          switch (error) {
+            case 'stream-empty':
+              return _('Please specify a stream.');
+            case 'mandatory-topic-empty':
+              return _('Please specify a topic.');
+            case 'recipients-empty':
+              return _('Please choose recipients.');
+            case 'message-empty':
+              return _('Message is empty.');
+            default:
+              ensureUnreachable(error);
+              throw new Error();
+          }
+        })
+        .join('\n\n');
+
+      showErrorAlert(_('Message not sent'), msg);
+      return;
+    }
+
     this.setSending();
     showToast(_('Sending Message...'));
     if (sharedData.type === 'file') {
@@ -217,7 +248,7 @@ class ShareWrapperInner extends React.Component<Props, State> {
   );
 
   render() {
-    const { children, isSendButtonEnabled, sharedData } = this.props;
+    const { children, getValidationErrors, sharedData } = this.props;
     const { message, sending } = this.state;
 
     return (
@@ -253,7 +284,8 @@ class ShareWrapperInner extends React.Component<Props, State> {
             onPress={this.handleSend}
             text="Send"
             progress={sending}
-            disabled={!isSendButtonEnabled(message)}
+            disabled={getValidationErrors(message).length > 0}
+            isPressHandledWhenDisabled
           />
         </View>
       </>

static/translations/messages_en.json

@@ -9,6 +9,9 @@
   "Something went wrong, and your message was not sent.": "Something went wrong, and your message was not sent.",
   "Message not sent": "Message not sent",
   "Please specify a topic.": "Please specify a topic.",
+  "Please specify a stream.": "Please specify a stream.",
+  "Please choose recipients.": "Please choose recipients.",
+  "Message is empty.": "Message is empty.",
   "Failed to connect to server: {realm}": "Failed to connect to server: {realm}",
   "{_}": "{_}",
   "Home": "Home",