[FIX] Prevent UserAction.addStream without Subscription (#23705)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

app/ui/client/lib/UserAction.ts

@@ -1,7 +1,5 @@
 import { Meteor } from 'meteor/meteor';
-import { Tracker } from 'meteor/tracker';
 import { ReactiveDict } from 'meteor/reactive-dict';
-import { Session } from 'meteor/session';
 import { debounce } from 'lodash';
 
 import { settings } from '../../../settings/client';
@@ -66,10 +64,6 @@ function handleStreamAction(rid: string, username: string, activityTypes: string
 	performingUsers.set(rid, roomActivities);
 }
 export const UserAction = new class {
-	constructor() {
-		Tracker.autorun(() => Session.get('openedRoom') && this.addStream(Session.get('openedRoom')));
-	}
-
 	addStream(rid: string): void {
 		if (rooms.get(rid)) {
 			return;

client/lib/RoomManager.ts

@@ -132,7 +132,7 @@ export const RoomManager = new (class RoomManager extends Emitter<{
 	}
 })();
 
-const subscribeVistedRooms: Subscription<IRoom['_id'][]> = {
+const subscribeVisitedRooms: Subscription<IRoom['_id'][]> = {
 	getCurrentValue: () => RoomManager.visitedRooms(),
 	subscribe(callback) {
 		return RoomManager.on('changed', callback);
@@ -166,7 +166,7 @@ export const useHandleRoom = <T extends IRoom>(rid: IRoom['_id']): AsyncState<T>
 	return state;
 };
 
-export const useVisitedRooms = (): IRoom['_id'][] => useSubscription(subscribeVistedRooms);
+export const useVisitedRooms = (): IRoom['_id'][] => useSubscription(subscribeVisitedRooms);
 
 export const useOpenedRoom = (): IRoom['_id'] | undefined => useSubscription(subscribeOpenedRoom);
 

client/views/room/contexts/RoomContext.ts

@@ -5,6 +5,7 @@ import { IRoom, IOmnichannelRoom, isOmnichannelRoom } from '../../../../definiti
 export type RoomContextValue = {
 	rid: IRoom['_id'];
 	room: IRoom;
+	subscribed: boolean;
 };
 
 export const RoomContext = createContext<RoomContextValue | null>(null);

client/views/room/providers/RoomProvider.tsx

@@ -1,7 +1,9 @@
 import React, { ReactNode, useMemo, memo, useEffect } from 'react';
 
+import { UserAction } from '../../../../app/ui';
 import { roomTypes } from '../../../../app/utils/client';
 import { IRoom } from '../../../../definition/IRoom';
+import { useUserSubscription } from '../../../contexts/UserContext';
 import { RoomManager, useHandleRoom } from '../../../lib/RoomManager';
 import { AsyncStatePhase } from '../../../lib/asyncState';
 import Skeleton from '../Room/Skeleton';
@@ -13,18 +15,23 @@ export type Props = {
 	rid: IRoom['_id'];
 };
 
+const fields = {};
+
 const RoomProvider = ({ rid, children }: Props): JSX.Element => {
 	const { phase, value: room } = useHandleRoom(rid);
+
+	const subscribed = Boolean(useUserSubscription(rid, fields));
 	const context = useMemo(() => {
 		if (!room) {
 			return null;
 		}
 		room._id = rid;
 		return {
+			subscribed,
 			rid,
 			room: { ...room, name: roomTypes.getRoomName(room.t, room) },
 		};
-	}, [room, rid]);
+	}, [room, rid, subscribed]);
 
 	useEffect(() => {
 		RoomManager.open(rid);
@@ -33,6 +40,17 @@ const RoomProvider = ({ rid, children }: Props): JSX.Element => {
 		};
 	}, [rid]);
 
+	useEffect(() => {
+		if (!subscribed) {
+			return (): void => undefined;
+		}
+
+		UserAction.addStream(rid);
+		return (): void => {
+			UserAction.cancel(rid);
+		};
+	}, [rid, subscribed]);
+
 	if (phase === AsyncStatePhase.LOADING || !room) {
 		return <Skeleton />;
 	}