Request banner appearing and tallying based on only unread requests

ts/components/leftpane/MessageRequestsBanner.tsx

@@ -3,7 +3,7 @@ import { contextMenu } from 'react-contexify';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
 import styled from 'styled-components';
-import { getConversationRequests } from '../../state/selectors/conversations';
+import { getUnreadConversationRequests } from '../../state/selectors/conversations';
 import { getHideMessageRequestBanner } from '../../state/selectors/userConfig';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 import { MemoMessageRequestBannerContextMenu } from '../menu/MessageRequestBannerContextMenu';
@@ -87,10 +87,10 @@ export const CirclularIcon = (props: { iconType: SessionIconType; iconSize: Sess
 
 export const MessageRequestsBanner = (props: { handleOnClick: () => any }) => {
   const { handleOnClick } = props;
-  const conversationRequests = useSelector(getConversationRequests);
+  const conversationRequestsUnread = useSelector(getUnreadConversationRequests).length;
   const hideRequestBanner = useSelector(getHideMessageRequestBanner);
 
-  if (!conversationRequests.length || hideRequestBanner) {
+  if (!conversationRequestsUnread || hideRequestBanner) {
     return null;
   }
 
@@ -124,7 +124,7 @@ export const MessageRequestsBanner = (props: { handleOnClick: () => any }) => {
           {window.i18n('messageRequests')}
         </StyledMessageRequestBannerHeader>
         <StyledUnreadCounter>
-          <div>{conversationRequests.length || 0}</div>
+          <div>{conversationRequestsUnread || 0}</div>
         </StyledUnreadCounter>
       </StyledMessageRequestBanner>
       <Portal>

ts/state/selectors/conversations.ts

@@ -18,7 +18,6 @@ import { ConversationModel, ConversationTypeEnum } from '../../models/conversati
 import { LocalizerType } from '../../types/Util';
 import { ConversationHeaderTitleProps } from '../../components/conversation/ConversationHeader';
 import _ from 'lodash';
-import { getHideMessageRequestBanner } from './userConfig';
 import { ReplyingToMessageProps } from '../../components/conversation/composition/CompositionBox';
 import { MessageAttachmentSelectorProps } from '../../components/conversation/message/message-content/MessageAttachment';
 import { MessageAuthorSelectorProps } from '../../components/conversation/message/message-content/MessageAuthorText';
@@ -456,10 +455,22 @@ const _getConversationRequests = (
 
 export const getConversationRequests = createSelector(
   getSortedConversations,
-  getHideMessageRequestBanner,
   _getConversationRequests
 );
 
+const _getUnreadConversationRequests = (
+  sortedConversationRequests: Array<ReduxConversationType>
+): Array<ReduxConversationType> => {
+  return _.filter(sortedConversationRequests, conversation => {
+    return conversation && conversation.unreadCount && conversation.unreadCount > 0;
+  });
+};
+
+export const getUnreadConversationRequests = createSelector(
+  getConversationRequests,
+  _getUnreadConversationRequests
+);
+
 const _getPrivateContactsPubkeys = (
   sortedConversations: Array<ReduxConversationType>
 ): Array<string> => {