Refactor conversations components in web UI (#28833)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

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

@@ -1,17 +1,24 @@
 import PropTypes from 'prop-types';
+import { useCallback } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Link, withRouter } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
 
+import { createSelector } from '@reduxjs/toolkit';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useDispatch, useSelector } from 'react-redux';
+
 
 import { HotKeys } from 'react-hotkeys';
 
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import { replyCompose } from 'mastodon/actions/compose';
+import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations';
+import { openModal } from 'mastodon/actions/modal';
+import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'mastodon/actions/statuses';
 import AttachmentList from 'mastodon/components/attachment_list';
 import AvatarComposite from 'mastodon/components/avatar_composite';
 import { IconButton } from 'mastodon/components/icon_button';
@@ -19,7 +26,7 @@ import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import StatusContent from 'mastodon/components/status_content';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 import { autoPlayGif } from 'mastodon/initial_state';
-import { WithRouterPropTypes } from 'mastodon/utils/react_router';
+import { makeGetStatus } from 'mastodon/selectors';
 
 const messages = defineMessages({
   more: { id: 'status.more', defaultMessage: 'More' },
@@ -29,25 +36,31 @@ const messages = defineMessages({
   delete: { id: 'conversation.delete', defaultMessage: 'Delete conversation' },
   muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
   unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
+  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
+  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
 });
 
-class Conversation extends ImmutablePureComponent {
+const getAccounts = createSelector(
+  (state) => state.get('accounts'),
+  (_, accountIds) => accountIds,
+  (accounts, accountIds) =>
+    accountIds.map(id => accounts.get(id))
+);
 
-  static propTypes = {
+const getStatus = makeGetStatus();
-    conversationId: PropTypes.string.isRequired,
-    accounts: ImmutablePropTypes.list.isRequired,
-    lastStatus: ImmutablePropTypes.map,
-    unread:PropTypes.bool.isRequired,
-    scrollKey: PropTypes.string,
-    onMoveUp: PropTypes.func,
-    onMoveDown: PropTypes.func,
-    markRead: PropTypes.func.isRequired,
-    delete: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    ...WithRouterPropTypes,
-  };
 
-  handleMouseEnter = ({ currentTarget }) => {
+export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown }) => {
+  const id = conversation.get('id');
+  const unread = conversation.get('unread');
+  const lastStatusId = conversation.get('last_status');
+  const accountIds = conversation.get('accounts');
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const lastStatus = useSelector(state => getStatus(state, { id: lastStatusId }));
+  const accounts = useSelector(state => getAccounts(state, accountIds));
+
+  const handleMouseEnter = useCallback(({ currentTarget }) => {
     if (autoPlayGif) {
       return;
     }
@@ -58,9 +71,9 @@ class Conversation extends ImmutablePureComponent {
       let emoji = emojis[i];
       emoji.src = emoji.getAttribute('data-original');
     }
-  };
+  }, []);
 
-  handleMouseLeave = ({ currentTarget }) => {
+  const handleMouseLeave = useCallback(({ currentTarget }) => {
     if (autoPlayGif) {
       return;
     }
@@ -71,136 +84,161 @@ class Conversation extends ImmutablePureComponent {
       let emoji = emojis[i];
       emoji.src = emoji.getAttribute('data-static');
     }
-  };
+  }, []);
-
-  handleClick = () => {
-    if (!this.props.history) {
-      return;
-    }
-
-    const { lastStatus, unread, markRead } = this.props;
 
+  const handleClick = useCallback(() => {
     if (unread) {
-      markRead();
+      dispatch(markConversationRead(id));
     }
 
-    this.props.history.push(`/@${lastStatus.getIn(['account', 'acct'])}/${lastStatus.get('id')}`);
+    history.push(`/@${lastStatus.getIn(['account', 'acct'])}/${lastStatus.get('id')}`);
-  };
+  }, [dispatch, history, unread, id, lastStatus]);
 
-  handleMarkAsRead = () => {
+  const handleMarkAsRead = useCallback(() => {
-    this.props.markRead();
+    dispatch(markConversationRead(id));
-  };
+  }, [dispatch, id]);
 
-  handleReply = () => {
+  const handleReply = useCallback(() => {
-    this.props.reply(this.props.lastStatus, this.props.history);
+    dispatch((_, getState) => {
-  };
+      let state = getState();
 
-  handleDelete = () => {
+      if (state.getIn(['compose', 'text']).trim().length !== 0) {
-    this.props.delete();
+        dispatch(openModal({
-  };
+          modalType: 'CONFIRM',
+          modalProps: {
+            message: intl.formatMessage(messages.replyMessage),
+            confirm: intl.formatMessage(messages.replyConfirm),
+            onConfirm: () => dispatch(replyCompose(lastStatus, history)),
+          },
+        }));
+      } else {
+        dispatch(replyCompose(lastStatus, history));
+      }
+    });
+  }, [dispatch, lastStatus, history, intl]);
 
-  handleHotkeyMoveUp = () => {
+  const handleDelete = useCallback(() => {
-    this.props.onMoveUp(this.props.conversationId);
+    dispatch(deleteConversation(id));
-  };
+  }, [dispatch, id]);
 
-  handleHotkeyMoveDown = () => {
+  const handleHotkeyMoveUp = useCallback(() => {
-    this.props.onMoveDown(this.props.conversationId);
+    onMoveUp(id);
-  };
+  }, [id, onMoveUp]);
 
-  handleConversationMute = () => {
+  const handleHotkeyMoveDown = useCallback(() => {
-    this.props.onMute(this.props.lastStatus);
+    onMoveDown(id);
-  };
+  }, [id, onMoveDown]);
 
-  handleShowMore = () => {
+  const handleConversationMute = useCallback(() => {
-    this.props.onToggleHidden(this.props.lastStatus);
+    if (lastStatus.get('muted')) {
-  };
+      dispatch(unmuteStatus(lastStatus.get('id')));
-
+    } else {
-  render () {
+      dispatch(muteStatus(lastStatus.get('id')));
-    const { accounts, lastStatus, unread, scrollKey, intl } = this.props;
-
-    if (lastStatus === null) {
-      return null;
     }
+  }, [dispatch, lastStatus]);
 
-    const menu = [
+  const handleShowMore = useCallback(() => {
-      { text: intl.formatMessage(messages.open), action: this.handleClick },
+    if (lastStatus.get('hidden')) {
-      null,
+      dispatch(revealStatus(lastStatus.get('id')));
-    ];
+    } else {
-
+      dispatch(hideStatus(lastStatus.get('id')));
-    menu.push({ text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMute });
-
-    if (unread) {
-      menu.push({ text: intl.formatMessage(messages.markAsRead), action: this.handleMarkAsRead });
-      menu.push(null);
     }
+  }, [dispatch, lastStatus]);
 
-    menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
+  if (!lastStatus) {
+    return null;
+  }
 
-    const names = accounts.map(a => <Link to={`/@${a.get('acct')}`} key={a.get('id')} title={a.get('acct')}><bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi></Link>).reduce((prev, cur) => [prev, ', ', cur]);
+  const menu = [
+    { text: intl.formatMessage(messages.open), action: handleClick },
+    null,
+    { text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: handleConversationMute },
+  ];
 
-    const handlers = {
+  if (unread) {
-      reply: this.handleReply,
+    menu.push({ text: intl.formatMessage(messages.markAsRead), action: handleMarkAsRead });
-      open: this.handleClick,
+    menu.push(null);
-      moveUp: this.handleHotkeyMoveUp,
+  }
-      moveDown: this.handleHotkeyMoveDown,
-      toggleHidden: this.handleShowMore,
-    };
 
-    return (
+  menu.push({ text: intl.formatMessage(messages.delete), action: handleDelete });
-      <HotKeys handlers={handlers}>
-        <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex={0}>
-          <div className='conversation__avatar' onClick={this.handleClick} role='presentation'>
-            <AvatarComposite accounts={accounts} size={48} />
-          </div>
 
-          <div className='conversation__content'>
+  const names = accounts.map(a => (
-            <div className='conversation__content__info'>
+    <Link to={`/@${a.get('acct')}`} key={a.get('id')} title={a.get('acct')}>
-              <div className='conversation__content__relative-time'>
+      <bdi>
-                {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
+        <strong
-              </div>
+          className='display-name__html'
+          dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
+        />
+      </bdi>
+    </Link>
+  )).reduce((prev, cur) => [prev, ', ', cur]);
 
-              <div className='conversation__content__names' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+  const handlers = {
-                <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
+    reply: handleReply,
-              </div>
+    open: handleClick,
+    moveUp: handleHotkeyMoveUp,
+    moveDown: handleHotkeyMoveDown,
+    toggleHidden: handleShowMore,
+  };
+
+  return (
+    <HotKeys handlers={handlers}>
+      <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex={0}>
+        <div className='conversation__avatar' onClick={handleClick} role='presentation'>
+          <AvatarComposite accounts={accounts} size={48} />
+        </div>
+
+        <div className='conversation__content'>
+          <div className='conversation__content__info'>
+            <div className='conversation__content__relative-time'>
+              {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
             </div>
 
-            <StatusContent
+            <div className='conversation__content__names' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-              status={lastStatus}
+              <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
-              onClick={this.handleClick}
+            </div>
-              expanded={!lastStatus.get('hidden')}
+          </div>
-              onExpandedToggle={this.handleShowMore}
+
-              collapsible
+          <StatusContent
+            status={lastStatus}
+            onClick={handleClick}
+            expanded={!lastStatus.get('hidden')}
+            onExpandedToggle={handleShowMore}
+            collapsible
+          />
+
+          {lastStatus.get('media_attachments').size > 0 && (
+            <AttachmentList
+              compact
+              media={lastStatus.get('media_attachments')}
             />
+          )}
 
-            {lastStatus.get('media_attachments').size > 0 && (
+          <div className='status__action-bar'>
-              <AttachmentList
+            <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={handleReply} />
-                compact
+
-                media={lastStatus.get('media_attachments')}
+            <div className='status__action-bar-dropdown'>
+              <DropdownMenuContainer
+                scrollKey={scrollKey}
+                status={lastStatus}
+                items={menu}
+                icon='ellipsis-h'
+                iconComponent={MoreHorizIcon}
+                size={18}
+                direction='right'
+                title={intl.formatMessage(messages.more)}
               />
-            )}
-
-            <div className='status__action-bar'>
-              <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={this.handleReply} />
-
-              <div className='status__action-bar-dropdown'>
-                <DropdownMenuContainer
-                  scrollKey={scrollKey}
-                  status={lastStatus}
-                  items={menu}
-                  icon='ellipsis-h'
-                  iconComponent={MoreHorizIcon}
-                  size={18}
-                  direction='right'
-                  title={intl.formatMessage(messages.more)}
-                />
-              </div>
             </div>
           </div>
         </div>
-      </HotKeys>
+      </div>
-    );
+    </HotKeys>
-  }
+  );
+};
 
-}
+Conversation.propTypes = {
-
+  conversation: ImmutablePropTypes.map.isRequired,
-export default withRouter(injectIntl(Conversation));
+  scrollKey: PropTypes.string,
+  onMoveUp: PropTypes.func,
+  onMoveDown: PropTypes.func,
+};

app/javascript/mastodon/features/direct_timeline/components/conversations_list.jsx

@@ -1,77 +1,72 @@
 import PropTypes from 'prop-types';
+import { useRef, useMemo, useCallback } from 'react';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
+import { useSelector, useDispatch } from 'react-redux';
-import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import { debounce } from 'lodash';
 
-import ScrollableList from '../../../components/scrollable_list';
+import { expandConversations } from 'mastodon/actions/conversations';
-import ConversationContainer from '../containers/conversation_container';
+import ScrollableList from 'mastodon/components/scrollable_list';
 
-export default class ConversationsList extends ImmutablePureComponent {
+import { Conversation } from './conversation';
 
-  static propTypes = {
+const focusChild = (node, index, alignTop) => {
-    conversations: ImmutablePropTypes.list.isRequired,
+  const element = node.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
-    scrollKey: PropTypes.string.isRequired,
-    hasMore: PropTypes.bool,
-    isLoading: PropTypes.bool,
-    onLoadMore: PropTypes.func,
-  };
 
-  getCurrentIndex = id => this.props.conversations.findIndex(x => x.get('id') === id);
+  if (element) {
-
+    if (alignTop && node.scrollTop > element.offsetTop) {
-  handleMoveUp = id => {
+      element.scrollIntoView(true);
-    const elementIndex = this.getCurrentIndex(id) - 1;
+    } else if (!alignTop && node.scrollTop + node.clientHeight < element.offsetTop + element.offsetHeight) {
-    this._selectChild(elementIndex, true);
+      element.scrollIntoView(false);
-  };
-
-  handleMoveDown = id => {
-    const elementIndex = this.getCurrentIndex(id) + 1;
-    this._selectChild(elementIndex, false);
-  };
-
-  _selectChild (index, align_top) {
-    const container = this.node.node;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
-
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
     }
+
+    element.focus();
   }
+};
 
-  setRef = c => {
+export const ConversationsList = ({ scrollKey, ...other }) => {
-    this.node = c;
+  const listRef = useRef();
-  };
+  const conversations = useSelector(state => state.getIn(['conversations', 'items']));
+  const isLoading = useSelector(state => state.getIn(['conversations', 'isLoading'], true));
+  const hasMore = useSelector(state => state.getIn(['conversations', 'hasMore'], false));
+  const dispatch = useDispatch();
+  const lastStatusId = conversations.last()?.get('last_status');
 
-  handleLoadOlder = debounce(() => {
+  const handleMoveUp = useCallback(id => {
-    const last = this.props.conversations.last();
+    const elementIndex = conversations.findIndex(x => x.get('id') === id) - 1;
+    focusChild(listRef.current.node, elementIndex, true);
+  }, [listRef, conversations]);
 
-    if (last && last.get('last_status')) {
+  const handleMoveDown = useCallback(id => {
-      this.props.onLoadMore(last.get('last_status'));
+    const elementIndex = conversations.findIndex(x => x.get('id') === id) + 1;
+    focusChild(listRef.current.node, elementIndex, false);
+  }, [listRef, conversations]);
+
+  const debouncedLoadMore = useMemo(() => debounce(id => {
+    dispatch(expandConversations({ maxId: id }));
+  }, 300, { leading: true }), [dispatch]);
+
+  const handleLoadMore = useCallback(() => {
+    if (lastStatusId) {
+      debouncedLoadMore(lastStatusId);
     }
-  }, 300, { leading: true });
+  }, [debouncedLoadMore, lastStatusId]);
 
-  render () {
+  return (
-    const { conversations, isLoading, onLoadMore, ...other } = this.props;
+    <ScrollableList {...other} scrollKey={scrollKey} isLoading={isLoading} showLoading={isLoading && conversations.isEmpty()} hasMore={hasMore} onLoadMore={handleLoadMore} ref={listRef}>
+      {conversations.map(item => (
+        <Conversation
+          key={item.get('id')}
+          conversation={item}
+          onMoveUp={handleMoveUp}
+          onMoveDown={handleMoveDown}
+          scrollKey={scrollKey}
+        />
+      ))}
+    </ScrollableList>
+  );
+};
 
-    return (
+ConversationsList.propTypes = {
-      <ScrollableList {...other} isLoading={isLoading} showLoading={isLoading && conversations.isEmpty()} onLoadMore={onLoadMore && this.handleLoadOlder} ref={this.setRef}>
+  scrollKey: PropTypes.string.isRequired,
-        {conversations.map(item => (
+};
-          <ConversationContainer
-            key={item.get('id')}
-            conversationId={item.get('id')}
-            onMoveUp={this.handleMoveUp}
-            onMoveDown={this.handleMoveDown}
-            scrollKey={this.props.scrollKey}
-          />
-        ))}
-      </ScrollableList>
-    );
-  }
-
-}

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

@@ -1,80 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { replyCompose } from 'mastodon/actions/compose';
-import { markConversationRead, deleteConversation } from 'mastodon/actions/conversations';
-import { openModal } from 'mastodon/actions/modal';
-import { muteStatus, unmuteStatus, hideStatus, revealStatus } from 'mastodon/actions/statuses';
-import { makeGetStatus } from 'mastodon/selectors';
-
-import Conversation from '../components/conversation';
-
-const messages = defineMessages({
-  replyConfirm: { id: 'confirmations.reply.confirm', defaultMessage: 'Reply' },
-  replyMessage: { id: 'confirmations.reply.message', defaultMessage: 'Replying now will overwrite the message you are currently composing. Are you sure you want to proceed?' },
-});
-
-const mapStateToProps = () => {
-  const getStatus = makeGetStatus();
-
-  return (state, { conversationId }) => {
-    const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
-    const lastStatusId = conversation.get('last_status', null);
-
-    return {
-      accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
-      unread: conversation.get('unread'),
-      lastStatus: lastStatusId && getStatus(state, { id: lastStatusId }),
-    };
-  };
-};
-
-const mapDispatchToProps = (dispatch, { intl, conversationId }) => ({
-
-  markRead () {
-    dispatch(markConversationRead(conversationId));
-  },
-
-  reply (status, router) {
-    dispatch((_, getState) => {
-      let state = getState();
-
-      if (state.getIn(['compose', 'text']).trim().length !== 0) {
-        dispatch(openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: intl.formatMessage(messages.replyMessage),
-            confirm: intl.formatMessage(messages.replyConfirm),
-            onConfirm: () => dispatch(replyCompose(status, router)),
-          },
-        }));
-      } else {
-        dispatch(replyCompose(status, router));
-      }
-    });
-  },
-
-  delete () {
-    dispatch(deleteConversation(conversationId));
-  },
-
-  onMute (status) {
-    if (status.get('muted')) {
-      dispatch(unmuteStatus(status.get('id')));
-    } else {
-      dispatch(muteStatus(status.get('id')));
-    }
-  },
-
-  onToggleHidden (status) {
-    if (status.get('hidden')) {
-      dispatch(revealStatus(status.get('id')));
-    } else {
-      dispatch(hideStatus(status.get('id')));
-    }
-  },
-
-});
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(Conversation));

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

@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-
-import { expandConversations } from '../../../actions/conversations';
-import ConversationsList from '../components/conversations_list';
-
-const mapStateToProps = state => ({
-  conversations: state.getIn(['conversations', 'items']),
-  isLoading: state.getIn(['conversations', 'isLoading'], true),
-  hasMore: state.getIn(['conversations', 'hasMore'], false),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onLoadMore: maxId => dispatch(expandConversations({ maxId })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConversationsList);

app/javascript/mastodon/features/direct_timeline/index.jsx

@@ -1,11 +1,11 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useRef, useCallback, useEffect } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import { Helmet } from 'react-helmet';
 
-import { connect } from 'react-redux';
+import { useDispatch } from 'react-redux';
 
 import AlternateEmailIcon from '@/material-icons/400-24px/alternate_email.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
@@ -14,103 +14,79 @@ import { connectDirectStream } from 'mastodon/actions/streaming';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
 
-import ConversationsListContainer from './containers/conversations_list_container';
+import { ConversationsList } from './components/conversations_list';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Private mentions' },
 });
 
-class DirectTimeline extends PureComponent {
+const DirectTimeline = ({ columnId, multiColumn }) => {
-
+  const columnRef = useRef();
-  static propTypes = {
+  const intl = useIntl();
-    dispatch: PropTypes.func.isRequired,
+  const dispatch = useDispatch();
-    columnId: PropTypes.string,
+  const pinned = !!columnId;
-    intl: PropTypes.object.isRequired,
-    hasUnread: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-  };
-
-  handlePin = () => {
-    const { columnId, dispatch } = this.props;
 
+  const handlePin = useCallback(() => {
     if (columnId) {
       dispatch(removeColumn(columnId));
     } else {
       dispatch(addColumn('DIRECT', {}));
     }
-  };
+  }, [dispatch, columnId]);
 
-  handleMove = (dir) => {
+  const handleMove = useCallback((dir) => {
-    const { columnId, dispatch } = this.props;
     dispatch(moveColumn(columnId, dir));
-  };
+  }, [dispatch, columnId]);
 
-  handleHeaderClick = () => {
+  const handleHeaderClick = useCallback(() => {
-    this.column.scrollTop();
+    columnRef.current.scrollTop();
-  };
+  }, [columnRef]);
-
-  componentDidMount () {
-    const { dispatch } = this.props;
 
+  useEffect(() => {
     dispatch(mountConversations());
     dispatch(expandConversations());
-    this.disconnect = dispatch(connectDirectStream());
-  }
 
-  componentWillUnmount () {
+    const disconnect = dispatch(connectDirectStream());
-    this.props.dispatch(unmountConversations());
 
-    if (this.disconnect) {
+    return () => {
-      this.disconnect();
+      dispatch(unmountConversations());
-      this.disconnect = null;
+      disconnect();
-    }
+    };
-  }
+  }, [dispatch]);
 
-  setRef = c => {
+  return (
-    this.column = c;
+    <Column bindToDocument={!multiColumn} ref={columnRef} label={intl.formatMessage(messages.title)}>
-  };
+      <ColumnHeader
+        icon='at'
+        iconComponent={AlternateEmailIcon}
+        title={intl.formatMessage(messages.title)}
+        onPin={handlePin}
+        onMove={handleMove}
+        onClick={handleHeaderClick}
+        pinned={pinned}
+        multiColumn={multiColumn}
+      />
 
-  handleLoadMore = maxId => {
+      <ConversationsList
-    this.props.dispatch(expandConversations({ maxId }));
+        trackScroll={!pinned}
-  };
+        scrollKey={`direct_timeline-${columnId}`}
+        emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any private mentions yet. When you send or receive one, it will show up here." />}
+        bindToDocument={!multiColumn}
+        prepend={<div className='follow_requests-unlocked_explanation'><span><FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> <a href='/terms' target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a></span></div>}
+        alwaysPrepend
+      />
 
-  render () {
+      <Helmet>
-    const { intl, hasUnread, columnId, multiColumn } = this.props;
+        <title>{intl.formatMessage(messages.title)}</title>
-    const pinned = !!columnId;
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};
 
-    return (
+DirectTimeline.propTypes = {
-      <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
+  columnId: PropTypes.string,
-        <ColumnHeader
+  multiColumn: PropTypes.bool,
-          icon='at'
+};
-          iconComponent={AlternateEmailIcon}
-          active={hasUnread}
-          title={intl.formatMessage(messages.title)}
-          onPin={this.handlePin}
-          onMove={this.handleMove}
-          onClick={this.handleHeaderClick}
-          pinned={pinned}
-          multiColumn={multiColumn}
-        />
 
-        <ConversationsListContainer
+export default DirectTimeline;
-          trackScroll={!pinned}
-          scrollKey={`direct_timeline-${columnId}`}
-          timelineId='direct'
-          bindToDocument={!multiColumn}
-          onLoadMore={this.handleLoadMore}
-          prepend={<div className='follow_requests-unlocked_explanation'><span><FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> <a href='/terms' target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a></span></div>}
-          alwaysPrepend
-          emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any private mentions yet. When you send or receive one, it will show up here." />}
-        />
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.title)}</title>
-          <meta name='robots' content='noindex' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default connect()(injectIntl(DirectTimeline));