add number to unread count (keybase#24069)

shared/chat/inbox/container.tsx

@@ -189,7 +189,7 @@ const Connected = Container.namedConnect(
     }
     const rows: Array<Types.ChatInboxRowItem> = [...smallRows, ...divider, ...bigRows]
 
-    const unreadIndices: Array<number> = []
+    const unreadIndices: Map<number, number> = new Map()
     for (let i = rows.length - 1; i >= 0; i--) {
       const row = rows[i]
       if (!['big', 'bigHeader', 'teamBuilder'].includes(row.type)) {
@@ -202,7 +202,7 @@ const Connected = Container.namedConnect(
         row.conversationIDKey !== stateProps._selectedConversationIDKey
       ) {
         // on mobile include all convos, on desktop only not currently selected convo
-        unreadIndices.unshift(i)
+        unreadIndices.set(i, stateProps._badgeMap.get(row.conversationIDKey) || 0)
       }
     }
 

shared/chat/inbox/index.d.ts

@@ -17,7 +17,7 @@ export type Props = {
   setInboxNumSmallRows: (rows: number) => void
   smallTeamsExpanded: boolean
   toggleSmallTeamsExpanded: () => void
-  unreadIndices: Array<number>
+  unreadIndices: Map<number, number>
 }
 
 export default class Inbox extends React.Component<Props> {}

shared/chat/inbox/index.desktop.tsx

@@ -21,6 +21,7 @@ type State = {
   dragY: number
   showFloating: boolean
   showUnread: boolean
+  unreadCount: number
 }
 
 const widths = [10, 80, 2, 66]
@@ -53,6 +54,7 @@ class Inbox extends React.Component<T.Props, State> {
     dragY: -1,
     showFloating: false,
     showUnread: false,
+    unreadCount: 0,
   }
 
   private mounted: boolean = false
@@ -218,17 +220,24 @@ class Inbox extends React.Component<T.Props, State> {
     if (!this.mounted) {
       return
     }
-    if (!this.props.unreadIndices.length || this.lastVisibleIdx < 0) {
+    if (!this.props.unreadIndices.size || this.lastVisibleIdx < 0) {
       if (this.state.showUnread) {
         this.setState({showUnread: false})
       }
       return
     }
 
-    const firstOffscreenIdx = this.props.unreadIndices.find(idx => idx > this.lastVisibleIdx)
+    let unreadCount = 0
+    let firstOffscreenIdx = 0
+    this.props.unreadIndices.forEach((count, idx) => {
+      if (idx > this.lastVisibleIdx) {
+        firstOffscreenIdx = idx
+        unreadCount += count
+      }
+    })
     if (firstOffscreenIdx) {
       if (!this.state.showUnread) {
-        this.setState({showUnread: true})
+        this.setState({showUnread: true, unreadCount})
       }
       this.firstOffscreenIdx = firstOffscreenIdx
     } else {
@@ -376,7 +385,7 @@ class Inbox extends React.Component<T.Props, State> {
           </div>
           {floatingDivider || (this.props.rows.length === 0 && <BuildTeam />)}
           {this.state.showUnread && !this.state.showFloating && (
-            <UnreadShortcut onClick={this.scrollToUnread} />
+            <UnreadShortcut onClick={this.scrollToUnread} unreadCount={this.state.unreadCount} />
           )}
         </InboxHoverContainer>
       </Kb.ErrorBoundary>

shared/chat/inbox/index.native.tsx

@@ -45,6 +45,7 @@ const NoChats = (props: {onNewChat: () => void}) => (
 type State = {
   showFloating: boolean
   showUnread: boolean
+  unreadCount: number
 }
 
 class Inbox extends React.PureComponent<T.Props, State> {
@@ -57,7 +58,7 @@ class Inbox extends React.PureComponent<T.Props, State> {
   private firstOffscreenIdx: number = -1
   private lastVisibleIdx: number = -1
 
-  state = {showFloating: false, showUnread: false}
+  state = {showFloating: false, showUnread: false, unreadCount: 0}
 
   componentDidUpdate(prevProps: T.Props) {
     if (!shallowEqual(prevProps.unreadIndices, this.props.unreadIndices)) {
@@ -144,14 +145,21 @@ class Inbox extends React.PureComponent<T.Props, State> {
   }
 
   private updateShowUnread = () => {
-    if (!this.props.unreadIndices.length || this.lastVisibleIdx < 0) {
+    if (!this.props.unreadIndices.size || this.lastVisibleIdx < 0) {
       this.setState(s => (s.showUnread ? {showUnread: false} : null))
       return
     }
 
-    const firstOffscreenIdx = this.props.unreadIndices.find(idx => idx > this.lastVisibleIdx)
+    let unreadCount = 0
+    let firstOffscreenIdx = 0
+    this.props.unreadIndices.forEach((count, idx) => {
+      if (idx > this.lastVisibleIdx) {
+        firstOffscreenIdx = idx
+        unreadCount += count
+      }
+    })
     if (firstOffscreenIdx) {
-      this.setState(s => (s.showUnread ? null : {showUnread: true}))
+      this.setState(s => (s.showUnread ? null : {showUnread: true, unreadCount}))
       this.firstOffscreenIdx = firstOffscreenIdx
     } else {
       this.setState(s => (s.showUnread ? {showUnread: false} : null))
@@ -277,7 +285,7 @@ class Inbox extends React.PureComponent<T.Props, State> {
               <BuildTeam />
             ))}
           {this.state.showUnread && !this.props.isSearching && !this.state.showFloating && (
-            <UnreadShortcut onClick={this.scrollToUnread} />
+            <UnreadShortcut onClick={this.scrollToUnread} unreadCount={this.state.unreadCount} />
           )}
         </Kb.Box>
       </Kb.ErrorBoundary>

shared/chat/inbox/index.stories.tsx

@@ -372,7 +372,7 @@ const propsInboxCommon = {
   selectedConversationIDKey: Types.stringToConversationIDKey('fake conversation id key'),
   smallTeamsExpanded: false,
   toggleSmallTeamsExpanded: Sb.action('toggleSmallTeamsExpanded'),
-  unreadIndices: [],
+  unreadIndices: new Map(),
   setInboxNumSmallRows: Sb.action('setInboxNumSmallRows'),
   inboxNumSmallRows: 5,
 }

shared/chat/inbox/unread-shortcut.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react'
 import * as Kb from '../../common-adapters'
 import * as Styles from '../../styles'
+import {pluralize} from '../../util/string'
 
 type Props = {
   onClick: () => void
+  unreadCount: number
 }
 
 const UnreadShortcut = (props: Props) => (
@@ -17,7 +19,7 @@ const UnreadShortcut = (props: Props) => (
     >
       <Kb.Icon type="iconfont-arrow-down" sizeType="Small" color={Styles.globalColors.white} />
       <Kb.Text negative={true} type="BodySmallSemibold">
-        Unread messages
+        {props.unreadCount} unread {pluralize('message', props.unreadCount)}
       </Kb.Text>
     </Kb.Box2>
   </Kb.ClickableBox>