chore(Sidepanel): uses only local channels and discussions

apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx

@@ -51,8 +51,8 @@ const RoomSidepanelWithData = ({ parentRid, openedRoom }: { parentRid: string; o
 		<Sidepanel>
 			<Box pb={8} h='full'>
 				<Virtuoso
-					totalCount={result.data.data.length}
-					data={result.data.data}
+					totalCount={result.data.length}
+					data={result.data}
 					components={{ Item: SidepanelListItem, List: RoomSidepanelListWrapper, Scroller: VirtuosoScrollbars }}
 					itemContent={(_, data) => (
 						<RoomSidepanelItem openedRoom={openedRoom} room={data} parentRid={parentRid} viewMode={sidebarViewMode} />

apps/meteor/client/views/room/Sidepanel/SidepanelItem/RoomSidepanelItem.tsx

@@ -1,4 +1,4 @@
-import type { IRoom, ISubscription, Serialized } from '@rocket.chat/core-typings';
+import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { useUserSubscription } from '@rocket.chat/ui-contexts';
 import React, { memo } from 'react';
 
@@ -8,7 +8,7 @@ import { useItemData } from '../hooks/useItemData';
 
 export type RoomSidepanelItemProps = {
 	openedRoom?: string;
-	room: Serialized<IRoom>;
+	room: IRoom;
 	parentRid: string;
 	viewMode?: 'extended' | 'medium' | 'condensed';
 };

apps/meteor/client/views/room/Sidepanel/hooks/useTeamslistChildren.ts

@@ -1,107 +1,60 @@
 import type { IRoom } from '@rocket.chat/core-typings';
-import { useEndpoint } from '@rocket.chat/ui-contexts';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
 import type { Mongo } from 'meteor/mongo';
 import { useEffect, useMemo } from 'react';
 
 import { ChatRoom } from '../../../../../app/models/client';
 
-const sortRoomByLastMessage = (a: IRoom, b: IRoom) => {
-	if (!a.lm) {
-		return 1;
-	}
-	if (!b.lm) {
-		return -1;
-	}
-	return b.lm.getTime() - a.lm.getTime();
-};
-
 export const useTeamsListChildrenUpdate = (
 	parentRid: string,
 	teamId?: string | null,
 	sidepanelItems?: 'channels' | 'discussions' | null,
 ) => {
-	const queryClient = useQueryClient();
-
 	const query = useMemo(() => {
 		const query: Mongo.Selector<IRoom> = {
 			$or: [
 				{
 					_id: parentRid,
 				},
-				{
-					prid: parentRid,
-				},
 			],
 		};
 
-		if (teamId && query.$or) {
+		if ((!sidepanelItems || sidepanelItems === 'discussions') && query.$or) {
+			query.$or.push({
+				prid: parentRid,
+			});
+		}
+
+		if ((!sidepanelItems || sidepanelItems === 'channels') && teamId && query.$or) {
 			query.$or.push({
 				teamId,
 			});
 		}
 		return query;
-	}, [parentRid, teamId]);
+	}, [parentRid, teamId, sidepanelItems]);
 
-	const teamList = useEndpoint('GET', '/v1/teams.listChildren');
-
-	const listRoomsAndDiscussions = useEndpoint('GET', '/v1/teams.listChildren');
 	const result = useQuery({
 		queryKey: ['sidepanel', 'list', parentRid, sidepanelItems],
 		queryFn: () =>
-			listRoomsAndDiscussions({
-				roomId: parentRid,
-				sort: JSON.stringify({ lm: -1 }),
-				type: sidepanelItems || undefined,
-			}),
+			ChatRoom.find(query, {
+				sort: { lm: -1 },
+			}).fetch(),
 		enabled: sidepanelItems !== null && teamId !== null,
 		refetchInterval: 5 * 60 * 1000,
 		keepPreviousData: true,
 	});
 
-	const { mutate: update } = useMutation({
-		mutationFn: async (params?: { action: 'add' | 'remove' | 'update'; data: IRoom }) => {
-			queryClient.setQueryData(['sidepanel', 'list', parentRid, sidepanelItems], (data: Awaited<ReturnType<typeof teamList>> | void) => {
-				if (!data) {
-					return;
-				}
-
-				if (params?.action === 'add') {
-					data.data = [JSON.parse(JSON.stringify(params.data)), ...data.data].sort(sortRoomByLastMessage);
-				}
-
-				if (params?.action === 'remove') {
-					data.data = data.data.filter((item) => item._id !== params.data?._id);
-				}
-
-				if (params?.action === 'update') {
-					data.data = data.data
-						.map((item) => (item._id === params.data?._id ? JSON.parse(JSON.stringify(params.data)) : item))
-						.sort(sortRoomByLastMessage);
-				}
-
-				return { ...data };
-			});
-		},
-	});
-
 	useEffect(() => {
 		const liveQueryHandle = ChatRoom.find(query).observe({
-			added: (item) => {
-				queueMicrotask(() => update({ action: 'add', data: item }));
-			},
-			changed: (item) => {
-				queueMicrotask(() => update({ action: 'update', data: item }));
-			},
-			removed: (item) => {
-				queueMicrotask(() => update({ action: 'remove', data: item }));
-			},
+			added: () => queueMicrotask(() => result.refetch({ exact: false })),
+			changed: () => queueMicrotask(() => result.refetch({ exact: false })),
+			removed: () => queueMicrotask(() => result.refetch({ exact: false })),
 		});
 
 		return () => {
 			liveQueryHandle.stop();
 		};
-	}, [update, query]);
+	}, [query, result]);
 
 	return result;
 };