|
|
|
@ -5,9 +5,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
|
|
|
|
import { injectIntl } from 'react-intl';
|
|
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
|
|
|
|
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
|
|
|
|
import { fetchChatMessages } from 'soapbox/actions/chats';
|
|
|
|
|
import emojify from 'soapbox/features/emoji/emoji';
|
|
|
|
|
import classNames from 'classnames';
|
|
|
|
|
import { escape } from 'lodash';
|
|
|
|
|
import { escape, throttle } from 'lodash';
|
|
|
|
|
|
|
|
|
|
const makeEmojiMap = record => record.get('emojis', ImmutableList()).reduce((map, emoji) => {
|
|
|
|
|
return map.set(`:${emoji.get('shortcode')}:`, emoji);
|
|
|
|
@ -28,6 +29,7 @@ class ChatMessageList extends ImmutablePureComponent {
|
|
|
|
|
static propTypes = {
|
|
|
|
|
dispatch: PropTypes.func.isRequired,
|
|
|
|
|
intl: PropTypes.object.isRequired,
|
|
|
|
|
chatId: PropTypes.string,
|
|
|
|
|
chatMessages: ImmutablePropTypes.list,
|
|
|
|
|
chatMessageIds: ImmutablePropTypes.orderedSet,
|
|
|
|
|
me: PropTypes.node,
|
|
|
|
@ -61,7 +63,7 @@ class ChatMessageList extends ImmutablePureComponent {
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
setRef = (c) => {
|
|
|
|
|
setBubbleRef = (c) => {
|
|
|
|
|
if (!c) return;
|
|
|
|
|
const links = c.querySelectorAll('a[rel="ugc"]');
|
|
|
|
|
|
|
|
|
@ -72,11 +74,30 @@ class ChatMessageList extends ImmutablePureComponent {
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate(prevProps) {
|
|
|
|
|
if (prevProps.chatMessages !== this.props.chatMessages)
|
|
|
|
|
this.scrollToBottom();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
|
this.node.removeEventListener('scroll', this.handleScroll);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleLoadMore = () => {
|
|
|
|
|
const { dispatch, chatId, chatMessageIds } = this.props;
|
|
|
|
|
const maxId = chatMessageIds.last();
|
|
|
|
|
dispatch(fetchChatMessages(chatId, maxId));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
handleScroll = throttle(() => {
|
|
|
|
|
if (this.node.scrollTop < 100) this.handleLoadMore();
|
|
|
|
|
}, 150, {
|
|
|
|
|
trailing: true,
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
parsePendingContent = content => {
|
|
|
|
|
return escape(content).replace(/(?:\r\n|\r|\n)/g, '<br>');
|
|
|
|
|
}
|
|
|
|
@ -89,11 +110,16 @@ class ChatMessageList extends ImmutablePureComponent {
|
|
|
|
|
return emojify(formatted, emojiMap.toJS());
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setRef = (c) => {
|
|
|
|
|
this.node = c;
|
|
|
|
|
this.node.addEventListener('scroll', this.handleScroll);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
const { chatMessages, me } = this.props;
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className='chat-messages'>
|
|
|
|
|
<div className='chat-messages' ref={this.setRef}>
|
|
|
|
|
{chatMessages.map(chatMessage => (
|
|
|
|
|
<div
|
|
|
|
|
className={classNames('chat-message', {
|
|
|
|
@ -106,7 +132,7 @@ class ChatMessageList extends ImmutablePureComponent {
|
|
|
|
|
title={this.getFormattedTimestamp(chatMessage)}
|
|
|
|
|
className='chat-message__bubble'
|
|
|
|
|
dangerouslySetInnerHTML={{ __html: this.parseContent(chatMessage) }}
|
|
|
|
|
ref={this.setRef}
|
|
|
|
|
ref={this.setBubbleRef}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|