[Glitch] Refactor conversations components in web UI (#2589)

Port 3205a654ca to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
Co-authored-by: Eugen Rochko <eugen@zeonfederated.com>

app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx

@@ -1,17 +1,24 @@
 import PropTypes from 'prop-types';
+import { useCallback, useState } from 'react';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
+import { 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 'flavours/glitch/actions/compose';
+import { markConversationRead, deleteConversation } from 'flavours/glitch/actions/conversations';
+import { openModal } from 'flavours/glitch/actions/modal';
+import { muteStatus, unmuteStatus, revealStatus, hideStatus } from 'flavours/glitch/actions/statuses';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import AvatarComposite from 'flavours/glitch/components/avatar_composite';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -20,7 +27,7 @@ import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp
 import StatusContent from 'flavours/glitch/components/status_content';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
+import { makeGetStatus } from 'flavours/glitch/selectors';
 
 const messages = defineMessages({
   more: { id: 'status.more', defaultMessage: 'More' },
@@ -30,45 +37,48 @@ 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,
-  };
 
-  state = {
+export const Conversation = ({ conversation, scrollKey, onMoveUp, onMoveDown }) => {
-    isExpanded: undefined,
+  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));
 
-  parseClick = (e, destination) => {
+  // glitch-soc additions
-    const { history, lastStatus, unread, markRead } = this.props;
+  const sharedCWState = useSelector(state => state.getIn(['state', 'content_warnings', 'shared_state']));
-    if (!history) return;
+  const [expanded, setExpanded] = useState(undefined);
 
+  const parseClick = useCallback((e, destination) => {
     if (e.button === 0 && !(e.ctrlKey || e.altKey || e.metaKey)) {
       if (destination === undefined) {
         if (unread) {
-          markRead();
+          dispatch(markConversationRead(id));
         }
         destination = `/statuses/${lastStatus.get('id')}`;
       }
       history.push(destination);
       e.preventDefault();
     }
-  };
+  }, [dispatch, history, unread, id, lastStatus]);
 
-  handleMouseEnter = ({ currentTarget }) => {
+  const handleMouseEnter = useCallback(({ currentTarget }) => {
     if (autoPlayGif) {
       return;
     }
@@ -79,9 +89,9 @@ class Conversation extends ImmutablePureComponent {
       let emoji = emojis[i];
       emoji.src = emoji.getAttribute('data-original');
     }
-  };
+  }, []);
 
-  handleMouseLeave = ({ currentTarget }) => {
+  const handleMouseLeave = useCallback(({ currentTarget }) => {
     if (autoPlayGif) {
       return;
     }
@@ -92,89 +102,101 @@ 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: {
-  handleHotkeyMoveUp = () => {
+            message: intl.formatMessage(messages.replyMessage),
-    this.props.onMoveUp(this.props.conversationId);
+            confirm: intl.formatMessage(messages.replyConfirm),
-  };
+            onConfirm: () => dispatch(replyCompose(lastStatus, history)),
-
+          },
-  handleHotkeyMoveDown = () => {
+        }));
-    this.props.onMoveDown(this.props.conversationId);
+      } else {
-  };
+        dispatch(replyCompose(lastStatus, history));
-
-  handleConversationMute = () => {
-    this.props.onMute(this.props.lastStatus);
-  };
-
-  handleShowMore = () => {
-    this.props.onToggleHidden(this.props.lastStatus);
-
-    if (this.props.lastStatus.get('spoiler_text')) {
-      this.setExpansion(!this.state.isExpanded);
       }
-  };
+    });
+  }, [dispatch, lastStatus, history, intl]);
 
-  setExpansion = value => {
+  const handleDelete = useCallback(() => {
-    this.setState({ isExpanded: value });
+    dispatch(deleteConversation(id));
-  };
+  }, [dispatch, id]);
 
-  render () {
+  const handleHotkeyMoveUp = useCallback(() => {
-    const { accounts, lastStatus, unread, scrollKey, intl } = this.props;
+    onMoveUp(id);
+  }, [id, onMoveUp]);
 
-    if (lastStatus === null) {
+  const handleHotkeyMoveDown = useCallback(() => {
-      return null;
+    onMoveDown(id);
+  }, [id, onMoveDown]);
+
+  const handleConversationMute = useCallback(() => {
+    if (lastStatus.get('muted')) {
+      dispatch(unmuteStatus(lastStatus.get('id')));
+    } else {
+      dispatch(muteStatus(lastStatus.get('id')));
+    }
+  }, [dispatch, lastStatus]);
+
+  const handleShowMore = useCallback(() => {
+    if (lastStatus.get('hidden')) {
+      dispatch(revealStatus(lastStatus.get('id')));
+    } else {
+      dispatch(hideStatus(lastStatus.get('id')));
     }
 
-    const isExpanded = this.props.settings.getIn(['content_warnings', 'shared_state']) ? !lastStatus.get('hidden') : this.state.isExpanded;
+    if (lastStatus.get('spoiler_text')) {
+      setExpanded(!expanded);
+    }
+  }, [dispatch, lastStatus, expanded]);
 
   const menu = [
-      { text: intl.formatMessage(messages.open), action: this.handleClick },
+    { text: intl.formatMessage(messages.open), action: handleClick },
     null,
+    { text: intl.formatMessage(lastStatus.get('muted') ? messages.unmuteConversation : messages.muteConversation), action: handleConversationMute },
   ];
 
-    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({ text: intl.formatMessage(messages.markAsRead), action: handleMarkAsRead });
     menu.push(null);
   }
 
-    menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDelete });
+  menu.push({ text: intl.formatMessage(messages.delete), action: handleDelete });
 
-    const names = accounts.map(a => <Permalink to={`/@${a.get('acct')}`} href={a.get('url')} key={a.get('id')} title={a.get('acct')}><bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi></Permalink>).reduce((prev, cur) => [prev, ', ', cur]);
+  const names = accounts.map(a => (
+    <Permalink to={`/@${a.get('acct')}`} href={a.get('url')} key={a.get('id')} title={a.get('acct')}>
+      <bdi>
+        <strong
+          className='display-name__html'
+          dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }}
+        />
+      </bdi>
+    </Permalink>
+  )).reduce((prev, cur) => [prev, ', ', cur]);
 
   const handlers = {
-      reply: this.handleReply,
+    reply: handleReply,
-      open: this.handleClick,
+    open: handleClick,
-      moveUp: this.handleHotkeyMoveUp,
+    moveUp: handleHotkeyMoveUp,
-      moveDown: this.handleHotkeyMoveDown,
+    moveDown: handleHotkeyMoveDown,
-      toggleHidden: this.handleShowMore,
+    toggleHidden: handleShowMore,
   };
 
   let media = null;
@@ -185,7 +207,7 @@ class Conversation extends ImmutablePureComponent {
   return (
     <HotKeys handlers={handlers}>
       <div className={classNames('conversation focusable muted', { 'conversation--unread': unread })} tabIndex={0}>
-          <div className='conversation__avatar' onClick={this.handleClick} role='presentation'>
+        <div className='conversation__avatar' onClick={handleClick} role='presentation'>
           <AvatarComposite accounts={accounts} size={48} />
         </div>
 
@@ -195,22 +217,22 @@ class Conversation extends ImmutablePureComponent {
               {unread && <span className='conversation__unread' />} <RelativeTimestamp timestamp={lastStatus.get('created_at')} />
             </div>
 
-              <div className='conversation__content__names' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+            <div className='conversation__content__names' onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
               <FormattedMessage id='conversation.with' defaultMessage='With {names}' values={{ names: <span>{names}</span> }} />
             </div>
           </div>
 
           <StatusContent
             status={lastStatus}
-              parseClick={this.parseClick}
+            parseClick={parseClick}
-              expanded={isExpanded}
+            expanded={sharedCWState ? lastStatus.get('hidden') : expanded}
-              onExpandedToggle={this.handleShowMore}
+            onExpandedToggle={handleShowMore}
             collapsible
             media={media}
           />
 
           <div className='status__action-bar'>
-              <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={this.handleReply} />
+            <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.reply)} icon='reply' iconComponent={ReplyIcon} onClick={handleReply} />
 
             <div className='status__action-bar-dropdown'>
               <DropdownMenuContainer
@@ -229,8 +251,11 @@ class Conversation extends ImmutablePureComponent {
       </div>
     </HotKeys>
   );
-  }
+};
 
-}
+Conversation.propTypes = {
-
+  conversation: ImmutablePropTypes.map.isRequired,
-export default withRouter(injectIntl(Conversation));
+  scrollKey: PropTypes.string,
+  onMoveUp: PropTypes.func,
+  onMoveDown: PropTypes.func,
+};

app/javascript/flavours/glitch/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 'flavours/glitch/actions/conversations';
-import ConversationContainer from '../containers/conversation_container';
+import ScrollableList from 'flavours/glitch/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);
-
-  handleMoveUp = id => {
-    const elementIndex = this.getCurrentIndex(id) - 1;
-    this._selectChild(elementIndex, true);
-  };
-
-  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) {
+    if (alignTop && node.scrollTop > element.offsetTop) {
       element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
+    } else if (!alignTop && node.scrollTop + node.clientHeight < element.offsetTop + element.offsetHeight) {
       element.scrollIntoView(false);
     }
+
     element.focus();
   }
-  }
-
-  setRef = c => {
-    this.node = c;
 };
 
-  handleLoadOlder = debounce(() => {
+export const ConversationsList = ({ scrollKey, ...other }) => {
-    const last = this.props.conversations.last();
+  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');
 
-    if (last && last.get('last_status')) {
+  const handleMoveUp = useCallback(id => {
-      this.props.onLoadMore(last.get('last_status'));
+    const elementIndex = conversations.findIndex(x => x.get('id') === id) - 1;
+    focusChild(listRef.current.node, elementIndex, true);
+  }, [listRef, conversations]);
+
+  const handleMoveDown = useCallback(id => {
+    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 () {
-    const { conversations, isLoading, onLoadMore, ...other } = this.props;
 
   return (
-      <ScrollableList {...other} isLoading={isLoading} showLoading={isLoading && conversations.isEmpty()} onLoadMore={onLoadMore && this.handleLoadOlder} ref={this.setRef}>
+    <ScrollableList {...other} scrollKey={scrollKey} isLoading={isLoading} showLoading={isLoading && conversations.isEmpty()} hasMore={hasMore} onLoadMore={handleLoadMore} ref={listRef}>
       {conversations.map(item => (
-          <ConversationContainer
+        <Conversation
           key={item.get('id')}
-            conversationId={item.get('id')}
+          conversation={item}
-            onMoveUp={this.handleMoveUp}
+          onMoveUp={handleMoveUp}
-            onMoveDown={this.handleMoveDown}
+          onMoveDown={handleMoveDown}
-            scrollKey={this.props.scrollKey}
+          scrollKey={scrollKey}
         />
       ))}
     </ScrollableList>
   );
-  }
+};
 
-}
+ConversationsList.propTypes = {
+  scrollKey: PropTypes.string.isRequired,
+};

app/javascript/flavours/glitch/features/direct_timeline/containers/conversation_container.js

@@ -1,81 +0,0 @@
-import { defineMessages, injectIntl } from 'react-intl';
-
-import { connect } from 'react-redux';
-
-import { replyCompose } from 'flavours/glitch/actions/compose';
-import { markConversationRead, deleteConversation } from 'flavours/glitch/actions/conversations';
-import { openModal } from 'flavours/glitch/actions/modal';
-import { muteStatus, unmuteStatus, hideStatus, revealStatus } from 'flavours/glitch/actions/statuses';
-import { makeGetStatus } from 'flavours/glitch/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 }),
-      settings: state.get('local_settings'),
-    };
-  };
-};
-
-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/flavours/glitch/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/flavours/glitch/features/direct_timeline/index.jsx

@@ -1,12 +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, useSelector } from 'react-redux';
-
 
 import MailIcon from '@/material-icons/400-24px/mail.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'flavours/glitch/actions/columns';
@@ -17,51 +16,44 @@ import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 
+import { ConversationsList } from './components/conversations_list';
 import ColumnSettingsContainer from './containers/column_settings_container';
-import ConversationsListContainer from './containers/conversations_list_container';
 
 const messages = defineMessages({
   title: { id: 'column.direct', defaultMessage: 'Private mentions' },
 });
 
-const mapStateToProps = state => ({
+const DirectTimeline = ({ columnId, multiColumn }) => {
-  hasUnread: state.getIn(['timelines', 'direct', 'unread']) > 0,
+  const columnRef = useRef();
-  conversationsMode: state.getIn(['settings', 'direct', 'conversations']),
+  const intl = useIntl();
-});
+  const dispatch = useDispatch();
+  const pinned = !!columnId;
 
-class DirectTimeline extends PureComponent {
+  // glitch-soc additions
-
+  const hasUnread = useSelector(state => state.getIn(['timelines', 'direct', 'unread']) > 0);
-  static propTypes = {
+  const conversationsMode = useSelector(state => state.getIn(['settings', 'direct', 'conversations']));
-    dispatch: PropTypes.func.isRequired,
-    columnId: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    hasUnread: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-    conversationsMode: 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 handleLoadMoreTimeline = useCallback(maxId => {
-    const { dispatch, conversationsMode } = this.props;
+    dispatch(expandDirectTimeline({ maxId }));
+  }, [dispatch]);
 
+  useEffect(() => {
     dispatch(mountConversations());
 
     if (conversationsMode) {
@@ -70,90 +62,55 @@ class DirectTimeline extends PureComponent {
       dispatch(expandDirectTimeline());
     }
 
-    this.disconnect = dispatch(connectDirectStream());
+    const disconnect = dispatch(connectDirectStream());
-  }
 
-  componentDidUpdate(prevProps) {
+    return () => {
-    const { dispatch, conversationsMode } = this.props;
+      dispatch(unmountConversations());
-
+      disconnect();
-    if (prevProps.conversationsMode && !conversationsMode) {
-      dispatch(expandDirectTimeline());
-    } else if (!prevProps.conversationsMode && conversationsMode) {
-      dispatch(expandConversations());
-    }
-  }
-
-  componentWillUnmount () {
-    this.props.dispatch(unmountConversations());
-
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
-
-  setRef = c => {
-    this.column = c;
     };
-
+  }, [dispatch, conversationsMode]);
-  handleLoadMoreTimeline = maxId => {
-    this.props.dispatch(expandDirectTimeline({ maxId }));
-  };
-
-  handleLoadMoreConversations = maxId => {
-    this.props.dispatch(expandConversations({ maxId }));
-  };
-
-  render () {
-    const { intl, hasUnread, columnId, multiColumn, conversationsMode } = this.props;
-    const pinned = !!columnId;
-
-    let contents;
-    if (conversationsMode) {
-      contents = (
-        <ConversationsListContainer
-          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." />}
-        />
-      );
-    } else {
-      contents = (
-        <StatusListContainer
-          trackScroll={!pinned}
-          scrollKey={`direct_timeline-${columnId}`}
-          timelineId='direct'
-          bindToDocument={!multiColumn}
-          onLoadMore={this.handleLoadMoreTimeline}
-          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." />}
-        />
-      );
-    }
 
   return (
-      <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
+    <Column bindToDocument={!multiColumn} ref={columnRef} label={intl.formatMessage(messages.title)}>
       <ColumnHeader
         icon='envelope'
         iconComponent={MailIcon}
         active={hasUnread}
         title={intl.formatMessage(messages.title)}
-          onPin={this.handlePin}
+        onPin={handlePin}
-          onMove={this.handleMove}
+        onMove={handleMove}
-          onClick={this.handleHeaderClick}
+        onClick={handleHeaderClick}
         pinned={pinned}
         multiColumn={multiColumn}
       >
         <ColumnSettingsContainer />
       </ColumnHeader>
 
-        {contents}
+      {conversationsMode ? (
+        <ConversationsList
+          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
+        />
+      ) : (
+        <StatusListContainer
+          trackScroll={!pinned}
+          scrollKey={`direct_timeline-${columnId}`}
+          timelineId='direct'
+          bindToDocument={!multiColumn}
+          onLoadMore={handleLoadMoreTimeline}
+          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>
@@ -161,8 +118,11 @@ class DirectTimeline extends PureComponent {
       </Helmet>
     </Column>
   );
-  }
+};
 
-}
+DirectTimeline.propTypes = {
+  columnId: PropTypes.string,
+  multiColumn: PropTypes.bool,
+};
 
-export default connect(mapStateToProps)(injectIntl(DirectTimeline));
+export default DirectTimeline;