- {chats.count() === 0 &&
+ {chatIds.count() === 0 &&
+ {chatIds.map(chatId => (
+
diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
index b51915ae6..426075504 100644
--- a/app/soapbox/features/chats/components/chat_message_list.js
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -14,6 +14,7 @@ import { MediaGallery } from 'soapbox/features/ui/util/async-components';
import Bundle from 'soapbox/features/ui/components/bundle';
import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
import { initReportById } from 'soapbox/actions/reports';
+import { createSelector } from 'reselect';
const messages = defineMessages({
today: { id: 'chats.dividers.today', defaultMessage: 'Today' },
@@ -38,15 +39,34 @@ const makeEmojiMap = record => record.get('emojis', ImmutableList()).reduce((map
return map.set(`:${emoji.get('shortcode')}:`, emoji);
}, ImmutableMap());
-const mapStateToProps = (state, { chatMessageIds }) => ({
- me: state.get('me'),
- chatMessages: chatMessageIds.reduce((acc, curr) => {
- const chatMessage = state.getIn(['chat_messages', curr]);
- return chatMessage ? acc.push(chatMessage) : acc;
- }, ImmutableList()),
-});
+const makeGetChatMessages = () => {
+ return createSelector(
+ [(chatMessages, chatMessageIds) => (
+ chatMessageIds.reduce((acc, curr) => {
+ const chatMessage = chatMessages.get(curr);
+ return chatMessage ? acc.push(chatMessage) : acc;
+ }, ImmutableList())
+ )],
+ chatMessages => chatMessages,
+ );
+};
-export default @connect(mapStateToProps)
+const makeMapStateToProps = () => {
+ const getChatMessages = makeGetChatMessages();
+
+ const mapStateToProps = (state, { chatMessageIds }) => {
+ const chatMessages = state.get('chat_messages');
+
+ return {
+ me: state.get('me'),
+ chatMessages: getChatMessages(chatMessages, chatMessageIds),
+ };
+ };
+
+ return mapStateToProps;
+};
+
+export default @connect(makeMapStateToProps)
@injectIntl
class ChatMessageList extends ImmutablePureComponent {
diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 46e3e4260..b1672c127 100644
--- a/app/soapbox/features/chats/components/chat_panes.js
+++ b/app/soapbox/features/chats/components/chat_panes.js
@@ -2,47 +2,32 @@ 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 { 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),
};
};
export default @connect(mapStateToProps)
-@injectIntl
class ChatPanes extends ImmutablePureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
- intl: PropTypes.object.isRequired,
- panesData: ImmutablePropTypes.map,
+ mainWindowState: PropTypes.string,
+ panes: ImmutablePropTypes.list,
}
handleClickChat = (chat) => {
@@ -54,12 +39,11 @@ 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 open = mainWindowState === 'open';
const mainWindowPane = (
-
+
{unreadCount > 0 &&
{shortNumberFormat(unreadCount)}}
- }
- />
+ />}
);
@@ -79,9 +63,14 @@ class ChatPanes extends ImmutablePureComponent {
return (
{mainWindowPane}
- {panes.map((pane, i) =>
- ,
- )}
+ {panes.map((pane, i) => (
+
+ ))}
);
}
diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index d23c27cad..95ba86e64 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@@ -16,21 +16,33 @@ import ChatBox from './chat_box';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import { displayFqn } from 'soapbox/utils/state';
import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
+import { makeGetChat } from 'soapbox/selectors';
-const mapStateToProps = (state, { pane }) => ({
- me: state.get('me'),
- chat: state.getIn(['chats', pane.get('chat_id')]),
- displayFqn: displayFqn(state),
-});
+const makeMapStateToProps = () => {
+ const getChat = makeGetChat();
-export default @connect(mapStateToProps)
+ const mapStateToProps = (state, { chatId }) => {
+ const chat = state.getIn(['chats', chatId]);
+
+ return {
+ me: state.get('me'),
+ chat: chat ? getChat(state, chat.toJS()) : undefined,
+ displayFqn: displayFqn(state),
+ };
+ };
+
+ return mapStateToProps;
+};
+
+export default @connect(makeMapStateToProps)
@injectIntl
class ChatWindow extends ImmutablePureComponent {
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
- pane: ImmutablePropTypes.map.isRequired,
+ chatId: PropTypes.string.isRequired,
+ windowState: PropTypes.string.isRequired,
idx: PropTypes.number,
chat: ImmutablePropTypes.map,
me: PropTypes.node,
@@ -68,17 +80,17 @@ class ChatWindow extends ImmutablePureComponent {
}
componentDidUpdate(prevProps) {
- const oldState = prevProps.pane.get('state');
- const newState = this.props.pane.get('state');
+ const oldState = prevProps.windowState;
+ const newState = this.props.windowState;
if (oldState !== newState && newState === 'open')
this.focusInput();
}
render() {
- const { pane, idx, chat, displayFqn } = this.props;
- const account = pane.getIn(['chat', 'account']);
- if (!chat || !account) return null;
+ const { windowState, idx, chat, displayFqn } = this.props;
+ if (!chat) return null;
+ const account = chat.get('account');
const right = (285 * (idx + 1)) + 20;
const unreadCount = chat.get('unread');
@@ -98,7 +110,7 @@ class ChatWindow extends ImmutablePureComponent {
);
return (
-
+
{unreadCount > 0 ? unreadIcon : avatar }