Skip to content

Commit 62d3bfa

Browse files
ggazzojuliajforesti
ggazzo
authored and
juliajforesti
committed
first review wave
1 parent 2ff70bb commit 62d3bfa

File tree

1 file changed

+82
-92
lines changed

1 file changed

+82
-92
lines changed

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

+82-92
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { ILivechatInquiryRecord, IRoom, ISubscription } from '@rocket.chat/core-typings';
2-
import { useDebouncedState, useLocalStorage } from '@rocket.chat/fuselage-hooks';
2+
import { useDebouncedValue, useLocalStorage } from '@rocket.chat/fuselage-hooks';
33
import type { TranslationKey, SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
44
import { useUserPreference, useUserSubscriptions, useSetting } from '@rocket.chat/ui-contexts';
5-
import { useEffect } from 'react';
5+
import { useCallback, useMemo } from 'react';
66

77
import { useVideoConfIncomingCalls } from '../../contexts/VideoConfContext';
88
import { useOmnichannelEnabled } from '../../hooks/omnichannel/useOmnichannelEnabled';
@@ -13,19 +13,7 @@ const query = { open: { $ne: false } };
1313

1414
const emptyQueue: ILivechatInquiryRecord[] = [];
1515

16-
const order: (
17-
| 'Incoming_Calls'
18-
| 'Incoming_Livechats'
19-
| 'Open_Livechats'
20-
| 'On_Hold_Chats'
21-
| 'Unread'
22-
| 'Favorites'
23-
| 'Teams'
24-
| 'Discussions'
25-
| 'Channels'
26-
| 'Direct_Messages'
27-
| 'Conversations'
28-
)[] = [
16+
const order = [
2917
'Incoming_Calls',
3018
'Incoming_Livechats',
3119
'Open_Livechats',
@@ -37,7 +25,7 @@ const order: (
3725
'Channels',
3826
'Direct_Messages',
3927
'Conversations',
40-
];
28+
] as const;
4129

4230
const CATEGORIES = {
4331
Incoming_Calls: 'Incoming_Calls',
@@ -72,11 +60,7 @@ export const useRoomList = (): {
7260
handleCollapsedGroups: (groupTitle: string) => void;
7361
collapsedGroups: string[];
7462
} => {
75-
const [collapsedGroupsStorage, setCollapsedGroupsStorage] = useLocalStorage<string[]>('sidebarGroups', []);
76-
77-
const [flatRoomList, setFlatRoomList] = useDebouncedState<(ISubscription & IRoom)[]>([], 150);
78-
const [groupsCount, setGroupsCount] = useDebouncedState<number[]>([0], 150);
79-
const [collapsedGroups, setCollapsedGroups] = useDebouncedState<string[]>(collapsedGroupsStorage, 150);
63+
const [collapsedGroups, setCollapsedGroups] = useLocalStorage<string[]>('sidebarGroups', []);
8064

8165
const showOmnichannel = useOmnichannelEnabled();
8266
const sidebarGroupByType = useUserPreference('sidebarGroupByType');
@@ -98,13 +82,12 @@ export const useRoomList = (): {
9882
queue = inquiries.queue;
9983
}
10084

101-
const shouldAddUnread = (room: SubscriptionWithRoom) =>
102-
!(sidebarShowUnread && isCollapsed(CATEGORIES.Unread) && (room.alert || room.unread));
103-
const isCollapsed = (groupTitle: string) => collapsedGroups.includes(groupTitle);
85+
const { flatRoomList, groupsCount, groupsList, roomList } = useDebouncedValue(
86+
useMemo(() => {
87+
const isCollapsed = (groupTitle: string) => collapsedGroups.includes(groupTitle);
88+
const shouldAddUnread = (room: SubscriptionWithRoom) =>
89+
!(sidebarShowUnread && isCollapsed(CATEGORIES.Unread) && (room.alert || room.unread));
10490

105-
useEffect(() => {
106-
// eslint-disable-next-line complexity
107-
setFlatRoomList(() => {
10891
const incomingCall = new Set();
10992
const favorite = new Set();
11093
const team = new Set();
@@ -116,113 +99,120 @@ export const useRoomList = (): {
11699
const conversation = new Set();
117100
const onHold = new Set();
118101

119-
// eslint-disable-next-line complexity
120102
rooms.forEach((room) => {
121103
if (room.archived) {
122104
return;
123105
}
124106

125-
if (incomingCalls.find((call) => call.rid === room.rid) && !isCollapsed(CATEGORIES.Incoming_Calls)) {
107+
if (incomingCalls.find((call) => call.rid === room.rid)) {
126108
return incomingCall.add(room);
127109
}
128110

129-
if (sidebarShowUnread && !isCollapsed(CATEGORIES.Unread) && (room.alert || room.unread)) {
111+
if (sidebarShowUnread && (room.alert || room.unread)) {
130112
return unread.add(room);
131113
}
132114

133-
if (favoritesEnabled && room.f && !isCollapsed(CATEGORIES.Favorites) && shouldAddUnread(room)) {
134-
return favorite.add(room);
115+
if (favoritesEnabled && room.f) {
116+
return shouldAddUnread(room) && favorite.add(room);
135117
}
136118

137-
if (sidebarGroupByType && room.teamMain && !isCollapsed(CATEGORIES.Teams) && shouldAddUnread(room)) {
138-
return team.add(room);
119+
if (sidebarGroupByType && room.teamMain) {
120+
return shouldAddUnread(room) && team.add(room);
139121
}
140122

141-
if (sidebarGroupByType && isDiscussionEnabled && room.prid && !isCollapsed(CATEGORIES.Discussions) && shouldAddUnread(room)) {
142-
return discussion.add(room);
123+
if (sidebarGroupByType && isDiscussionEnabled && room.prid) {
124+
return shouldAddUnread(room) && discussion.add(room);
143125
}
144126

145-
if ((room.t === 'c' || room.t === 'p') && !isCollapsed(CATEGORIES.Channels) && shouldAddUnread(room)) {
146-
channels.add(room);
127+
if (room.t === 'c' || room.t === 'p') {
128+
shouldAddUnread(room) && channels.add(room);
147129
}
148130

149-
if (room.t === 'l' && room.onHold && !isCollapsed(CATEGORIES.On_Hold_Chats) && shouldAddUnread(room)) {
150-
return showOmnichannel && onHold.add(room);
131+
if (room.t === 'l' && room.onHold) {
132+
return showOmnichannel && shouldAddUnread(room) && onHold.add(room);
151133
}
152134

153-
if (room.t === 'l' && !isCollapsed(CATEGORIES.Open_Livechats) && shouldAddUnread(room)) {
154-
return showOmnichannel && omnichannel.add(room);
135+
if (room.t === 'l') {
136+
return showOmnichannel && shouldAddUnread(room) && omnichannel.add(room);
155137
}
156138

157-
if (room.t === 'd' && !isCollapsed(CATEGORIES.Direct_Messages) && shouldAddUnread(room)) {
158-
direct.add(room);
139+
if (room.t === 'd') {
140+
shouldAddUnread(room) && direct.add(room);
159141
}
160142

161-
if (!isCollapsed(CATEGORIES.Conversations) && shouldAddUnread(room)) {
143+
if (shouldAddUnread(room)) {
162144
conversation.add(room);
163145
}
164146
});
165147

166148
const groups = new Map();
167149
incomingCall.size && groups.set('Incoming_Calls', incomingCall);
168-
showOmnichannel &&
169-
inquiries.enabled &&
170-
(queue.length || isCollapsed(CATEGORIES.Incoming_Livechats)) &&
171-
groups.set('Incoming_Livechats', queue);
172-
showOmnichannel && (omnichannel.size || isCollapsed(CATEGORIES.Open_Livechats)) && groups.set('Open_Livechats', omnichannel);
173-
showOmnichannel && (onHold.size || isCollapsed(CATEGORIES.On_Hold_Chats)) && groups.set('On_Hold_Chats', onHold);
174-
sidebarShowUnread && (unread.size || isCollapsed(CATEGORIES.Unread)) && groups.set('Unread', unread);
175-
favoritesEnabled && (favorite.size || isCollapsed(CATEGORIES.Favorites)) && groups.set('Favorites', favorite);
176-
sidebarGroupByType && (team.size || isCollapsed(CATEGORIES.Teams)) && groups.set('Teams', team);
177-
sidebarGroupByType &&
178-
isDiscussionEnabled &&
179-
(discussion.size || isCollapsed(CATEGORIES.Discussions)) &&
180-
groups.set('Discussions', discussion);
181-
sidebarGroupByType && (channels.size || isCollapsed(CATEGORIES.Channels)) && groups.set('Channels', channels);
182-
sidebarGroupByType && (direct.size || isCollapsed(CATEGORIES.Direct_Messages)) && groups.set('Direct_Messages', direct);
150+
151+
showOmnichannel && inquiries.enabled && queue.length && groups.set('Incoming_Livechats', queue);
152+
showOmnichannel && omnichannel.size && groups.set('Open_Livechats', omnichannel);
153+
showOmnichannel && onHold.size && groups.set('On_Hold_Chats', onHold);
154+
155+
sidebarShowUnread && unread.size && groups.set('Unread', unread);
156+
157+
favoritesEnabled && favorite.size && groups.set('Favorites', favorite);
158+
159+
sidebarGroupByType && team.size && groups.set('Teams', team);
160+
161+
sidebarGroupByType && isDiscussionEnabled && discussion.size && groups.set('Discussions', discussion);
162+
163+
sidebarGroupByType && channels.size && groups.set('Channels', channels);
164+
165+
sidebarGroupByType && direct.size && groups.set('Direct_Messages', direct);
166+
183167
!sidebarGroupByType && groups.set('Conversations', conversation);
184-
const flatList = sidebarOrder
168+
169+
const groupsList: TranslationKey[] = [];
170+
const roomList: Array<ISubscription & IRoom> = [];
171+
172+
const flatRoomList = sidebarOrder
185173
.map((key) => {
186174
const group = groups.get(key);
187175
if (!group) {
188176
return [];
189177
}
178+
groupsList.push(key);
179+
if (isCollapsed(key)) {
180+
return [key];
181+
}
182+
183+
roomList.push(...group);
190184

191185
return [key, ...group];
192186
})
193187
.flat();
194188

195-
setGroupsCount(getGroupsCount([...flatList]));
196-
return flatList;
197-
});
198-
}, [
199-
rooms,
200-
showOmnichannel,
201-
incomingCalls,
202-
inquiries.enabled,
203-
queue,
204-
sidebarShowUnread,
205-
favoritesEnabled,
206-
sidebarGroupByType,
207-
setFlatRoomList,
208-
isDiscussionEnabled,
209-
sidebarOrder,
210-
setGroupsCount,
211-
collapsedGroups,
212-
]);
213-
214-
const handleCollapsedGroups = (group: string) => {
215-
if (collapsedGroups.includes(group)) {
216-
setCollapsedGroups(collapsedGroups.filter((item) => item !== group));
217-
setCollapsedGroupsStorage(collapsedGroups.filter((item) => item !== group));
218-
} else {
219-
setCollapsedGroups([...collapsedGroups, group]);
220-
setCollapsedGroupsStorage([...collapsedGroups, group]);
221-
}
222-
};
223-
224-
const groupsList = flatRoomList.filter((item) => typeof item === 'string');
225-
const roomList = flatRoomList.filter((item) => typeof item !== 'string');
189+
return { flatRoomList, groupsCount: getGroupsCount([...flatRoomList]), groupsList, roomList };
190+
}, [
191+
rooms,
192+
showOmnichannel,
193+
incomingCalls,
194+
inquiries.enabled,
195+
queue,
196+
sidebarShowUnread,
197+
favoritesEnabled,
198+
sidebarGroupByType,
199+
isDiscussionEnabled,
200+
sidebarOrder,
201+
collapsedGroups,
202+
]),
203+
50,
204+
);
205+
206+
const handleCollapsedGroups = useCallback(
207+
(group: string) => {
208+
if (collapsedGroups.includes(group)) {
209+
setCollapsedGroups(collapsedGroups.filter((item) => item !== group));
210+
} else {
211+
setCollapsedGroups([...collapsedGroups, group]);
212+
}
213+
},
214+
[collapsedGroups, setCollapsedGroups],
215+
);
226216

227217
return {
228218
flatList: flatRoomList,

0 commit comments

Comments
 (0)