diff --git a/ts/components/icon/SessionNotificationCount.tsx b/ts/components/icon/SessionNotificationCount.tsx index ac26a8872..ba014f7e9 100644 --- a/ts/components/icon/SessionNotificationCount.tsx +++ b/ts/components/icon/SessionNotificationCount.tsx @@ -1,5 +1,6 @@ import React from 'react'; import styled from 'styled-components'; +import { Constants } from '../../session'; type Props = { overflowingAt: number; @@ -57,9 +58,21 @@ const NotificationOrUnreadCount = ({ centeredOnTop, overflowingAt, count }: Prop }; export const SessionNotificationCount = (props: Pick) => { - return ; + return ( + + ); }; export const SessionUnreadCount = (props: Pick) => { - return ; + return ( + + ); }; diff --git a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx index 1f435bfb1..e8e407a65 100644 --- a/ts/components/leftpane/conversation-list-item/HeaderItem.tsx +++ b/ts/components/leftpane/conversation-list-item/HeaderItem.tsx @@ -12,6 +12,7 @@ import { useMentionedUs, useUnreadCount, } from '../../../hooks/useParamSelector'; +import { Constants } from '../../../session'; import { openConversationToSpecificMessage, openConversationWithMessages, @@ -160,8 +161,14 @@ const UnreadCount = ({ convoId }: { convoId: string }) => { const unreadMsgCount = useUnreadCount(convoId); const forcedUnread = useIsForcedUnreadWithoutUnreadMsg(convoId); + const unreadWithOverflow = + unreadMsgCount > Constants.CONVERSATION.MAX_CONVO_UNREAD_COUNT + ? `${Constants.CONVERSATION.MAX_CONVO_UNREAD_COUNT}+` + : unreadMsgCount || ' '; + + // TODO would be good to merge the style of this with SessionNotificationCount or SessionUnreadCount at some point. return unreadMsgCount > 0 || forcedUnread ? ( -

{unreadMsgCount || ' '}

+

{unreadWithOverflow}

) : null; }; diff --git a/ts/hooks/useParamSelector.ts b/ts/hooks/useParamSelector.ts index 71744f8ee..e51be0c27 100644 --- a/ts/hooks/useParamSelector.ts +++ b/ts/hooks/useParamSelector.ts @@ -7,7 +7,6 @@ import { hasValidOutgoingRequestValues, } from '../models/conversation'; import { isUsAnySogsFromCache } from '../session/apis/open_group_api/sogsv3/knownBlindedkeys'; -import { CONVERSATION } from '../session/constants'; import { TimerOptions, TimerOptionsArray } from '../session/disappearing_messages/timerOptions'; import { PubKey } from '../session/types'; import { UserUtils } from '../session/utils'; @@ -241,12 +240,11 @@ export function useMessageReactsPropsById(messageId?: string) { /** * Returns the unread count of that conversation, or 0 if none are found. - * Note: returned value is capped at a max of CONVERSATION.MAX_UNREAD_COUNT + * Note: returned value is capped at a max of CONVERSATION.MAX_CONVO_UNREAD_COUNT */ export function useUnreadCount(conversationId?: string): number { const convoProps = useConversationPropsById(conversationId); - const convoUnreadCount = convoProps?.unreadCount || 0; - return Math.min(CONVERSATION.MAX_UNREAD_COUNT, convoUnreadCount); + return convoProps?.unreadCount || 0; } export function useHasUnread(conversationId?: string): boolean { diff --git a/ts/session/constants.ts b/ts/session/constants.ts index 72602b720..806061e31 100644 --- a/ts/session/constants.ts +++ b/ts/session/constants.ts @@ -51,8 +51,9 @@ export const CONVERSATION = { // Maximum voice message duraton of 5 minutes // which equates to 1.97 MB MAX_VOICE_MESSAGE_DURATION: 300, - MAX_UNREAD_COUNT: 999, -}; + MAX_CONVO_UNREAD_COUNT: 999, + MAX_GLOBAL_UNREAD_COUNT: 99, // the global one does not look good with 4 digits (999+) so we have a smaller one for it +} as const; /** * The file server and onion request max upload size is 10MB precisely. diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 16a46412b..5babd3893 100644 --- a/ts/state/selectors/conversations.ts +++ b/ts/state/selectors/conversations.ts @@ -336,7 +336,6 @@ const _getGlobalUnreadCount = (sortedConversations: Array } if ( - globalUnreadCount < 100 && isNumber(conversation.unreadCount) && isFinite(conversation.unreadCount) && conversation.unreadCount > 0 && @@ -345,7 +344,6 @@ const _getGlobalUnreadCount = (sortedConversations: Array globalUnreadCount += conversation.unreadCount; } } - return globalUnreadCount; }; diff --git a/ts/state/selectors/selectedConversation.ts b/ts/state/selectors/selectedConversation.ts index 0dd1fe42f..3f4b2bf3c 100644 --- a/ts/state/selectors/selectedConversation.ts +++ b/ts/state/selectors/selectedConversation.ts @@ -1,5 +1,6 @@ import { isString } from 'lodash'; import { useSelector } from 'react-redux'; +import { useUnreadCount } from '../../hooks/useParamSelector'; import { ConversationTypeEnum, isOpenOrClosedGroup } from '../../models/conversationAttributes'; import { DisappearingMessageConversationModeType, @@ -60,10 +61,6 @@ const getIsSelectedActive = (state: StateType): boolean => { return Boolean(getSelectedConversation(state)?.activeAt) || false; }; -const getSelectedUnreadCount = (state: StateType) => { - return getSelectedConversation(state)?.unreadCount || 0; -}; - const getIsSelectedNoteToSelf = (state: StateType): boolean => { return getSelectedConversation(state)?.isMe || false; }; @@ -307,7 +304,8 @@ export function useSelectedIsActive() { } export function useSelectedUnreadCount() { - return useSelector(getSelectedUnreadCount); + const selectedConversation = useSelectedConversationKey(); + return useUnreadCount(selectedConversation); } export function useSelectedIsNoteToSelf() {