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 => ( -
- -
- ))} -
-
+