Skip to content

Commit 5aa2110

Browse files
aleksandernsilvaaleksandernsilva
committed
refactor(sidebar-v1): replaced ISubscription & IRoom types with SubscriptionWithRoom
1 parent e6658db commit 5aa2110

File tree

9 files changed

+37
-39
lines changed

9 files changed

+37
-39
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import type { IRoom } from '@rocket.chat/core-typings';
21
import { css } from '@rocket.chat/css-in-js';
32
import { Box } from '@rocket.chat/fuselage';
43
import { useResizeObserver } from '@rocket.chat/fuselage-hooks';
54
import { VirtualizedScrollbars } from '@rocket.chat/ui-client';
5+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
66
import { useUserPreference, useUserId } from '@rocket.chat/ui-contexts';
77
import type { ReactElement } from 'react';
88
import { useMemo } from 'react';
@@ -19,7 +19,7 @@ import { useRoomList } from '../hooks/useRoomList';
1919
import { useShortcutOpenMenu } from '../hooks/useShortcutOpenMenu';
2020
import { useTemplateByViewMode } from '../hooks/useTemplateByViewMode';
2121

22-
const computeItemKey = (index: number, room: IRoom): IRoom['_id'] | number => room._id || index;
22+
const computeItemKey = (index: number, room: SubscriptionWithRoom): SubscriptionWithRoom['_id'] | number => room._id || index;
2323

2424
const RoomList = (): ReactElement => {
2525
const { t } = useTranslation();

‎apps/meteor/client/sidebar/RoomList/RoomListRow.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
21
import { SidebarSection } from '@rocket.chat/fuselage';
2+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
33
import { useVideoConfAcceptCall, useVideoConfRejectIncomingCall, useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
44
import type { TFunction } from 'i18next';
55
import type { ReactElement } from 'react';
@@ -19,7 +19,7 @@ type RoomListRowProps = {
1919
isAnonymous: boolean;
2020
};
2121

22-
const RoomListRow = ({ data, item }: { data: RoomListRowProps; item: ISubscription & IRoom }): ReactElement => {
22+
const RoomListRow = ({ data, item }: { data: RoomListRowProps; item: SubscriptionWithRoom }): ReactElement => {
2323
const { extended, t, SideBarItemTemplate, AvatarTemplate, openedRoom, sidebarViewMode } = data;
2424

2525
const acceptCall = useVideoConfAcceptCall();

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1-
import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
1+
import type { IMessage } from '@rocket.chat/core-typings';
22
import { isDirectMessageRoom, isMultipleDirectMessageRoom, isOmnichannelRoom, isVideoConfMessage } from '@rocket.chat/core-typings';
33
import { Sidebar, SidebarItemAction, SidebarItemActions } from '@rocket.chat/fuselage';
4+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
45
import { useLayout } from '@rocket.chat/ui-contexts';
56
import DOMPurify from 'dompurify';
67
import type { TFunction } from 'i18next';
@@ -17,7 +18,7 @@ import SidebarItemBadges from '../badges/SidebarItemBadges';
1718
import type { useAvatarTemplate } from '../hooks/useAvatarTemplate';
1819
import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
1920

20-
const getMessage = (room: IRoom, lastMessage: IMessage | undefined, t: TFunction): string | undefined => {
21+
const getMessage = (room: SubscriptionWithRoom, lastMessage: IMessage | undefined, t: TFunction): string | undefined => {
2122
if (!lastMessage) {
2223
return t('No_messages_yet');
2324
}
@@ -63,7 +64,7 @@ type RoomListRowProps = {
6364
// sidebarViewMode: 'extended';
6465
isAnonymous?: boolean;
6566

66-
room: ISubscription & IRoom;
67+
room: SubscriptionWithRoom;
6768
id?: string;
6869
/* @deprecated */
6970
style?: AllHTMLAttributes<HTMLElement>['style'];

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

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,14 @@
1-
import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
21
import { mockAppRoot } from '@rocket.chat/mock-providers';
3-
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
42
import { render, screen } from '@testing-library/react';
53

64
import SidebarItemBadges from './SidebarItemBadges';
75
import { createFakeSubscription } from '../../../tests/mocks/data';
86

97
jest.mock('../../views/omnichannel/components/OmnichannelBadges', () => ({
108
__esModule: true,
11-
default: () => <div data-testid='omnichannel-badges'>OmnichannelBadges</div>,
9+
default: () => <i role='status' aria-label='OmnichannelBadges' />,
1210
}));
1311

14-
const createRoomWithSubscription = (overrides: Partial<SubscriptionWithRoom> = {}) => {
15-
return createFakeSubscription(overrides) as unknown as IRoom & ISubscription;
16-
};
17-
1812
describe('SidebarItemBadges', () => {
1913
const appRoot = mockAppRoot()
2014
.withTranslations('en', 'core', {
@@ -30,32 +24,30 @@ describe('SidebarItemBadges', () => {
3024
});
3125

3226
it('should render UnreadBadge when there are unread messages', () => {
33-
render(
34-
<SidebarItemBadges room={createRoomWithSubscription({ unread: 1, userMentions: 1, groupMentions: 0 })} roomTitle='Test Room' />,
35-
{ wrapper: appRoot },
36-
);
27+
render(<SidebarItemBadges room={createFakeSubscription({ unread: 1, userMentions: 1, groupMentions: 0 })} roomTitle='Test Room' />, {
28+
wrapper: appRoot,
29+
});
3730

3831
expect(screen.getByRole('status', { name: '1 mention from Test Room' })).toBeInTheDocument();
3932
});
4033

4134
it('should not render UnreadBadge when there are no unread messages', () => {
42-
render(
43-
<SidebarItemBadges room={createRoomWithSubscription({ unread: 0, userMentions: 0, groupMentions: 0 })} roomTitle='Test Room' />,
44-
{ wrapper: appRoot },
45-
);
35+
render(<SidebarItemBadges room={createFakeSubscription({ unread: 0, userMentions: 0, groupMentions: 0 })} roomTitle='Test Room' />, {
36+
wrapper: appRoot,
37+
});
4638

4739
expect(screen.queryByRole('status', { name: 'Test Room' })).not.toBeInTheDocument();
4840
});
4941

5042
it('should render OmnichannelBadges when the room is an omnichannel room', () => {
51-
render(<SidebarItemBadges room={createRoomWithSubscription({ t: 'l' })} />, { wrapper: appRoot });
43+
render(<SidebarItemBadges room={createFakeSubscription({ t: 'l' })} />, { wrapper: appRoot });
5244

53-
expect(screen.getByTestId('omnichannel-badges')).toBeInTheDocument();
45+
expect(screen.getByRole('status', { name: 'OmnichannelBadges' })).toBeInTheDocument();
5446
});
5547

5648
it('should not render OmnichannelBadges when the room is not an omnichannel room', () => {
57-
render(<SidebarItemBadges room={createRoomWithSubscription({ t: 'p' })} />, { wrapper: appRoot });
49+
render(<SidebarItemBadges room={createFakeSubscription({ t: 'p' })} />, { wrapper: appRoot });
5850

59-
expect(screen.queryByTestId('omnichannel-badges')).not.toBeInTheDocument();
51+
expect(screen.queryByRole('status', { name: 'OmnichannelBadges' })).not.toBeInTheDocument();
6052
});
6153
});

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
21
import { isOmnichannelRoom } from '@rocket.chat/core-typings';
32
import { Margins } from '@rocket.chat/fuselage';
3+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
44

55
import UnreadBadge from './UnreadBadge';
66
import OmnichannelBadges from '../../views/omnichannel/components/OmnichannelBadges';
77
import { useUnreadDisplay } from '../hooks/useUnreadDisplay';
88

99
type SidebarItemBadgesProps = {
10-
room: ISubscription & IRoom;
10+
room: SubscriptionWithRoom;
1111
roomTitle?: string;
1212
};
1313

‎apps/meteor/client/sidebar/hooks/useAvatarTemplate.tsx‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import type { IRoom } from '@rocket.chat/core-typings';
22
import { RoomAvatar } from '@rocket.chat/ui-avatar';
3+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
34
import { useUserPreference } from '@rocket.chat/ui-contexts';
45
import type { ComponentType } from 'react';
56
import { useMemo } from 'react';
67

8+
const isSubscriptionWithRoom = (room: SubscriptionWithRoom | IRoom): room is SubscriptionWithRoom => 'rid' in room;
9+
710
export const useAvatarTemplate = (
811
sidebarViewMode?: 'extended' | 'medium' | 'condensed',
912
sidebarDisplayAvatar?: boolean,
10-
): null | ComponentType<IRoom & { rid: string }> => {
13+
): ComponentType<SubscriptionWithRoom | IRoom> | null => {
1114
const sidebarViewModeFromSettings = useUserPreference<'extended' | 'medium' | 'condensed'>('sidebarViewMode');
1215
const sidebarDisplayAvatarFromSettings = useUserPreference('sidebarDisplayAvatar');
1316

@@ -30,9 +33,10 @@ export const useAvatarTemplate = (
3033
}
3134
})();
3235

33-
const renderRoomAvatar: ComponentType<IRoom & { rid: string }> = (room) => (
34-
<RoomAvatar size={size} room={{ ...room, _id: room.rid || room._id, type: room.t }} />
35-
);
36+
const renderRoomAvatar: ComponentType<SubscriptionWithRoom | IRoom> = (room) => {
37+
const roomId = isSubscriptionWithRoom(room) ? room.rid : room._id;
38+
return <RoomAvatar size={size} room={{ ...room, _id: roomId, type: room.t }} />;
39+
};
3640

3741
return renderRoomAvatar;
3842
}, [displayAvatar, viewMode]);

‎apps/meteor/client/sidebar/hooks/useRoomList.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import type { ILivechatInquiryRecord, IRoom, ISubscription } from '@rocket.chat/core-typings';
1+
import type { ILivechatInquiryRecord } from '@rocket.chat/core-typings';
22
import { useDebouncedState } from '@rocket.chat/fuselage-hooks';
3+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
34
import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts';
45
import { useVideoConfIncomingCalls } from '@rocket.chat/ui-video-conf';
56
import { useEffect } from 'react';
@@ -38,8 +39,8 @@ const order: (
3839
'Conversations',
3940
];
4041

41-
export const useRoomList = (): Array<ISubscription & IRoom> => {
42-
const [roomList, setRoomList] = useDebouncedState<(ISubscription & IRoom)[]>([], 150);
42+
export const useRoomList = (): SubscriptionWithRoom[] => {
43+
const [roomList, setRoomList] = useDebouncedState<SubscriptionWithRoom[]>([], 150);
4344

4445
const showOmnichannel = useOmnichannelEnabled();
4546
const sidebarGroupByType = useUserPreference('sidebarGroupByType');

‎apps/meteor/client/sidebar/search/Row.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1-
import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
1+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
22
import type { ReactElement } from 'react';
33
import { memo } from 'react';
44

55
import UserItem from './UserItem';
66
import SideBarItemTemplateWithData from '../RoomList/SideBarItemTemplateWithData';
77

88
type RowProps = {
9-
item: ISubscription & IRoom;
9+
item: SubscriptionWithRoom;
1010
data: Record<string, any>;
1111
};
1212

‎apps/meteor/client/sidebar/search/SearchList.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
21
import { css } from '@rocket.chat/css-in-js';
32
import { Sidebar, TextInput, Box, Icon } from '@rocket.chat/fuselage';
43
import { useEffectEvent, useDebouncedValue, useAutoFocus, useMergedRefs } from '@rocket.chat/fuselage-hooks';
54
import { escapeRegExp } from '@rocket.chat/string-helpers';
65
import { VirtualizedScrollbars } from '@rocket.chat/ui-client';
6+
import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
77
import { useUserPreference, useUserSubscriptions, useSetting, useTranslation, useMethod } from '@rocket.chat/ui-contexts';
88
import type { UseQueryResult } from '@tanstack/react-query';
99
import { useQuery } from '@tanstack/react-query';
@@ -68,7 +68,7 @@ const options = {
6868
limit: LIMIT,
6969
} as const;
7070

71-
const useSearchItems = (filterText: string): UseQueryResult<(ISubscription & IRoom)[] | undefined, Error> => {
71+
const useSearchItems = (filterText: string): UseQueryResult<SubscriptionWithRoom[] | undefined, Error> => {
7272
const [, mention, name] = useMemo(() => filterText.match(/(@|#)?(.*)/i) || [], [filterText]);
7373
const query = useMemo(() => {
7474
const filterRegex = new RegExp(escapeRegExp(name), 'i');

0 commit comments

Comments
 (0)