diff --git a/src/Components/ColumnMiddle/MessagesList.js b/src/Components/ColumnMiddle/MessagesList.js index f3342c9ba..4f73e7c1d 100644 --- a/src/Components/ColumnMiddle/MessagesList.js +++ b/src/Components/ColumnMiddle/MessagesList.js @@ -1731,7 +1731,7 @@ class MessagesList extends React.Component { {scrollDownVisible && ( - + )} diff --git a/src/Components/ColumnMiddle/ScrollDownButton.js b/src/Components/ColumnMiddle/ScrollDownButton.js index 70f7cc75f..89e454259 100644 --- a/src/Components/ColumnMiddle/ScrollDownButton.js +++ b/src/Components/ColumnMiddle/ScrollDownButton.js @@ -8,21 +8,80 @@ import React from 'react'; import PropTypes from 'prop-types'; import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward'; +import Badge from '@material-ui/core/Badge'; import IconButton from '@material-ui/core/IconButton'; +import ChatStore from '../../Stores/ChatStore'; import './ScrollDownButton.css'; +import { getChatUnreadCount } from '../../Utils/Chat'; class ScrollDownButton extends React.Component { + shouldComponentUpdate(nextProps, nextState) { + const { + chatId, + chatList + } = this.props; + + if (nextProps.chatId !== chatId) { + return true; + } + + if (nextProps.chatList !== chatList) { + return true; + } + + return false; + } + + componentDidMount() { + ChatStore.on('clientUpdateFastUpdatingComplete', this.onFastUpdatingComplete); + ChatStore.on('updateChatIsMarkedAsUnread', this.onUpdate); + ChatStore.on('updateChatReadInbox', this.onUpdate); + ChatStore.on('updateChatLastMessage', this.onUpdate); + ChatStore.on('updateChatReadOutbox', this.onUpdate); + ChatStore.on('updateChatUnreadMentionCount', this.onUpdate); + ChatStore.on('updateMessageMentionRead', this.onUpdate); + } + + componentWillUnmount() { + ChatStore.on('clientUpdateFastUpdatingComplete', this.onFastUpdatingComplete); + ChatStore.on('updateChatIsMarkedAsUnread', this.onUpdate); + ChatStore.on('updateChatReadInbox', this.onUpdate); + ChatStore.on('updateChatLastMessage', this.onUpdate); + ChatStore.on('updateChatReadOutbox', this.onUpdate); + ChatStore.on('updateChatUnreadMentionCount', this.onUpdate); + ChatStore.on('updateMessageMentionRead', this.onUpdate); + } + + render() { const { onClick } = this.props; + const { chatId } = this.props; + + const unreadCount = getChatUnreadCount(chatId); return (
- - - + + + + +
); } + + onFastUpdatingComplete = update => { + this.forceUpdate(); + }; + + onUpdate = update => { + const { chatId } = this.props; + + if (update.chat_id !== chatId) return; + + this.forceUpdate(); + }; + } ScrollDownButton.propTypes = { diff --git a/src/Utils/Chat.js b/src/Utils/Chat.js index f7fef8da1..f3fa394f5 100644 --- a/src/Utils/Chat.js +++ b/src/Utils/Chat.js @@ -529,6 +529,15 @@ function showChatUnreadMentionCount(chatId) { return unread_mention_count > 0; } +export function getChatUnreadMentionCount(chatId) { + const chat = ChatStore.get(chatId); + if (!chat) return false; + + const { unread_mention_count } = chat; + + return unread_mention_count; +} + function showChatUnreadCount(chatId) { const chat = ChatStore.get(chatId); if (!chat) return false; @@ -542,6 +551,15 @@ function showChatUnreadCount(chatId) { ); } +export function getChatUnreadCount(chatId) { + const chat = ChatStore.get(chatId); + if (!chat) return false; + + const { unread_count } = chat; + + return unread_count; +} + function isChatUnread(chatId) { const chat = ChatStore.get(chatId); if (!chat) return false;