diff --git a/app/soapbox/features/chats/components/chat.js b/app/soapbox/features/chats/components/chat.js index 1a09edd47..8db6ddb62 100644 --- a/app/soapbox/features/chats/components/chat.js +++ b/app/soapbox/features/chats/components/chat.js @@ -1,4 +1,5 @@ import React from 'react'; +import { connect } from 'react-redux'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import Avatar from '../../../components/avatar'; @@ -6,11 +7,29 @@ import DisplayName from '../../../components/display_name'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { shortNumberFormat } from 'soapbox/utils/numbers'; import emojify from 'soapbox/features/emoji/emoji'; +import { makeGetChat } from 'soapbox/selectors'; -export default class Chat extends ImmutablePureComponent { + +const makeMapStateToProps = () => { + const getChat = makeGetChat(); + + const mapStateToProps = (state, { chatId }) => { + const chat = state.getIn(['chats', chatId]); + + return { + chat: chat ? getChat(state, chat.toJS()) : undefined, + }; + }; + + return mapStateToProps; +}; + +export default @connect(makeMapStateToProps) +class Chat extends ImmutablePureComponent { static propTypes = { - chat: ImmutablePropTypes.map.isRequired, + chatId: PropTypes.string.isRequired, + chat: ImmutablePropTypes.map, onClick: PropTypes.func, }; diff --git a/app/soapbox/features/chats/components/chat_list.js b/app/soapbox/features/chats/components/chat_list.js index e24d31ab9..2624a6e2f 100644 --- a/app/soapbox/features/chats/components/chat_list.js +++ b/app/soapbox/features/chats/components/chat_list.js @@ -1,10 +1,10 @@ import React from 'react'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; +import ImmutablePropTypes from 'react-immutable-proptypes'; import { injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import Chat from './chat'; -import { makeGetChat } from 'soapbox/selectors'; const chatDateComparator = (chatA, chatB) => { // Sort most recently updated chats at the top @@ -18,15 +18,13 @@ const chatDateComparator = (chatA, chatB) => { }; const mapStateToProps = state => { - const getChat = makeGetChat(); - - const chats = state.get('chats') - .map(chat => getChat(state, chat.toJS())) + const chatIds = state.get('chats') .toList() - .sort(chatDateComparator); + .sort(chatDateComparator) + .map(chat => chat.get('id')); return { - chats, + chatIds, }; }; @@ -37,23 +35,24 @@ class ChatList extends ImmutablePureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, intl: PropTypes.object.isRequired, + chatIds: ImmutablePropTypes.list, onClickChat: PropTypes.func, emptyMessage: PropTypes.node, }; render() { - const { chats, emptyMessage } = this.props; + const { chatIds, emptyMessage } = this.props; return (
- {chats.count() === 0 && + {chatIds.count() === 0 &&
{emptyMessage}
} - {chats.map(chat => ( -
+ {chatIds.map(chatId => ( +
diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js index 1f17c2961..421135c34 100644 --- a/app/soapbox/features/chats/components/chat_panes.js +++ b/app/soapbox/features/chats/components/chat_panes.js @@ -6,30 +6,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { getSettings } from 'soapbox/actions/settings'; import ChatList from './chat_list'; import { FormattedMessage } from 'react-intl'; -import { makeGetChat } from 'soapbox/selectors'; import { openChat, toggleMainWindow } from 'soapbox/actions/chats'; import ChatWindow from './chat_window'; import { shortNumberFormat } from 'soapbox/utils/numbers'; import AudioToggle from 'soapbox/features/chats/components/audio_toggle'; -import { List as ImmutableList } from 'immutable'; - -const addChatsToPanes = (state, panesData) => { - const getChat = makeGetChat(); - - const newPanes = panesData.get('panes').reduce((acc, pane) => { - const chat = getChat(state, { id: pane.get('chat_id') }); - if (!chat) return acc; - return acc.push(pane.set('chat', chat)); - }, ImmutableList()); - - return panesData.set('panes', newPanes); -}; const mapStateToProps = state => { - const panesData = getSettings(state).get('chats'); + const settings = getSettings(state); return { - panesData: addChatsToPanes(state, panesData), + panes: settings.getIn(['chats', 'panes']), + mainWindowState: settings.getIn(['chats', 'mainWindow']), unreadCount: state.get('chats').reduce((acc, curr) => acc + Math.min(curr.get('unread', 0), 1), 0), }; }; @@ -39,7 +26,8 @@ class ChatPanes extends ImmutablePureComponent { static propTypes = { dispatch: PropTypes.func.isRequired, - panesData: ImmutablePropTypes.map, + mainWindowState: PropTypes.string, + panes: ImmutablePropTypes.list, } handleClickChat = (chat) => { @@ -51,12 +39,10 @@ class ChatPanes extends ImmutablePureComponent { } render() { - const { panesData, unreadCount } = this.props; - const panes = panesData.get('panes'); - const mainWindow = panesData.get('mainWindow'); + const { panes, mainWindowState, unreadCount } = this.props; const mainWindowPane = ( -
+
{unreadCount > 0 && {shortNumberFormat(unreadCount)}}