chore: Replace ReactiveDict with Map+Emitter (RocketChat#36684)

Author: tassoevan

apps/meteor/app/ui/client/lib/UserAction.ts

@@ -1,7 +1,7 @@
-import type { IExtras, IRoomActivity, IActionsObject, IUser } from '@rocket.chat/core-typings';
+import type { IExtras, IRoomActivity, IUser } from '@rocket.chat/core-typings';
+import { Emitter } from '@rocket.chat/emitter';
 import { debounce } from 'lodash';
 import { Meteor } from 'meteor/meteor';
-import { ReactiveDict } from 'meteor/reactive-dict';
 
 import { Users } from '../../../../client/stores';
 import { settings } from '../../../settings/client';
@@ -25,7 +25,8 @@ const continuingIntervals = new Map();
 const roomActivities = new Map<string, Set<string>>();
 const rooms = new Map<string, (username: string, activityType: string[], extras?: object | undefined) => void>();
 
-const performingUsers = new ReactiveDict<IActionsObject>();
+const performingUsers = new Map<string, IRoomActivity>();
+const performingUsersEmitter = new Emitter<{ changed: void }>();
 
 const shownName = function (user: IUser | null | undefined): string | undefined {
 	if (!user) {
@@ -64,6 +65,7 @@ function handleStreamAction(rid: string, username: string, activityTypes: string
 	}
 
 	performingUsers.set(rid, roomActivities);
+	performingUsersEmitter.emit('changed');
 }
 export const UserAction = new (class {
 	addStream(rid: string): () => void {
@@ -169,4 +171,8 @@ export const UserAction = new (class {
 	get(roomId: string): IRoomActivity | undefined {
 		return performingUsers.get(roomId);
 	}
+
+	subscribe(onChanged: () => void): () => void {
+		return performingUsersEmitter.on('changed', onChanged);
+	}
 })();

apps/meteor/client/views/room/composer/ComposerUserActionIndicator/ComposerUserActionIndicator.tsx

@@ -1,22 +1,21 @@
 import { Box } from '@rocket.chat/fuselage';
 import type { ReactElement } from 'react';
-import { useCallback, Fragment } from 'react';
+import { useCallback, Fragment, useSyncExternalStore, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { UserAction } from '../../../../../app/ui/client/lib/UserAction';
-import { useReactiveValue } from '../../../../hooks/useReactiveValue';
 
 const maxUsernames = 5;
 
 const ComposerUserActionIndicator = ({ rid, tmid }: { rid: string; tmid?: string }): ReactElement => {
 	const { t } = useTranslation();
-	const actions = useReactiveValue(
-		useCallback(() => {
-			const roomAction = UserAction.get(tmid || rid) || {};
-
-			const activities = Object.entries(roomAction);
-
-			return activities
+	const roomAction = useSyncExternalStore(
+		UserAction.subscribe,
+		useCallback(() => UserAction.get(tmid || rid), [rid, tmid]),
+	);
+	const actions = useMemo(
+		() =>
+			Object.entries(roomAction ?? {})
 				.map(([key, _users]) => {
 					const action = key.split('-')[1];
 
@@ -33,9 +32,10 @@ const ComposerUserActionIndicator = ({ rid, tmid }: { rid: string; tmid?: string
 				.filter(Boolean) as {
 				action: 'typing' | 'recording' | 'uploading' | 'playing';
 				users: string[];
-			}[];
-		}, [rid, tmid]),
+			}[],
+		[roomAction],
 	);
+
 	return (
 		<Box
 			h='x20'

packages/core-typings/src/IUserAction.ts

@@ -11,5 +11,3 @@ export type IExtras = {
 export type IActivity = Record<string, NodeJS.Timeout>;
 
 export type IRoomActivity = Record<string, IActivity>;
-
-export type IActionsObject = Record<string, IRoomActivity>;