refactor: sidebar badges

Author: aleksandernsilva

apps/meteor/client/sidebar/RoomList/SideBarItemTemplateWithData.tsx

@@ -1,6 +1,6 @@
 import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom, isVideoConfMessage } from '@rocket.chat/core-typings';
-import { Badge, Sidebar, SidebarItemAction, SidebarItemActions, Margins } from '@rocket.chat/fuselage';
+import { Sidebar, SidebarItemAction, SidebarItemActions } from '@rocket.chat/fuselage';
 import { useLayout } from '@rocket.chat/ui-contexts';
 import DOMPurify from 'dompurify';
 import type { TFunction } from 'i18next';
@@ -13,8 +13,9 @@ import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
 import { isIOsDevice } from '../../lib/utils/isIOsDevice';
 import { useOmnichannelPriorities } from '../../views/omnichannel/hooks/useOmnichannelPriorities';
 import RoomMenu from '../RoomMenu';
-import { OmnichannelBadges } from '../badges/OmnichannelBadges';
+import SidebarItemBadges from '../badges/SidebarItemBadges';
 import type { useAvatarTemplate } from '../hooks/useAvatarTemplate';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
 
 const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: TFunction): string | undefined => {
 	if (!lastMessage) {
@@ -35,24 +36,6 @@ const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: TFunction
 	return `${lastMessage.u.name || lastMessage.u.username}: ${normalizeSidebarMessage(lastMessage, t)}`;
 };
 
-const getBadgeTitle = (userMentions: number, threadUnread: number, groupMentions: number, unread: number, t: TFunction) => {
-	const title = [] as string[];
-	if (userMentions) {
-		title.push(t('mentions_counter', { count: userMentions }));
-	}
-	if (threadUnread) {
-		title.push(t('threads_counter', { count: threadUnread }));
-	}
-	if (groupMentions) {
-		title.push(t('group_mentions_counter', { count: groupMentions }));
-	}
-	const count = unread - userMentions - groupMentions;
-	if (count > 0) {
-		title.push(t('unread_messages_counter', { count }));
-	}
-	return title.join(', ');
-};
-
 type RoomListRowProps = {
 	extended: boolean;
 	t: TFunction;
@@ -110,20 +93,9 @@ function SideBarItemTemplateWithData({
 	const href = roomCoordinator.getRouteLink(room.t, room) || '';
 	const title = roomCoordinator.getRoomName(room.t, room) || '';
 
-	const {
-		lastMessage,
-		hideUnreadStatus,
-		hideMentionStatus,
-		unread = 0,
-		alert,
-		userMentions,
-		groupMentions,
-		tunread = [],
-		tunreadUser = [],
-		rid,
-		t: type,
-		cl,
-	} = room;
+	const { lastMessage, hideUnreadStatus, unread = 0, alert, rid, t: type, cl } = room;
+
+	const { unreadCount, unreadTitle, showUnread } = useUnreadDisplay(room);
 
 	const highlighted = Boolean(!hideUnreadStatus && (alert || unread));
 	const icon = (
@@ -152,32 +124,6 @@ function SideBarItemTemplateWithData({
 		<span className='message-body--unstyled' dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(message) }} />
 	) : null;
 
-	const threadUnread = tunread.length > 0;
-	const variant =
-		((userMentions || tunreadUser.length) && 'danger') || (threadUnread && 'primary') || (groupMentions && 'warning') || 'secondary';
-
-	const isUnread = unread > 0 || threadUnread;
-	const showBadge = !hideUnreadStatus || (!hideMentionStatus && (Boolean(userMentions) || tunreadUser.length > 0));
-
-	const badgeTitle = getBadgeTitle(userMentions, tunread.length, groupMentions, unread, t);
-
-	const badges = (
-		<Margins inlineStart={8}>
-			{showBadge && isUnread && (
-				<Badge
-					role='status'
-					{...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)}
-					variant={variant}
-					title={badgeTitle}
-					aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle: badgeTitle, roomTitle: title })}
-				>
-					<span aria-hidden>{unread + tunread?.length}</span>
-				</Badge>
-			)}
-			{isOmnichannelRoom(room) && <OmnichannelBadges room={room} />}
-		</Margins>
-	);
-
 	return (
 		<SideBarItemTemplate
 			is='a'
@@ -190,21 +136,21 @@ function SideBarItemTemplateWithData({
 			onClick={(): void => {
 				!selected && sidebar.toggle();
 			}}
-			aria-label={showBadge && isUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle: badgeTitle, roomTitle: title }) : title}
+			aria-label={showUnread ? t('__unreadTitle__from__roomTitle__', { unreadTitle, roomTitle: title }) : title}
 			title={title}
 			time={lastMessage?.ts}
 			subtitle={subtitle}
 			icon={icon}
 			style={style}
-			badges={badges}
+			badges={<SidebarItemBadges room={room} roomTitle={title} />}
 			avatar={AvatarTemplate && <AvatarTemplate {...room} />}
 			actions={actions}
 			menu={
 				!isIOsDevice && !isAnonymous && (!isQueued || (isQueued && isPriorityEnabled))
 					? (): ReactElement => (
 							<RoomMenu
 								alert={alert}
-								threadUnread={threadUnread}
+								threadUnread={unreadCount.threads > 0}
 								rid={rid}
 								unread={!!unread}
 								roomOpen={selected}

apps/meteor/client/sidebar/badges/OmnichannelBadges.tsx

@@ -5,7 +5,7 @@ import RoomActivityIcon from '../../views/omnichannel/components/RoomActivityIco
 import { useOmnichannelPriorities } from '../../views/omnichannel/hooks/useOmnichannelPriorities';
 import { PriorityIcon } from '../../views/omnichannel/priorities/PriorityIcon';
 
-export const OmnichannelBadges = ({ room }: { room: ISubscription & IRoom }) => {
+const OmnichannelBadges = ({ room }: { room: ISubscription & IRoom }) => {
 	const { enabled: isPriorityEnabled } = useOmnichannelPriorities();
 
 	if (!isOmnichannelRoom(room)) {
@@ -19,3 +19,5 @@ export const OmnichannelBadges = ({ room }: { room: ISubscription & IRoom }) =>
 		</>
 	);
 };
+
+export default OmnichannelBadges;

apps/meteor/client/sidebar/badges/SidebarItemBadges.spec.tsx

@@ -0,0 +1,61 @@
+import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { render, screen } from '@testing-library/react';
+
+import SidebarItemBadges from './SidebarItemBadges';
+import { createFakeSubscription } from '../../../tests/mocks/data';
+
+jest.mock('./OmnichannelBadges', () => ({
+	__esModule: true,
+	default: () => <div data-testid='omnichannel-badges'>OmnichannelBadges</div>,
+}));
+
+const createRoomWithSubscription = (overrides: Partial<SubscriptionWithRoom> = {}) => {
+	return createFakeSubscription(overrides) as unknown as IRoom & ISubscription;
+};
+
+describe('SidebarItemBadges', () => {
+	const appRoot = mockAppRoot()
+		.withTranslations('en', 'core', {
+			Message_request: 'Message request',
+			mentions_counter_one: '{{count}} mention',
+			mentions_counter_other: '{{count}} mentions',
+			__unreadTitle__from__roomTitle__: '{{unreadTitle}} from {{roomTitle}}',
+		})
+		.build();
+
+	afterEach(() => {
+		jest.resetAllMocks();
+	});
+
+	it('shound render UnreadBadge when there are unread messages', () => {
+		render(
+			<SidebarItemBadges room={createRoomWithSubscription({ unread: 1, userMentions: 1, groupMentions: 0 })} roomTitle='Test Room' />,
+			{ wrapper: appRoot },
+		);
+
+		expect(screen.getByRole('status', { name: '1 mention from Test Room' })).toBeInTheDocument();
+	});
+
+	it('shound not render UnreadBadge when there are no unread messages', () => {
+		render(
+			<SidebarItemBadges room={createRoomWithSubscription({ unread: 0, userMentions: 0, groupMentions: 0 })} roomTitle='Test Room' />,
+			{ wrapper: appRoot },
+		);
+
+		expect(screen.queryByRole('status', { name: 'Test Room' })).not.toBeInTheDocument();
+	});
+
+	it('should render OmnichannelBadges when the room is an omnichannel room', () => {
+		render(<SidebarItemBadges room={createRoomWithSubscription({ t: 'l' })} />, { wrapper: appRoot });
+
+		expect(screen.getByTestId('omnichannel-badges')).toBeInTheDocument();
+	});
+
+	it('should not render OmnichannelBadges when the room is not an omnichannel room', () => {
+		render(<SidebarItemBadges room={createRoomWithSubscription({ t: 'p' })} />, { wrapper: appRoot });
+
+		expect(screen.queryByTestId('omnichannel-badges')).not.toBeInTheDocument();
+	});
+});

apps/meteor/client/sidebar/badges/SidebarItemBadges.tsx

@@ -0,0 +1,26 @@
+import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { Margins } from '@rocket.chat/fuselage';
+
+import OmnichannelBadges from './OmnichannelBadges';
+import UnreadBadge from './UnreadBadge';
+import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
+
+type SidebarItemBadgesProps = {
+	room: ISubscription & IRoom;
+	roomTitle?: string;
+};
+
+const SidebarItemBadges = ({ room, roomTitle }: SidebarItemBadgesProps) => {
+	const { unreadCount, unreadTitle, unreadVariant, showUnread } = useUnreadDisplay(room);
+
+	return (
+		<Margins inlineStart={8}>
+			{showUnread && <UnreadBadge title={unreadTitle} roomTitle={roomTitle} variant={unreadVariant} total={unreadCount.total} />}
+
+			{isOmnichannelRoom(room) && <OmnichannelBadges room={room} />}
+		</Margins>
+	);
+};
+
+export default SidebarItemBadges;

apps/meteor/client/sidebar/badges/UnreadBadge.tsx

@@ -0,0 +1,27 @@
+import { Badge } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+type UnreadBadgeProps = {
+	title: string;
+	roomTitle?: string;
+	variant: 'primary' | 'warning' | 'danger' | 'secondary';
+	total: number;
+};
+
+const UnreadBadge = ({ title, variant, total, roomTitle }: UnreadBadgeProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<Badge
+			role='status'
+			{...({ style: { display: 'inline-flex', flexShrink: 0 } } as any)}
+			variant={variant}
+			title={title}
+			aria-label={t('__unreadTitle__from__roomTitle__', { unreadTitle: title, roomTitle })}
+		>
+			<span aria-hidden>{total}</span>
+		</Badge>
+	);
+};
+
+export default UnreadBadge;