From cf6a5b3446cdac5d6e5c04b721abd0618c152b67 Mon Sep 17 00:00:00 2001
From: warrickct <warrickct@gmail.com>
Date: Wed, 2 Mar 2022 15:47:32 +1100
Subject: [PATCH] Request banner appearing and tallying based on only unread
 requests

---
 ts/components/leftpane/MessageRequestsBanner.tsx |  8 ++++----
 ts/state/selectors/conversations.ts              | 15 +++++++++++++--
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/ts/components/leftpane/MessageRequestsBanner.tsx b/ts/components/leftpane/MessageRequestsBanner.tsx
index 92da28699..01334bf4a 100644
--- a/ts/components/leftpane/MessageRequestsBanner.tsx
+++ b/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>
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts
index e51107e7d..b06b20e13 100644
--- a/ts/state/selectors/conversations.ts
+++ b/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> => {