Fix mobile dm compose

cypress/integration/messages_spec.js

@@ -158,3 +158,62 @@ describe('clearing messages tab', () => {
     cy.get('[data-cy="unread-badge-0"]').should('be.visible');
   });
 });
+
+describe('sending a message from user profile', () => {
+  beforeEach(() => {
+    cy.auth(user.id).then(() => cy.visit('/users/bryn'));
+  });
+
+  const dmButton = () => cy.get('[data-cy="send-dm-button"]');
+  const stagedDMPills = () => cy.get('[data-cy="selected-users-pills"]');
+  const chatInput = () => cy.get('[data-cy="chat-input"]');
+  const sendButton = () => cy.get('[data-cy="chat-input-send-button"]');
+
+  it('sends a direct message from the user profile on desktop', () => {
+    dmButton()
+      .should('be.visible')
+      .click();
+    cy.url('eq', 'http://localhost:3000/messages/new');
+    cy.get('[data-cy="unread-dm-list-item"]').should($p => {
+      expect($p).to.have.length(1);
+    });
+    cy.get('[data-cy="dm-list-item"]').should($p => {
+      expect($p).to.have.length(1);
+    });
+    stagedDMPills()
+      .should('be.visible')
+      .contains('Bryn');
+    chatInput().type('New message');
+    sendButton().click();
+    cy.get('[data-cy="unread-dm-list-item"]').should($p => {
+      expect($p).to.have.length(1);
+    });
+    cy.get('[data-cy="dm-list-item"]').should($p => {
+      expect($p).to.have.length(2);
+    });
+  });
+
+  it('sends a direct message from the user profile on mobile', () => {
+    cy.viewport('iphone-6');
+    dmButton()
+      .should('be.visible')
+      .click();
+    cy.url('eq', 'http://localhost:3000/messages/new');
+    stagedDMPills()
+      .should('be.visible')
+      .contains('Bryn');
+    chatInput().type('New message');
+    sendButton().click();
+    cy.contains('Bryn Jackson');
+    cy.contains('@bryn');
+    cy.contains('New message');
+    cy.get('[data-cy="titlebar-back"]').click();
+    cy.url('eq', 'http://localhost:3000/messages');
+    cy.get('[data-cy="unread-dm-list-item"]').should($p => {
+      expect($p).to.have.length(1);
+    });
+    cy.get('[data-cy="dm-list-item"]').should($p => {
+      expect($p).to.have.length(2);
+    });
+  });
+});

src/routes.js

@@ -267,7 +267,6 @@ class Routes extends React.Component<Props> {
 
                 <Route path="/login" component={LoginFallback} />
                 <Route path="/explore" component={Explore} />
-                <Route path="/messages/new" component={MessagesFallback} />
                 <Route
                   path="/messages/:threadId"
                   component={MessagesFallback}

src/views/directMessages/containers/index.js

@@ -19,14 +19,6 @@ type State = {
 };
 
 class DirectMessages extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props);
-
-    this.state = {
-      activeThreadId: props.match.params.threadId,
-    };
-  }
-
   componentDidUpdate(prevProps: Props) {
     const curr = this.props;
     if (prevProps.match.params.threadId !== curr.match.params.threadId) {
@@ -35,17 +27,15 @@ class DirectMessages extends React.Component<Props, State> {
       } else {
         track(events.DIRECT_MESSAGE_THREAD_VIEWED);
       }
-
-      this.setState({ activeThreadId: curr.match.params.threadId });
     }
   }
 
   render() {
     const { match } = this.props;
-    const { activeThreadId } = this.state;
 
-    const isComposing = match.params.threadId === 'new';
-    const isViewingThread = !!activeThreadId;
+    const activeThreadId = match.params.threadId;
+    const isComposing = activeThreadId === 'new';
+    const isViewingThread = !isComposing && !!activeThreadId;
 
     return (
       <View>
@@ -67,16 +57,16 @@ class DirectMessages extends React.Component<Props, State> {
           <ThreadsList activeThreadId={activeThreadId} />
         </MessagesList>
 
-        {activeThreadId ? (
+        {isViewingThread ? (
           <ExistingThread
             id={activeThreadId}
             match={match}
-            hideOnMobile={!(isComposing || isViewingThread)}
+            hideOnMobile={isComposing}
           />
         ) : (
           <NewThread
             match={match}
-            hideOnMobile={!(isComposing || isViewingThread)}
+            hideOnMobile={isViewingThread || !activeThreadId}
           />
         )}
       </View>

src/views/directMessages/containers/newThread.js

@@ -739,7 +739,7 @@ class NewThread extends React.Component<Props, State> {
         <ComposerInputWrapper>
           {// if users have been selected, show them as pills
           selectedUsersForNewThread.length > 0 && (
-            <SelectedUsersPills>
+            <SelectedUsersPills data-cy="selected-users-pills">
               {selectedUsersForNewThread.map(user => {
                 return (
                   <Pill

src/views/titlebar/index.js

@@ -16,9 +16,13 @@ const TextHeading = ({ title, subtitle }) => (
 
 class Titlebar extends Component {
   handleBack = () => {
-    const { history } = this.props;
+    const { history, backRoute } = this.props;
     const length = history.length;
 
+    if (backRoute) {
+      return history.push(this.props.backRoute);
+    }
+
     /*
       We don't have a reliable way to know exactly where a user should navigate
       to when they hit the back button. For example, suppose you see a link
@@ -37,11 +41,7 @@ class Titlebar extends Component {
       we can make good assumptions (i.e. if a user lands directly on a channel
       page, the back button can take them to the community for that channel).
     */
-    if (length > 3) {
-      history.goBack();
-    } else {
-      history.push(this.props.backRoute);
-    }
+    return history.goBack();
   };
 
   render() {
@@ -68,6 +68,7 @@ class Titlebar extends Component {
             glyph="view-back"
             color="text.reverse"
             onClick={this.handleBack}
+            dataCy="titlebar-back"
           />
         ) : hasChildren ? (
           children

src/views/user/index.js

@@ -188,7 +188,10 @@ class UserView extends React.Component<Props, State> {
 
               {currentUser && user.id !== currentUser.id && (
                 <React.Fragment>
-                  <LoginButton onClick={() => this.initMessage(user)}>
+                  <LoginButton
+                    dataCy={'send-dm-button'}
+                    onClick={() => this.initMessage(user)}
+                  >
                     Message {user.name}
                   </LoginButton>
                   <TextButton onClick={this.initReport}>Report</TextButton>