Add a notification for new messages on mobile (#5179) (#5234)

webapp/components/notify_counts.jsx

@@ -6,14 +6,16 @@ import ChannelStore from 'stores/channel_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 function getCountsStateFromStores() {
-    let count = 0;
+    let mentionCount = 0;
+    let messageCount = 0;
     const teamMembers = TeamStore.getMyTeamMembers();
     const channels = ChannelStore.getAll();
     const members = ChannelStore.getMyMembers();
 
     teamMembers.forEach((member) => {
         if (member.team_id !== TeamStore.getCurrentId()) {
-            count += (member.mention_count || 0);
+            mentionCount += (member.mention_count || 0);
+            messageCount += (member.msg_count || 0);
         }
     });
 
@@ -24,13 +26,16 @@ function getCountsStateFromStores() {
         }
 
         if (channel.type === 'D') {
-            count += channel.total_msg_count - channelMember.msg_count;
+            mentionCount += channel.total_msg_count - channelMember.msg_count;
         } else if (channelMember.mention_count > 0) {
-            count += channelMember.mention_count;
+            mentionCount += channelMember.mention_count;
+        }
+        if (channelMember.notify_props.mark_unread !== 'mention' && channel.total_msg_count - channelMember.msg_count > 0) {
+            messageCount += 1;
         }
     });
 
-    return {count};
+    return {mentionCount, messageCount};
 }
 
 import React from 'react';
@@ -63,8 +68,10 @@ export default class NotifyCounts extends React.Component {
         }
     }
     render() {
-        if (this.state.count) {
+        if (this.state.mentionCount) {
-            return <span className='badge badge-notify'>{this.state.count}</span>;
+            return <span className='badge badge-notify'>{this.state.mentionCount}</span>;
+        } else if (this.state.messageCount) {
+            return <span className='badge badge-notify'>{'•'}</span>;
         }
         return null;
     }