refactor: remove stream in favor of unmount

Author: aleksandernsilva

apps/meteor/client/views/room/RoomInvite.tsx

@@ -1,6 +1,8 @@
 import { isRoomFederated } from '@rocket.chat/core-typings';
 import type { IUser, IInviteSubscription } from '@rocket.chat/core-typings';
-import type { ComponentProps } from 'react';
+import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Header from './Header';
@@ -10,6 +12,7 @@ import type { IRoomWithFederationOriginalName } from './contexts/RoomContext';
 import { useRoomInvitation } from './hooks/useRoomInvitation';
 import RoomLayout from './layout/RoomLayout';
 import { links } from '../../lib/links';
+import { roomsQueryKeys, subscriptionsQueryKeys } from '../../lib/queryKeys';
 
 type RoomInviteProps = Omit<ComponentProps<typeof RoomLayout>, 'header' | 'body' | 'aside'> & {
 	userId?: IUser['_id'];
@@ -19,12 +22,25 @@ type RoomInviteProps = Omit<ComponentProps<typeof RoomLayout>, 'header' | 'body'
 
 const RoomInvite = ({ room, subscription, userId, ...props }: RoomInviteProps) => {
 	const { t } = useTranslation();
+	const queryClient = useQueryClient();
 	const { acceptInvite, rejectInvite, isPending } = useRoomInvitation(room);
 
 	const infoLink = isRoomFederated(room) ? { label: t('Learn_more_about_Federation'), href: links.go.matrixFederation } : undefined;
 
 	useGoToHomeOnRemoved(room, userId);
 
+	const invalidateQueries = useEffectEvent(() => {
+		const reference = room.federationOriginalName ?? room.name ?? room._id;
+		void queryClient.invalidateQueries({ queryKey: roomsQueryKeys.room(room._id) });
+		void queryClient.invalidateQueries({ queryKey: subscriptionsQueryKeys.subscription(room._id) });
+		void queryClient.invalidateQueries({ queryKey: roomsQueryKeys.roomReference(reference, room.t, userId) });
+	});
+
+	useEffect(() => {
+		// Invalidate room and subscription queries when unmounting (invite accepted or rejected)
+		return () => invalidateQueries();
+	}, [invalidateQueries]);
+
 	return (
 		<RoomLayout
 			{...props}

apps/meteor/client/views/room/hooks/useRoomInvitation.tsx

@@ -1,61 +1,11 @@
-import { useEffectEvent } from '@rocket.chat/fuselage-hooks';
-import { useStream, useUser } from '@rocket.chat/ui-contexts';
-import { useQueryClient } from '@tanstack/react-query';
-import { useEffect } from 'react';
-
 import { useRoomRejectInvitationModal } from './useRoomRejectInvitationModal';
 import { useEndpointMutation } from '../../../hooks/useEndpointMutation';
-import { roomsQueryKeys, subscriptionsQueryKeys } from '../../../lib/queryKeys';
 import type { IRoomWithFederationOriginalName } from '../contexts/RoomContext';
 
 export const useRoomInvitation = (room: IRoomWithFederationOriginalName) => {
-	const user = useUser();
-
-	if (!user) {
-		throw new Error('error-user-not-found');
-	}
-
-	const queryClient = useQueryClient();
-	const subscribeToNotifyUser = useStream('notify-user');
 	const { open: openConfirmationModal } = useRoomRejectInvitationModal(room);
 	const replyInvite = useEndpointMutation('POST', '/v1/rooms.invite');
 
-	const invalidateQueries = useEffectEvent(() => {
-		const reference = room.federationOriginalName ?? room.name ?? room._id;
-		return Promise.all([
-			queryClient.invalidateQueries({ queryKey: roomsQueryKeys.room(room._id) }),
-			queryClient.invalidateQueries({ queryKey: subscriptionsQueryKeys.subscription(room._id) }),
-			queryClient.refetchQueries({
-				queryKey: roomsQueryKeys.roomReference(reference, room.t, user._id, user.username),
-			}),
-		]);
-	});
-
-	useEffect(() => {
-		// Only listen for subscription changes if the mutation has been initiated
-		if (!replyInvite.isPending) {
-			return;
-		}
-
-		/*
-		 * NOTE: We need to listen for subscription changes here because when accepting an invitation
-		 * to a federated room, the server processes the acceptance asynchronously. Therefore,
-		 * we cannot rely solely on the mutation's completion to know when the subscription status
-		 * has changed. By subscribing to the 'notify-user' stream, we can react to changes in the
-		 * subscription status and ensure that our UI reflects the most up-to-date information.
-		 */
-		return subscribeToNotifyUser(`${user._id}/subscriptions-changed`, async (event, data) => {
-			if (data.rid !== room._id) {
-				return;
-			}
-
-			// Only invalidate when subscription is removed OR invite is accepted (status cleared)
-			if (event === 'removed' || data.status === undefined) {
-				await invalidateQueries();
-			}
-		});
-	}, [room._id, user._id, invalidateQueries, replyInvite.isPending, subscribeToNotifyUser]);
-
 	return {
 		...replyInvite,
 		acceptInvite: async () => replyInvite.mutate({ roomId: room._id, action: 'accept' }),