Redesign direct messages column (#9022)

app/javascript/mastodon/features/direct_timeline/components/conversation.js

@@ -2,13 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import StatusContent from '../../../components/status_content';
-import RelativeTimestamp from '../../../components/relative_timestamp';
-import DisplayName from '../../../components/display_name';
-import Avatar from '../../../components/avatar';
-import AttachmentList from '../../../components/attachment_list';
-import { HotKeys } from 'react-hotkeys';
-import classNames from 'classnames';
+import StatusContainer from '../../../containers/status_container';
 
 export default class Conversation extends ImmutablePureComponent {
 
@@ -19,7 +13,7 @@ export default class Conversation extends ImmutablePureComponent {
   static propTypes = {
     conversationId: PropTypes.string.isRequired,
     accounts: ImmutablePropTypes.list.isRequired,
-    lastStatus: ImmutablePropTypes.map.isRequired,
+    lastStatusId: PropTypes.string,
     unread:PropTypes.bool.isRequired,
     onMoveUp: PropTypes.func,
     onMoveDown: PropTypes.func,
@@ -31,13 +25,13 @@ export default class Conversation extends ImmutablePureComponent {
       return;
     }
 
-    const { lastStatus, unread, markRead } = this.props;
+    const { lastStatusId, unread, markRead } = this.props;
 
     if (unread) {
       markRead();
     }
 
-    this.context.router.history.push(`/statuses/${lastStatus.get('id')}`);
+    this.context.router.history.push(`/statuses/${lastStatusId}`);
   }
 
   handleHotkeyMoveUp = () => {
@@ -49,44 +43,20 @@ export default class Conversation extends ImmutablePureComponent {
   }
 
   render () {
-    const { accounts, lastStatus, lastAccount, unread } = this.props;
+    const { accounts, lastStatusId, unread } = this.props;
 
-    if (lastStatus === null) {
+    if (lastStatusId === null) {
       return null;
     }
 
-    const handlers = {
-      moveDown: this.handleHotkeyMoveDown,
-      moveUp: this.handleHotkeyMoveUp,
-      open: this.handleClick,
-    };
-
-    let media;
-
-    if (lastStatus.get('media_attachments').size > 0) {
-      media = <AttachmentList compact media={lastStatus.get('media_attachments')} />;
-    }
-
     return (
-      <HotKeys handlers={handlers}>
-        <div className={classNames('conversation', 'focusable', { 'conversation--unread': unread })} tabIndex='0' onClick={this.handleClick} role='button'>
-          <div className='conversation__header'>
-            <div className='conversation__avatars'>
-              <div>{accounts.map(account => <Avatar key={account.get('id')} size={36} account={account} />)}</div>
-            </div>
-
-            <div className='conversation__time'>
-              <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
-              <br />
-              <DisplayName account={lastAccount} withAcct={false} />
-            </div>
-          </div>
-
-          <StatusContent status={lastStatus} onClick={this.handleClick} />
-
-          {media}
-        </div>
-      </HotKeys>
+      <StatusContainer
+        id={lastStatusId}
+        unread={unread}
+        otherAccounts={accounts}
+        onMoveUp={this.handleHotkeyMoveUp}
+        onMoveDown={this.handleHotkeyMoveDown}
+      />
     );
   }
 

app/javascript/mastodon/features/direct_timeline/containers/conversation_container.js

@@ -4,13 +4,11 @@ import { markConversationRead } from '../../../actions/conversations';
 
 const mapStateToProps = (state, { conversationId }) => {
   const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
-  const lastStatus   = state.getIn(['statuses', conversation.get('last_status')], null);
 
   return {
     accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
     unread: conversation.get('unread'),
-    lastStatus,
-    lastAccount: lastStatus === null ? null : state.getIn(['accounts', lastStatus.get('account')], null),
+    lastStatusId: conversation.get('last_status', null),
   };
 };