diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js
new file mode 100644
index 000000000..2960995ec
--- /dev/null
+++ b/app/soapbox/features/chats/components/chat_message_list.js
@@ -0,0 +1,64 @@
+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 { List as ImmutableList } from 'immutable';
+import emojify from 'soapbox/features/emoji/emoji';
+
+const mapStateToProps = (state, { chatMessageIds }) => ({
+ me: state.get('me'),
+ chatMessages: chatMessageIds.map(id => state.getIn(['chat_messages', id])).toList(),
+});
+
+export default @connect(mapStateToProps)
+@injectIntl
+class ChatMessageList extends ImmutablePureComponent {
+
+ static propTypes = {
+ dispatch: PropTypes.func.isRequired,
+ intl: PropTypes.object.isRequired,
+ chatMessages: ImmutablePropTypes.list,
+ chatMessageIds: ImmutablePropTypes.orderedSet,
+ me: PropTypes.node,
+ }
+
+ static defaultProps = {
+ chatMessages: ImmutableList(),
+ }
+
+ scrollToBottom = () => {
+ if (!this.messagesEnd) return;
+ this.messagesEnd.scrollIntoView();
+ }
+
+ setMessageEndRef = (el) => {
+ this.messagesEnd = el;
+ this.scrollToBottom();
+ };
+
+ componentDidUpdate(prevProps) {
+ if (prevProps.chatMessages !== this.props.chatMessages)
+ this.scrollToBottom();
+ }
+
+ render() {
+ const { chatMessages, me } = this.props;
+
+ return (
+
+ {chatMessages.map(chatMessage => (
+
+
+
+ ))}
+
+
+ );
+ }
+
+}
diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index 9071fb945..4847be101 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@@ -8,12 +8,12 @@ import Avatar from 'soapbox/components/avatar';
import { acctFull } from 'soapbox/utils/accounts';
import IconButton from 'soapbox/components/icon_button';
import { closeChat, toggleChat, fetchChatMessages, sendChatMessage } from 'soapbox/actions/chats';
-import { List as ImmutableList } from 'immutable';
-import emojify from 'soapbox/features/emoji/emoji';
+import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
+import ChatMessageList from './chat_message_list';
const mapStateToProps = (state, { pane }) => ({
me: state.get('me'),
- chatMessages: state.getIn(['chat_messages', pane.get('chat_id')], ImmutableList()).reverse(),
+ chatMessageIds: state.getIn(['chat_message_lists', pane.get('chat_id')], ImmutableOrderedSet()),
});
export default @connect(mapStateToProps)
@@ -25,7 +25,7 @@ class ChatWindow extends ImmutablePureComponent {
intl: PropTypes.object.isRequired,
pane: ImmutablePropTypes.map.isRequired,
idx: PropTypes.number,
- chatMessages: ImmutablePropTypes.list,
+ chatMessageIds: ImmutablePropTypes.orderedSet,
me: PropTypes.node,
}
@@ -62,21 +62,11 @@ class ChatWindow extends ImmutablePureComponent {
this.setState({ content: e.target.value });
}
- scrollToBottom = () => {
- if (!this.messagesEnd) return;
- this.messagesEnd.scrollIntoView();
- }
-
focusInput = () => {
if (!this.inputElem) return;
this.inputElem.focus();
}
- setMessageEndRef = (el) => {
- this.messagesEnd = el;
- this.scrollToBottom();
- };
-
setInputRef = (el) => {
const { pane } = this.props;
this.inputElem = el;
@@ -90,9 +80,6 @@ class ChatWindow extends ImmutablePureComponent {
}
componentDidUpdate(prevProps) {
- if (prevProps.chatMessages !== this.props.chatMessages)
- this.scrollToBottom();
-
const oldState = prevProps.pane.get('state');
const newState = this.props.pane.get('state');
@@ -101,7 +88,7 @@ class ChatWindow extends ImmutablePureComponent {
}
render() {
- const { pane, idx, chatMessages, me } = this.props;
+ const { pane, idx, chatMessageIds } = this.props;
const chat = pane.get('chat');
const account = pane.getIn(['chat', 'account']);
if (!chat || !account) return null;
@@ -120,17 +107,7 @@ class ChatWindow extends ImmutablePureComponent {
-
- {chatMessages.map(chatMessage => (
-
-
-
- ))}
-
-
+