Composebox cleanup

src/chat/ChatScreen.js

@@ -1,5 +1,5 @@
 /* @flow strict-local */
-import React from 'react';
+import React, { useCallback, useContext } from 'react';
 import type { Node } from 'react';
 import { useIsFocused } from '@react-navigation/native';
 
@@ -17,11 +17,17 @@ import InvalidNarrow from './InvalidNarrow';
 import { fetchMessagesInNarrow } from '../message/fetchActions';
 import ComposeBox from '../compose/ComposeBox';
 import UnreadNotice from './UnreadNotice';
-import { canSendToNarrow } from '../utils/narrow';
+import { canSendToNarrow, caseNarrowDefault, keyFromNarrow } from '../utils/narrow';
 import { getLoading, getSession } from '../directSelectors';
 import { getFetchingForNarrow } from './fetchingSelectors';
 import { getShownMessagesForNarrow, isNarrowValid as getIsNarrowValid } from './narrowsSelectors';
 import { getFirstUnreadIdInNarrow } from '../message/messageSelectors';
+import { getDraftForNarrow } from '../drafts/draftsSelectors';
+import { addToOutbox } from '../actions';
+import { getAuth, getCaughtUpForNarrow } from '../selectors';
+import { showErrorAlert } from '../utils/info';
+import { TranslationContext } from '../boot/TranslationProvider';
+import * as api from '../api';
 
 type Props = $ReadOnly<{|
   navigation: AppNavigationProp<'chat'>,
@@ -103,10 +109,13 @@ export default function ChatScreen(props: Props): Node {
   const { backgroundColor } = React.useContext(ThemeContext);
 
   const { narrow, editMessage } = route.params;
-  const setEditMessage = (value: EditMessage | null) =>
-    navigation.setParams({ editMessage: value });
+  const setEditMessage = useCallback(
+    (value: EditMessage | null) => navigation.setParams({ editMessage: value }),
+    [navigation],
+  );
 
   const isNarrowValid = useSelector(state => getIsNarrowValid(state, narrow));
+  const draft = useSelector(state => getDraftForNarrow(state, narrow));
 
   const {
     fetchError,
@@ -120,6 +129,43 @@ export default function ChatScreen(props: Props): Node {
   const sayNoMessages = haveNoMessages && !isFetching;
   const showComposeBox = canSendToNarrow(narrow) && !showMessagePlaceholders;
 
+  const auth = useSelector(getAuth);
+  const dispatch = useDispatch();
+  const caughtUp = useSelector(state => getCaughtUpForNarrow(state, narrow));
+  const _ = useContext(TranslationContext);
+
+  const sendCallback = useCallback(
+    (message: string, destinationNarrow: Narrow) => {
+      if (editMessage) {
+        const content = editMessage.content !== message ? message : undefined;
+        const subject = caseNarrowDefault(
+          destinationNarrow,
+          { topic: (stream, topic) => (topic !== editMessage.topic ? topic : undefined) },
+          () => undefined,
+        );
+
+        if (
+          (content !== undefined && content !== '')
+          || (subject !== undefined && subject !== '')
+        ) {
+          api.updateMessage(auth, { content, subject }, editMessage.id).catch(error => {
+            showErrorAlert(_('Failed to edit message'), error.message);
+          });
+        }
+
+        setEditMessage(null);
+      } else {
+        if (!caughtUp.newer) {
+          showErrorAlert(_('Failed to send message'));
+          return;
+        }
+
+        dispatch(addToOutbox(destinationNarrow, message));
+      }
+    },
+    [_, auth, caughtUp.newer, dispatch, editMessage, setEditMessage],
+  );
+
   return (
     <KeyboardAvoider style={[componentStyles.screen, { backgroundColor }]} behavior="padding">
       <ChatNavBar narrow={narrow} editMessage={editMessage} />
@@ -147,8 +193,12 @@ export default function ChatScreen(props: Props): Node {
       {showComposeBox && (
         <ComposeBox
           narrow={narrow}
-          editMessage={editMessage}
-          completeEditMessage={() => setEditMessage(null)}
+          isEditing={editMessage !== null}
+          initialTopic={editMessage ? editMessage.topic : undefined}
+          initialMessage={editMessage ? editMessage.content : draft}
+          onSend={sendCallback}
+          autoFocusMessage={editMessage !== null}
+          key={keyFromNarrow(narrow) + (editMessage?.id.toString() ?? 'noedit')}
         />
       )}
     </KeyboardAvoider>

src/compose/ComposeBox.js

@@ -15,11 +15,9 @@ import { ThemeContext } from '../styles';
 import type {
   Auth,
   Narrow,
-  EditMessage,
   InputSelection,
   UserOrBot,
   Dispatch,
-  CaughtUp,
   GetText,
   Subscription,
   Stream,
@@ -28,39 +26,33 @@ import type {
 } from '../types';
 import { connect } from '../react-redux';
 import { withGetText } from '../boot/TranslationProvider';
-import { addToOutbox, draftUpdate, sendTypingStart, sendTypingStop } from '../actions';
-import * as api from '../api';
+import { draftUpdate, sendTypingStart, sendTypingStop } from '../actions';
 import { FloatingActionButton, Input } from '../common';
-import { showErrorAlert, showToast } from '../utils/info';
+import { showToast } from '../utils/info';
 import { IconDone, IconSend } from '../common/Icons';
 import {
   isStreamNarrow,
   isStreamOrTopicNarrow,
+  isTopicNarrow,
   streamNameOfNarrow,
   topicNarrow,
+  topicOfNarrow,
 } from '../utils/narrow';
 import ComposeMenu from './ComposeMenu';
 import getComposeInputPlaceholder from './getComposeInputPlaceholder';
 import NotSubscribed from '../message/NotSubscribed';
 import AnnouncementOnly from '../message/AnnouncementOnly';
 import MentionWarnings from './MentionWarnings';
 
-import {
-  getAuth,
-  getIsAdmin,
-  getLastMessageTopic,
-  getCaughtUpForNarrow,
-  getStreamInNarrow,
-  getVideoChatProvider,
-} from '../selectors';
+import { getAuth, getIsAdmin, getStreamInNarrow, getVideoChatProvider } from '../selectors';
 import {
   getIsActiveStreamSubscribed,
   getIsActiveStreamAnnouncementOnly,
 } from '../subscriptions/subscriptionSelectors';
-import { getDraftForNarrow } from '../drafts/draftsSelectors';
 import TopicAutocomplete from '../autocomplete/TopicAutocomplete';
 import AutocompleteView from '../autocomplete/AutocompleteView';
 import { getAllUsersById, getOwnUserId } from '../users/userSelectors';
+import * as api from '../api';
 
 type SelectorProps = {|
   auth: Auth,
@@ -69,21 +61,35 @@ type SelectorProps = {|
   isAdmin: boolean,
   isAnnouncementOnly: boolean,
   isSubscribed: boolean,
-  draft: string,
-  lastMessageTopic: string,
-  caughtUp: CaughtUp,
   videoChatProvider: VideoChatProvider | null,
   stream: Subscription | {| ...Stream, in_home_view: boolean |},
 |};
 
 type OuterProps = $ReadOnly<{|
   narrow: Narrow,
-  editMessage: EditMessage | null,
-  completeEditMessage: () => void,
+
+  onSend: (string, Narrow) => void,
+
+  isEditing: boolean,
+
+  /** The contents of the message that the ComposeBox should contain when it's first rendered */
+  initialMessage?: string,
+  /** The topic of the message that the ComposeBox should contain when it's first rendered */
+  initialTopic?: string,
+
+  /** Whether the topic input box should auto-foucs when the component renders.
+   *
+   * Passed through to the TextInput's autofocus prop. */
+  autoFocusTopic?: boolean,
+  /** Whether the message input box should auto-foucs when the component renders.
+   *
+   * Passed through to the TextInput's autofocus prop. */
+  autoFocusMessage?: boolean,
 |}>;
 
 type Props = $ReadOnly<{|
   ...OuterProps,
+  ...SelectorProps,
 
   // From 'withGetText'
   _: GetText,
@@ -155,8 +161,10 @@ class ComposeBoxInner extends PureComponent<Props, State> {
     isFocused: false,
     isMenuExpanded: false,
     height: 20,
-    topic: this.props.lastMessageTopic,
-    message: this.props.draft,
+    topic:
+      this.props.initialTopic
+      ?? (isTopicNarrow(this.props.narrow) ? topicOfNarrow(this.props.narrow) : ''),
+    message: this.props.initialMessage ?? '',
     selection: { start: 0, end: 0 },
     numUploading: 0,
   };
@@ -174,8 +182,8 @@ class ComposeBoxInner extends PureComponent<Props, State> {
   };
 
   getCanSelectTopic = () => {
-    const { editMessage, narrow } = this.props;
-    if (editMessage) {
+    const { isEditing, narrow } = this.props;
+    if (isEditing) {
       return isStreamOrTopicNarrow(narrow);
     }
     if (!isStreamNarrow(narrow)) {
@@ -291,9 +299,11 @@ class ComposeBoxInner extends PureComponent<Props, State> {
 
   handleMessageChange = (message: string) => {
     this.setState({ message, isMenuExpanded: false });
-    const { dispatch, narrow } = this.props;
+    const { dispatch, isEditing, narrow } = this.props;
     dispatch(sendTypingStart(narrow));
-    dispatch(draftUpdate(narrow, message));
+    if (!isEditing) {
+      dispatch(draftUpdate(narrow, message));
+    }
   };
 
   // See JSDoc on 'onAutocomplete' in 'AutocompleteView.js'.
@@ -320,13 +330,11 @@ class ComposeBoxInner extends PureComponent<Props, State> {
   };
 
   handleMessageFocus = () => {
-    this.setState((state, { lastMessageTopic }) => ({
-      ...state,
-      topic: state.topic || lastMessageTopic,
+    this.setState({
       isMessageFocused: true,
       isFocused: true,
       isMenuExpanded: false,
-    }));
+    });
   };
 
   handleMessageBlur = () => {
@@ -362,8 +370,8 @@ class ComposeBoxInner extends PureComponent<Props, State> {
   };
 
   getDestinationNarrow = (): Narrow => {
-    const { narrow } = this.props;
-    if (isStreamNarrow(narrow)) {
+    const { narrow, isEditing } = this.props;
+    if (isStreamNarrow(narrow) || (isTopicNarrow(narrow) && isEditing)) {
       const streamName = streamNameOfNarrow(narrow);
       const topic = this.state.topic.trim();
       return topicNarrow(streamName, topic || '(no topic)');
@@ -372,15 +380,11 @@ class ComposeBoxInner extends PureComponent<Props, State> {
   };
 
   handleSend = () => {
-    const { dispatch, narrow, caughtUp, _ } = this.props;
+    const { dispatch } = this.props;
     const { message } = this.state;
+    const narrow = this.getDestinationNarrow();
 
-    if (!caughtUp.newer) {
-      showErrorAlert(_('Failed to send message'));
-      return;
-    }
-
-    dispatch(addToOutbox(this.getDestinationNarrow(), message));
+    this.props.onSend(message, narrow);
 
     this.setMessageInputValue('');
 
@@ -391,41 +395,6 @@ class ComposeBoxInner extends PureComponent<Props, State> {
     dispatch(sendTypingStop(narrow));
   };
 
-  handleEdit = () => {
-    const { auth, editMessage, completeEditMessage, _ } = this.props;
-    if (!editMessage) {
-      throw new Error('expected editMessage');
-    }
-    const { message, topic } = this.state;
-    const content = editMessage.content !== message ? message : undefined;
-    const subject = topic !== editMessage.topic ? topic : undefined;
-    if ((content !== undefined && content !== '') || (subject !== undefined && subject !== '')) {
-      api.updateMessage(auth, { content, subject }, editMessage.id).catch(error => {
-        showErrorAlert(_('Failed to edit message'), error.message);
-      });
-    }
-    completeEditMessage();
-    if (this.messageInputRef.current !== null) {
-      // `.current` is not type-checked; see definition.
-      this.messageInputRef.current.blur();
-    }
-  };
-
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.editMessage !== this.props.editMessage) {
-      const topic = nextProps.editMessage
-        ? nextProps.editMessage.topic
-        : nextProps.lastMessageTopic;
-      const message = nextProps.editMessage ? nextProps.editMessage.content : '';
-      this.setMessageInputValue(message);
-      this.setTopicInputValue(topic);
-      if (this.messageInputRef.current !== null) {
-        // `.current` is not type-checked; see definition.
-        this.messageInputRef.current.focus();
-      }
-    }
-  }
-
   inputMarginPadding = {
     paddingHorizontal: 8,
     paddingVertical: Platform.select({
@@ -477,7 +446,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
       ownUserId,
       narrow,
       allUsersById,
-      editMessage,
+      isEditing,
       insets,
       isAdmin,
       isAnnouncementOnly,
@@ -533,6 +502,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
                 underlineColorAndroid="transparent"
                 placeholder="Topic"
                 defaultValue={topic}
+                autoFocus={this.props.autoFocusTopic}
                 selectTextOnFocus
                 textInputRef={this.topicInputRef}
                 onChangeText={this.handleTopicChange}
@@ -550,6 +520,7 @@ class ComposeBoxInner extends PureComponent<Props, State> {
               underlineColorAndroid="transparent"
               placeholder={placeholder}
               defaultValue={message}
+              autoFocus={this.props.autoFocusMessage}
               textInputRef={this.messageInputRef}
               onBlur={this.handleMessageBlur}
               onChangeText={this.handleMessageChange}
@@ -561,10 +532,10 @@ class ComposeBoxInner extends PureComponent<Props, State> {
           <FloatingActionButton
             accessibilityLabel="Send message"
             style={this.styles.composeSendButton}
-            Icon={editMessage === null ? IconSend : IconDone}
+            Icon={isEditing ? IconDone : IconSend}
             size={32}
             disabled={message.trim().length === 0 || this.state.numUploading > 0}
-            onPress={editMessage === null ? this.handleSend : this.handleEdit}
+            onPress={this.handleSend}
           />
         </View>
       </View>
@@ -580,9 +551,6 @@ const ComposeBox: ComponentType<OuterProps> = compose(
     isAdmin: getIsAdmin(state),
     isAnnouncementOnly: getIsActiveStreamAnnouncementOnly(state, props.narrow),
     isSubscribed: getIsActiveStreamSubscribed(state, props.narrow),
-    draft: getDraftForNarrow(state, props.narrow),
-    lastMessageTopic: getLastMessageTopic(state, props.narrow),
-    caughtUp: getCaughtUpForNarrow(state, props.narrow),
     stream: getStreamInNarrow(state, props.narrow),
     videoChatProvider: getVideoChatProvider(state),
   })),