[FIX] User status out of sync (#21656)

client/components/UserStatus/ReactiveUserStatus.js

@@ -3,8 +3,8 @@ import React, { memo } from 'react';
 import { usePresence } from '../../hooks/usePresence';
 import UserStatus from './UserStatus';
 
-const ReactiveUserStatus = ({ uid, presence, ...props }) => {
-	const status = usePresence(uid, presence);
+const ReactiveUserStatus = ({ uid, ...props }) => {
+	const status = usePresence(uid);
 	return <UserStatus status={status} {...props} />;
 };
 

client/lib/presence.ts

@@ -36,6 +36,21 @@ const isUid = (eventType: keyof Events): eventType is UserPresence['_id'] =>
 	!['reset', 'restart', 'remove'].includes(eventType);
 
 const uids = new Set<UserPresence['_id']>();
+
+const update: EventHandlerOf<ExternalEvents, string> = (update) => {
+	if (update?._id) {
+		store.set(update._id, update);
+		uids.delete(update._id);
+	}
+};
+
+const notify = (presence: UserPresence): void => {
+	if (presence._id) {
+		update(presence);
+		emitter.emit(presence._id, presence);
+	}
+};
+
 const getPresence = ((): ((uid: UserPresence['_id']) => void) => {
 	let timer: ReturnType<typeof setTimeout>;
 
@@ -56,13 +71,13 @@ const getPresence = ((): ((uid: UserPresence['_id']) => void) => {
 
 				users.forEach((user) => {
 					if (!store.has(user._id)) {
-						emitter.emit(user._id, user);
+						notify(user);
 					}
 					currentUids.delete(user._id);
 				});
 
 				currentUids.forEach((uid) => {
-					emitter.emit(uid, { _id: uid, status: UserStatus.OFFLINE });
+					notify({ _id: uid, status: UserStatus.OFFLINE });
 				});
 
 				currentUids.clear();
@@ -88,7 +103,6 @@ const getPresence = ((): ((uid: UserPresence['_id']) => void) => {
 	});
 
 	emitter.on('reset', () => {
-		store.clear();
 		emitter
 			.events()
 			.filter(isUid)
@@ -103,23 +117,16 @@ const getPresence = ((): ((uid: UserPresence['_id']) => void) => {
 	return get;
 })();
 
-const update: EventHandlerOf<ExternalEvents, string> = (update) => {
-	if (update?._id) {
-		store.set(update._id, update);
-		uids.delete(update._id);
-	}
-};
-
 const listen = (
 	uid: UserPresence['_id'],
 	handler: EventHandlerOf<ExternalEvents, UserPresence['_id']> | (() => void),
 ): void => {
-	emitter.on(uid, update);
+	// emitter.on(uid, update);
 	emitter.on(uid, handler);
 
 	const user = store.has(uid) && store.get(uid);
 	if (user) {
-		return handler(user);
+		return;
 	}
 
 	getPresence(uid);
@@ -131,30 +138,19 @@ const stop = (
 ): void => {
 	setTimeout(() => {
 		emitter.off(uid, handler);
-		emitter.off(uid, update);
 		emitter.emit('remove', uid);
 	}, 5000);
 };
 
 const reset = (): void => {
-	emitter.emit('reset');
 	store.clear();
+	emitter.emit('reset');
 };
 
 const restart = (): void => {
 	emitter.emit('restart');
 };
 
-const notify = (update: UserPresence): void => {
-	if (update._id) {
-		emitter.emit(update._id, update);
-	}
-
-	if (update.username) {
-		emitter.emit(update.username, update);
-	}
-};
-
 const get = async (uid: UserPresence['_id']): Promise<UserPresence | undefined> =>
 	new Promise((resolve) => {
 		const callback: EventHandlerOf<ExternalEvents, UserPresence['_id']> = (args): void => {

client/views/room/UserCard/index.js

@@ -57,7 +57,7 @@ const UserCardWithData = ({ username, onClose, target, open, rid }) => {
 			bio,
 			etag: avatarETag,
 			localTime: Number.isInteger(utcOffset) && <LocalTime utcOffset={utcOffset} />,
-			status: status && <ReactiveUserStatus uid={_id} presence={status} />,
+			status: <ReactiveUserStatus uid={_id} />,
 			customStatus: statusText,
 			nickname,
 		};

client/views/room/contextualBar/RoomMembers/List/components/MemberItem.js

@@ -30,7 +30,7 @@ export const MemberItem = ({ _id, status, name, username, onClickView, style, ri
 				<UserAvatar username={username} size='x28' />
 			</Option.Avatar>
 			<Option.Column>
-				<ReactiveUserStatus uid={_id} presence={status} />
+				<ReactiveUserStatus uid={_id} />
 			</Option.Column>
 			<Option.Content>
 				{name} <Option.Description>({username})</Option.Description>

client/views/room/contextualBar/UserInfo/UserInfoWithData.js

@@ -47,7 +47,6 @@ function UserInfoWithData({
 			name,
 			username,
 			roles = [],
-			status = null,
 			statusText,
 			bio,
 			utcOffset,
@@ -69,7 +68,7 @@ function UserInfoWithData({
 			email: getUserEmailAddress(user),
 			utcOffset,
 			createdAt: user.createdAt,
-			status: status && <ReactiveUserStatus uid={_id} presence={status} />,
+			status: <ReactiveUserStatus uid={_id} />,
 			customStatus: statusText,
 			nickname,
 		};