[FIX] User's Custom Status to be displayed in Direct Chat

client/components/UserStatus.js

@@ -49,6 +49,21 @@ export const usePresence = (uid, presence) => {
 	return status;
 };
 
+export const usePresenceStatusText = (uid, defaultStatusText = null) => {
+	const [statusText, setStatusText] = useSafely(useState(defaultStatusText));
+	useEffect(() => {
+		const handle = ({ statusText = null }) => {
+			setStatusText(statusText);
+		};
+		Presence.listen(uid, handle);
+		return () => {
+			Presence.stop(uid, handle);
+		};
+	}, [setStatusText, uid]);
+
+	return statusText;
+};
+
 export const ReactiveUserStatus = React.memo(({ uid, presence, ...props }) => {
 	const status = usePresence(uid, presence);
 	return <UserStatus status={status} {...props} />;

client/lib/presence.ts

@@ -5,6 +5,7 @@ import { IUser } from '../../definition/IUser';
 
 const emitter = new Emitter();
 const statuses = new Map();
+const statusTexts = new Map();
 
 type User = Pick<IUser, '_id' | 'username' | 'name' | 'status' | 'utcOffset' | 'statusText' | 'avatarETag'>;
 
@@ -63,10 +64,13 @@ const getPresence = ((): ((uid: User['_id']) => void) => {
 		}
 
 		statuses.delete(uid);
+		statusTexts.delete(uid);
 	});
 
 	emitter.on('reset', () => {
 		statuses.clear();
+		statusTexts.clear();
+
 		emitter.once('restart', () => {
 			emitter.events()
 				.filter(isUid)
@@ -82,6 +86,8 @@ type PresenceUpdate = Partial<Pick<User, '_id' | 'username' | 'status' | 'status
 const update: Handler<PresenceUpdate> = (update) => {
 	if (update?._id) {
 		statuses.set(update._id, update.status);
+		statusTexts.set(update._id, update.statusText);
+
 		uids.delete(update._id);
 	}
 };
@@ -92,7 +98,7 @@ const listen = (uid: User['_id'], handler: Handler<PresenceUpdate>): void => {
 	emitter.on('reset', handler);
 
 	if (statuses.has(uid)) {
-		return handler({ status: statuses.get(uid) });
+		return handler({ status: statuses.get(uid), statusText: statusTexts.get(uid) });
 	}
 
 	getPresence(uid);
@@ -109,7 +115,9 @@ const stop = (uid: User['_id'], handler: Handler<PresenceUpdate>): void => {
 
 const reset = (): void => {
 	emitter.emit('reset', {});
+
 	statuses.clear();
+	statusTexts.clear();
 };
 
 const restart = (): void => {

client/views/room/Header/Header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { FlowRouter } from 'meteor/kadira:flow-router';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { ActionButton } from '@rocket.chat/fuselage';
@@ -14,6 +14,9 @@ import { useLayout } from '../../../contexts/LayoutContext';
 import Burger from './Burger';
 import { useTranslation } from '../../../contexts/TranslationContext';
 import MarkdownText from '../../../components/MarkdownText';
+import { useEndpointData } from '../../../hooks/useEndpointData';
+import { useUser } from '../../../contexts/UserContext';
+import { usePresenceStatusText } from '../../../components/UserStatus';
 
 export default React.memo(({ room }) => {
 	const { isEmbedded, showTopNavbarEmbeddedLayout } = useLayout();
@@ -34,6 +37,24 @@ const BackToRoom = React.memo(({ small, prid }) => {
 
 const RoomHeader = ({ room }) => {
 	const icon = useRoomIcon(room);
+
+	const user = useUser();
+
+	const otherUser = useMemo(() => {
+		// check if room is direct message with 2 members
+		if (room.t === 'd' && room.uids?.length === 2) {
+			const userId = room.uids.find((uid) => uid !== user._id);
+			return { userId };
+		}
+		return null;
+	}, [room, user]);
+
+	const { value: data } = useEndpointData('users.info', otherUser);
+
+	const liveStatusText = usePresenceStatusText(otherUser?.userId, null);
+
+	const roomTopic = liveStatusText || data?.user?.statusText || room.topic;
+
 	const { isMobile } = useLayout();
 	const avatar = <RoomAvatar room={room}/>;
 	return <Header>
@@ -51,7 +72,7 @@ const RoomHeader = ({ room }) => {
 				<Translate room={room} />
 			</Header.Content.Row>
 			<Header.Content.Row>
-				<Header.Subtitle>{room.topic && <MarkdownText withRichContent={false} content={room.topic}/>}</Header.Subtitle>
+				<Header.Subtitle>{roomTopic && <MarkdownText withRichContent={false} content={roomTopic}/>}</Header.Subtitle>
 			</Header.Content.Row>
 		</Header.Content>
 		<Header.ToolBox>