Added number of unread messages banner to scroll down button in chat

src/Components/ColumnMiddle/MessagesList.js

@@ -1731,7 +1731,7 @@ class MessagesList extends React.Component {
                 <ActionBar chatId={chatId} />
                 <Placeholder />
                 {scrollDownVisible && (
-                    <ScrollDownButton ref={this.scrollDownButtonRef} onClick={this.handleScrollDownClick} />
+                    <ScrollDownButton ref={this.scrollDownButtonRef} onClick={this.handleScrollDownClick} chatId={chatId}/>
                 )}
                 <FilesDropTarget />
                 <StickersHint />

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 (
             <div className='scroll-down-button'>
-                <IconButton disableRipple={true} onMouseDown={onClick}>
-                    <ArrowDownwardIcon />
-                </IconButton>
+                <Badge badgeContent={unreadCount || 0} color="primary" overlap="circle">
+                    <IconButton disableRipple={true} onMouseDown={onClick}>
+                      <ArrowDownwardIcon />
+                    </IconButton>
+                </Badge>
             </div>
         );
     }
+
+  onFastUpdatingComplete = update => {
+      this.forceUpdate();
+  };
+
+  onUpdate = update => {
+      const { chatId } = this.props;
+
+      if (update.chat_id !== chatId) return;
+
+      this.forceUpdate();
+  };
+
 }
 
 ScrollDownButton.propTypes = {

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;