chore: User presence relocation (RocketChat#36704)

Author: tassoevan

apps/meteor/.meteor/packages

@@ -1,17 +1,13 @@
 # Meteor packages used by this project, one per line.
-
 #
-
 # 'meteor add' and 'meteor remove' will edit this file for you,
-
 # but you can also edit it by hand.
 
 rocketchat:ddp
 rocketchat:mongo-config
 rocketchat:livechat
 rocketchat:streamer
 rocketchat:version
-rocketchat:user-presence
 
 accounts-base@3.1.1
 accounts-facebook@1.3.4

apps/meteor/.meteor/versions

@@ -74,7 +74,6 @@ rocketchat:ddp@0.0.1
 rocketchat:livechat@0.0.1
 rocketchat:mongo-config@0.0.1
 rocketchat:streamer@1.1.0
-rocketchat:user-presence@2.6.3
 rocketchat:version@1.0.0
 routepolicy@1.1.2
 service-configuration@1.3.5

apps/meteor/client/lib/userPresence.ts

@@ -0,0 +1,107 @@
+import type { IUser } from '@rocket.chat/core-typings';
+import { UserStatus } from '@rocket.chat/core-typings';
+import { useConnectionStatus, useIsLoggingIn, useMethod, useUser, useUserPreference } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+
+import { withDebouncing } from '../../lib/utils/highOrderFunctions';
+import { Users } from '../stores';
+
+// TODO: merge this with the current React-based implementation of idle detection
+
+export class UserPresence {
+	private user: IUser | undefined;
+
+	private timer: ReturnType<typeof setTimeout> | undefined;
+
+	private status: UserStatus | undefined;
+
+	private awayTime: number | undefined = 60_000;
+
+	private connected = true;
+
+	private goOnline: () => Promise<boolean | undefined> = async () => undefined;
+
+	private goAway: () => Promise<boolean | undefined> = async () => undefined;
+
+	private storeUser: (doc: IUser) => void = () => undefined;
+
+	private startTimer() {
+		this.stopTimer();
+		if (!this.awayTime) return;
+
+		this.timer = setTimeout(this.setAway, this.awayTime);
+	}
+
+	private stopTimer() {
+		clearTimeout(this.timer);
+	}
+
+	private readonly setOnline = () => this.setStatus(UserStatus.ONLINE);
+
+	private readonly setAway = () => this.setStatus(UserStatus.AWAY);
+
+	private readonly setStatus = withDebouncing({ wait: 1000 })(async (newStatus: UserStatus.ONLINE | UserStatus.AWAY) => {
+		if (!this.connected || newStatus === this.status) {
+			this.startTimer();
+			return;
+		}
+
+		if (this.user?.status !== newStatus && this.user?.statusDefault === newStatus) {
+			this.storeUser({ ...this.user, status: newStatus });
+		}
+
+		switch (newStatus) {
+			case UserStatus.ONLINE:
+				await this.goOnline();
+				break;
+
+			case UserStatus.AWAY:
+				await this.goAway();
+				this.stopTimer();
+				break;
+		}
+
+		this.status = newStatus;
+	});
+
+	readonly use = () => {
+		const user = useUser() ?? undefined;
+		const { connected } = useConnectionStatus();
+		const isLoggingIn = useIsLoggingIn();
+		const enableAutoAway = useUserPreference<boolean>('enableAutoAway');
+		const idleTimeLimit = useUserPreference<number>('idleTimeLimit') ?? 300;
+
+		this.user = user;
+		this.connected = connected;
+		this.awayTime = enableAutoAway ? idleTimeLimit * 1000 : undefined;
+		this.goOnline = useMethod('UserPresence:online');
+		this.goAway = useMethod('UserPresence:away');
+		this.storeUser = Users.use((state) => state.store);
+
+		useEffect(() => {
+			const documentEvents = ['mousemove', 'mousedown', 'touchend', 'keydown'] as const;
+			documentEvents.forEach((key) => document.addEventListener(key, this.setOnline));
+			window.addEventListener('focus', this.setOnline);
+
+			return () => {
+				documentEvents.forEach((key) => document.removeEventListener(key, this.setOnline));
+				window.removeEventListener('focus', this.setOnline);
+			};
+		}, []);
+
+		useEffect(() => {
+			if (!user || !connected || isLoggingIn) return;
+			this.startTimer();
+		}, [connected, isLoggingIn, user]);
+
+		useEffect(() => {
+			if (connected) {
+				this.startTimer();
+				this.status = UserStatus.ONLINE;
+				return;
+			}
+			this.stopTimer();
+			this.status = UserStatus.OFFLINE;
+		}, [connected]);
+	};
+}

apps/meteor/client/providers/UserPresenceProvider.tsx

@@ -1,15 +1,20 @@
 import type { UserPresenceContextValue } from '@rocket.chat/ui-contexts';
 import { useSetting, UserPresenceContext } from '@rocket.chat/ui-contexts';
-import type { ReactElement, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useMemo, useEffect } from 'react';
 
 import { Presence } from '../lib/presence';
+import { UserPresence } from '../lib/userPresence';
+
+const userPresence = new UserPresence();
 
 type UserPresenceProviderProps = {
 	children?: ReactNode;
 };
 
-const UserPresenceProvider = ({ children }: UserPresenceProviderProps): ReactElement => {
+const UserPresenceProvider = ({ children }: UserPresenceProviderProps) => {
+	userPresence.use();
+
 	const usePresenceDisabled = useSetting('Presence_broadcast_disabled', false);
 
 	useEffect(() => {

apps/meteor/client/startup/startup.ts

@@ -1,10 +1,8 @@
 import type { UserStatus } from '@rocket.chat/core-typings';
 import { Meteor } from 'meteor/meteor';
-import { UserPresence } from 'meteor/rocketchat:user-presence';
 import { Tracker } from 'meteor/tracker';
 import moment from 'moment';
 
-import { getUserPreference } from '../../app/utils/client';
 import 'highlight.js/styles/github.css';
 import { sdk } from '../../app/utils/client/lib/SDKClient';
 import { synchronizeUserData, removeLocalUserData } from '../lib/userData';
@@ -13,9 +11,6 @@ import { fireGlobalEvent } from '../lib/utils/fireGlobalEvent';
 Meteor.startup(() => {
 	fireGlobalEvent('startup', true);
 
-	window.lastMessageWindow = {};
-	window.lastMessageWindowHistory = {};
-
 	let status: UserStatus | undefined = undefined;
 	Tracker.autorun(async () => {
 		const uid = Meteor.userId();
@@ -42,16 +37,6 @@ Meteor.startup(() => {
 			sdk.call('userSetUtcOffset', utcOffset);
 		}
 
-		if (getUserPreference(user, 'enableAutoAway')) {
-			const idleTimeLimit = (getUserPreference(user, 'idleTimeLimit') as number | null | undefined) || 300;
-			UserPresence.awayTime = idleTimeLimit * 1000;
-		} else {
-			delete UserPresence.awayTime;
-			UserPresence.stopTimer();
-		}
-
-		UserPresence.start();
-
 		if (user.status !== status) {
 			status = user.status;
 			fireGlobalEvent('status-changed', status);