refactor(client): Handling of custom statuses

apps/meteor/app/notifications/client/lib/Presence.ts

@@ -1,17 +1,13 @@
-import type { StreamerEvents } from '@rocket.chat/ui-contexts';
+import type { UserStatus } from '@rocket.chat/core-typings';
 import { Meteor } from 'meteor/meteor';
 
-import { Presence, STATUS_MAP } from '../../../../client/lib/presence';
+import { Presence } from '../../../../client/lib/presence';
 
 // TODO implement API on Streamer to be able to listen to all streamed data
 // this is a hacky way to listen to all streamed data from user-presence Streamer
 
 new Meteor.Streamer('user-presence');
 
-(Meteor as any).StreamerCentral.on('stream-user-presence', (uid: string, ...args: StreamerEvents['user-presence'][number]['args']) => {
-	if (!Array.isArray(args)) {
-		throw new Error('Presence event must be an array');
-	}
-	const [[username, status, statusText]] = args;
-	Presence.notify({ _id: uid, username, status: STATUS_MAP[status ?? 0], statusText });
+Meteor.StreamerCentral.on('stream-user-presence', (uid: string, username: string, statusChanged?: UserStatus, statusText?: string) => {
+	Presence.notify({ _id: uid, username, status: statusChanged, statusText });
 });

apps/meteor/app/user-status/server/methods/listCustomUserStatus.ts

@@ -6,7 +6,7 @@ import { Meteor } from 'meteor/meteor';
 declare module '@rocket.chat/ui-contexts' {
 	// eslint-disable-next-line @typescript-eslint/naming-convention
 	interface ServerMethods {
-		listCustomUserStatus(): Promise<ICustomUserStatus[]>;
+		listCustomUserStatus(): ICustomUserStatus[];
 	}
 }
 

apps/meteor/client/importPackages.ts

@@ -35,7 +35,6 @@ import '../app/wordpress/client';
 import '../app/e2e/client';
 import '../app/discussion/client';
 import '../app/threads/client';
-import '../app/user-status/client';
 import '../app/utils/client';
 import '../app/settings/client';
 import '../app/models/client';

apps/meteor/client/lib/presence.ts

@@ -6,8 +6,6 @@ import { Meteor } from 'meteor/meteor';
 
 import { sdk } from '../../app/utils/client/lib/SDKClient';
 
-export const STATUS_MAP = [UserStatus.OFFLINE, UserStatus.ONLINE, UserStatus.AWAY, UserStatus.BUSY, UserStatus.DISABLED];
-
 type InternalEvents = {
 	remove: IUser['_id'];
 	reset: undefined;

apps/meteor/client/lib/userStatuses.ts

@@ -0,0 +1,90 @@
+import { UserStatus } from '@rocket.chat/core-typings';
+import type { ICustomUserStatus } from '@rocket.chat/core-typings';
+
+import { sdk } from '../../app/utils/client/lib/SDKClient';
+
+export type UserStatusDescriptor = {
+	id: string;
+	name: string;
+	statusType: UserStatus;
+	localizeName: boolean;
+};
+
+export class UserStatuses implements Iterable<UserStatusDescriptor> {
+	public invisibleAllowed = true;
+
+	private store: Map<UserStatusDescriptor['id'], UserStatusDescriptor> = new Map(
+		[UserStatus.ONLINE, UserStatus.AWAY, UserStatus.BUSY, UserStatus.OFFLINE].map((status) => [
+			status,
+			{
+				id: status,
+				name: status,
+				statusType: status,
+				localizeName: true,
+			},
+		]),
+	);
+
+	public delete(id: string): void {
+		this.store.delete(id);
+	}
+
+	public put(customUserStatus: UserStatusDescriptor): void {
+		this.store.set(customUserStatus.id, customUserStatus);
+	}
+
+	public createFromCustom(customUserStatus: ICustomUserStatus): UserStatusDescriptor {
+		if (!this.isValidType(customUserStatus.statusType)) {
+			throw new Error('Invalid user status type');
+		}
+
+		return {
+			name: customUserStatus.name,
+			id: customUserStatus._id,
+			statusType: customUserStatus.statusType as UserStatus,
+			localizeName: false,
+		};
+	}
+
+	public isValidType(type: string): type is UserStatus {
+		return (Object.values(UserStatus) as string[]).includes(type);
+	}
+
+	public *[Symbol.iterator]() {
+		for (const value of this.store.values()) {
+			if (this.invisibleAllowed || value.statusType !== UserStatus.OFFLINE) {
+				yield value;
+			}
+		}
+	}
+
+	public async sync() {
+		const result = await sdk.call('listCustomUserStatus');
+		if (!result) {
+			return;
+		}
+
+		for (const customStatus of result) {
+			this.put(this.createFromCustom(customStatus));
+		}
+	}
+
+	public watch(cb?: () => void) {
+		const updateSubscription = sdk.stream('notify-logged', ['updateCustomUserStatus'], (data) => {
+			this.put(this.createFromCustom(data.userStatusData));
+			cb?.();
+		});
+
+		const deleteSubscription = sdk.stream('notify-logged', ['deleteCustomUserStatus'], (data) => {
+			this.delete(data.userStatusData._id);
+			cb?.();
+		});
+
+		return () => {
+			updateSubscription.stop();
+			deleteSubscription.stop();
+		};
+	}
+}
+
+export const userStatuses = new UserStatuses();

apps/meteor/client/providers/UserProvider/UserProvider.tsx

@@ -17,7 +17,6 @@ import { useDeleteUser } from './hooks/useDeleteUser';
 import { useEmailVerificationWarning } from './hooks/useEmailVerificationWarning';
 import { useLDAPAndCrowdCollisionWarning } from './hooks/useLDAPAndCrowdCollisionWarning';
 import { useUpdateAvatar } from './hooks/useUpdateAvatar';
-import { useUpdateCustomUserStatus } from './hooks/useUpdateCustomUserStatus';
 
 const getUserId = (): string | null => Meteor.userId();
 
@@ -81,7 +80,6 @@ const UserProvider = ({ children }: UserProviderProps): ReactElement => {
 	useLDAPAndCrowdCollisionWarning();
 	useEmailVerificationWarning(user ?? undefined);
 
-	useUpdateCustomUserStatus();
 	useDeleteUser();
 	useUpdateAvatar();