[NEW] Replace client-side event emitters

app/apps/client/communication/websockets.js

@@ -1,5 +1,5 @@
 import { Meteor } from 'meteor/meteor';
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 
 import { slashCommands, APIClient } from '../../../utils';
 import { CachedCollectionManager } from '../../../ui-cached-collection';
@@ -16,7 +16,7 @@ export const AppEvents = Object.freeze({
 	COMMAND_REMOVED: 'command/removed',
 });
 
-export class AppWebsocketReceiver extends EventEmitter {
+export class AppWebsocketReceiver extends Emitter {
 	constructor() {
 		super();
 

app/ui-cached-collection/client/models/CachedCollection.js

@@ -6,7 +6,7 @@ import { ReactiveVar } from 'meteor/reactive-var';
 import { Tracker } from 'meteor/tracker';
 import localforage from 'localforage';
 import _ from 'underscore';
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 
 import { callbacks } from '../../../callbacks';
 import Notifications from '../../../notifications/client/lib/Notifications';
@@ -28,7 +28,7 @@ const wrap = (fn) => (...args) => new Promise((resolve, reject) => {
 
 const localforageGetItem = wrap(localforage.getItem);
 
-class CachedCollectionManagerClass extends EventEmitter {
+class CachedCollectionManagerClass extends Emitter {
 	constructor() {
 		super();
 		this.items = [];
@@ -118,7 +118,7 @@ const nullLog = function() {};
 
 const log = (...args) => console.log(`CachedCollection ${ this.name } =>`, ...args);
 
-export class CachedCollection extends EventEmitter {
+export class CachedCollection extends Emitter {
 	constructor({
 		collection = new Mongo.Collection(null),
 		name,

app/ui-message/client/ActionManager.js

@@ -1,14 +1,14 @@
 import { UIKitInteractionType, UIKitIncomingInteractionType } from '@rocket.chat/apps-engine/definition/uikit';
 import { Meteor } from 'meteor/meteor';
 import { Random } from 'meteor/random';
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 
 import Notifications from '../../notifications/client/lib/Notifications';
 import { CachedCollectionManager } from '../../ui-cached-collection';
 import { modal } from '../../ui-utils/client/lib/modal';
 import { APIClient } from '../../utils';
 
-const events = new EventEmitter();
+const events = new Emitter();
 
 export const on = (...args) => {
 	events.on(...args);

app/ui-utils/client/lib/menu.js

@@ -1,14 +1,14 @@
 import { Session } from 'meteor/session';
 import { Meteor } from 'meteor/meteor';
 import _ from 'underscore';
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 
 import { isRtl } from '../../../utils';
 
 const sideNavW = 280;
 const map = (x, in_min, in_max, out_min, out_max) => (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
 
-export const menu = new class extends EventEmitter {
+export const menu = new class extends Emitter {
 	constructor() {
 		super();
 		this._open = false;

app/ui-utils/client/lib/readMessages.js

@@ -1,6 +1,6 @@
 import { Meteor } from 'meteor/meteor';
 import { Session } from 'meteor/session';
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 
 import { RoomHistoryManager } from './RoomHistoryManager';
 import { RoomManager } from './RoomManager';
@@ -18,7 +18,7 @@ import { ChatSubscription, ChatMessage } from '../../../models';
 // window.addEventListener 'focus', ->
 // readMessage.refreshUnreadMark(undefined, true)
 
-export const readMessage = new class extends EventEmitter {
+export const readMessage = new class extends Emitter {
 	constructor() {
 		super();
 		this.debug = false;

app/ui/client/lib/menu.js

@@ -1,22 +1,15 @@
 import _ from 'underscore';
-import EventEmitter from 'wolfy87-eventemitter';
 
 import { menu } from '../../../ui-utils';
 
-const emitter = new EventEmitter();
-
 window.addEventListener('resize', _.debounce((() => {
 	let lastState = window.matchMedia('(min-width: 780px)').matches ? 'mini' : 'large';
-	emitter.emit('grid', lastState);
+	menu.close();
 	return () => {
 		const futureState = window.matchMedia('(min-width: 780px)').matches ? 'mini' : 'large';
 		if (lastState !== futureState) {
 			lastState = futureState;
-			emitter.emit('grid', lastState);
+			menu.close();
 		}
 	};
 })(), 100));
-
-emitter.on('grid', () => {
-	menu.close();
-});

app/ui/client/lib/recorderjs/audioEncoder.js

@@ -1,9 +1,9 @@
 import { Meteor } from 'meteor/meteor';
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 
 import { settings } from '../../../../settings';
 
-class AudioEncoder extends EventEmitter {
+class AudioEncoder extends Emitter {
 	constructor(source, {
 		bufferLen = 4096,
 		numChannels = 1,

app/webrtc/client/WebRTCClass.js

@@ -1,4 +1,4 @@
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 import { Meteor } from 'meteor/meteor';
 import { Tracker } from 'meteor/tracker';
 import { ReactiveVar } from 'meteor/reactive-var';
@@ -13,7 +13,7 @@ import { modal } from '../../ui-utils';
 import { ChatSubscription } from '../../models';
 import { WEB_RTC_EVENTS } from '..';
 
-class WebRTCTransportClass extends EventEmitter {
+class WebRTCTransportClass extends Emitter {
 	constructor(webrtcInstance) {
 		super();
 		this.debug = false;

client/contexts/AuthorizationContext.ts

@@ -1,13 +1,13 @@
 import { createContext, useContext, useMemo, useCallback } from 'react';
 import { useSubscription, Subscription, Unsubscribe } from 'use-subscription';
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter, Handler } from '@rocket.chat/emitter';
 
 import { IRole } from '../../definition/IUser';
 
 type IRoles = { [_id: string]: IRole }
 
 
-export class RoleStore extends EventEmitter {
+export class RoleStore extends Emitter {
 	roles: IRoles = {};
 }
 
@@ -91,7 +91,7 @@ export const useRolesDescription = (): (ids: Array<string>) => [string] => {
 	const subscription = useMemo(
 		() => ({
 			getCurrentValue: (): IRoles => roleStore.roles,
-			subscribe: (callback: Function): () => void => {
+			subscribe: (callback: Handler): () => void => {
 				roleStore.on('change', callback);
 				return (): void => {
 					roleStore.off('change', callback);

client/lib/presence.js

@@ -1,8 +1,8 @@
-import EventEmitter from 'wolfy87-eventemitter';
+import { Emitter } from '@rocket.chat/emitter';
 
 import { APIClient } from '../../app/utils/client';
 
-export const Presence = new EventEmitter();
+export const Presence = new Emitter();
 
 const Statuses = new Map();
 
@@ -40,15 +40,14 @@ const getPresence = (() => {
 	};
 
 	Presence.on('remove', (uid) => {
-		if (Presence._events[uid]?.length) {
+		if (Presence.has(uid)) {
 			return;
 		}
 		Statuses.delete(uid);
-		delete Presence._events[uid];
 	});
 
 	Presence.on('reset', () => {
-		Presence.once('restart', () => Object.keys(Presence._events).filter((e) => Boolean(e) && !['reset', 'restart', 'remove'].includes(e) && typeof e === 'string').forEach(get));
+		Presence.once('restart', () => Presence.events().filter((e) => Boolean(e) && !['reset', 'restart', 'remove'].includes(e) && typeof e === 'string').forEach(get));
 	});
 
 	return get;

client/sidebar/RoomList.js

@@ -52,7 +52,8 @@ const SidebarIcon = ({ room, small }) => {
 				return <Sidebar.Item.Icon aria-hidden='true' name='team'/>;
 			}
 			if (room.uids && room.uids.length > 0) {
-				return room.uids && room.uids.length && <Sidebar.Item.Icon><ReactiveUserStatus small={small && 'small'} uid={room.uids.filter((uid) => uid !== room.u._id)[0]} /></Sidebar.Item.Icon>;
+				// If the filter fn removes all ids, it's own direct message
+				return room.uids && room.uids.length && <Sidebar.Item.Icon><ReactiveUserStatus small={small && 'small'} uid={room.uids.filter((uid) => uid !== room.u._id)[0] || room.u._id} /></Sidebar.Item.Icon>;
 			}
 			return <Sidebar.Item.Icon aria-hidden='true' name={roomTypes.getIcon(room)}/>;
 		default: