Skip to content

Commit

Permalink
regression: SIDE-163
Browse files Browse the repository at this point in the history
  • Loading branch information
ggazzo committed Sep 19, 2024
1 parent fd0c2cc commit e3f2772
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 19 deletions.
24 changes: 8 additions & 16 deletions apps/meteor/client/views/room/Sidepanel/RoomSidepanel.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/* eslint-disable react/no-multi-comp */
import { Box, Sidepanel, SidepanelListItem } from '@rocket.chat/fuselage';
import { useEndpoint, useUserPreference } from '@rocket.chat/ui-contexts';
import { useQuery } from '@tanstack/react-query';
import { useUserPreference } from '@rocket.chat/ui-contexts';
import React, { memo } from 'react';
import { Virtuoso } from 'react-virtuoso';

Expand All @@ -11,6 +10,7 @@ import { useOpenedRoom, useSecondLevelOpenedRoom } from '../../../lib/RoomManage
import RoomSidepanelListWrapper from './RoomSidepanelListWrapper';
import RoomSidepanelLoading from './RoomSidepanelLoading';
import RoomSidepanelItem from './SidepanelItem';
import { useTeamsListChildrenUpdate } from './hooks/useTeamslistChildren';

const RoomSidepanel = () => {
const parentRid = useOpenedRoom();
Expand All @@ -29,20 +29,12 @@ const RoomSidepanelWithData = ({ parentRid, openedRoom }: { parentRid: string; o
const roomInfo = useRoomInfoEndpoint(parentRid);
const sidepanelItems = roomInfo.data?.room?.sidepanel?.items || roomInfo.data?.parent?.sidepanel?.items;

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?.length === 1 ? sidepanelItems[0] : undefined,
}),
enabled: roomInfo.isFetched && !!sidepanelItems,
staleTime: Infinity,
keepPreviousData: true,
});

const result = useTeamsListChildrenUpdate(
parentRid,
!roomInfo.data ? null : roomInfo.data.room?.teamId,
// eslint-disable-next-line no-nested-ternary
!sidepanelItems ? null : sidepanelItems?.length === 1 ? sidepanelItems[0] : undefined,
);
if (roomInfo.isSuccess && !roomInfo.data.room?.sidepanel && !roomInfo.data.parent?.sidepanel) {
return null;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { IRoom, Serialized } from '@rocket.chat/core-typings';
import type { IRoom, ISubscription, Serialized } from '@rocket.chat/core-typings';
import { useUserSubscription } from '@rocket.chat/ui-contexts';
import React, { memo } from 'react';

Expand All @@ -17,7 +17,7 @@ const RoomSidepanelItem = ({ room, openedRoom, viewMode }: RoomSidepanelItemProp
const SidepanelItem = useTemplateByViewMode();
const subscription = useUserSubscription(room._id);

const itemData = useItemData({ ...room, ...subscription } as any, { viewMode, openedRoom }); // as any because of divergent and overlaping timestamp types in subs and room (type Date vs type string)
const itemData = useItemData({ ...room, ...subscription } as ISubscription & IRoom, { viewMode, openedRoom }); // as any because of divergent and overlaping timestamp types in subs and room (type Date vs type string)

if (!subscription) {
return <SidepanelItem onClick={goToRoomById} is='a' {...itemData} />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const useItemData = (
const itemData = useMemo(
() => ({
unread: highlighted,
selected: room._id === openedRoom,
selected: room.rid === openedRoom,
t,
href: roomCoordinator.getRouteLink(room.t, room) || '',
title: roomCoordinator.getRoomName(room.t, room) || '',
Expand Down
106 changes: 106 additions & 0 deletions apps/meteor/client/views/room/Sidepanel/hooks/useTeamslistChildren.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
import type { IRoom } from '@rocket.chat/core-typings';
import { useEndpoint } from '@rocket.chat/ui-contexts';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
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 new Date(b.lm).toUTCString().localeCompare(new Date(a.lm).toUTCString());
};

export const useTeamsListChildrenUpdate = (
parentRid: string,
teamId?: string | null,
sidepanelItems?: 'channels' | 'discussions' | null,
) => {
const queryClient = useQueryClient();

const query = useMemo(() => {
const query: Parameters<typeof ChatRoom.find>[0] = {
$or: [
{
_id: parentRid,
},
{
prid: parentRid,
},
],
};

if (teamId && query.$or) {
query.$or.push({
teamId,
});
}
return query;
}, [parentRid, teamId]);

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,
}),
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 }));
},
});

return () => {
liveQueryHandle.stop();
};
}, [update, query]);

return result;
};

0 comments on commit e3f2772

Please sign in to comment.