refactor: remove deprecated KonchatNotification

apps/meteor/app/ui/client/lib/KonchatNotification.ts

@@ -1,24 +1 @@
-import { ReactiveVar } from 'meteor/reactive-var';
-
-declare global {
-	// eslint-disable-next-line @typescript-eslint/naming-convention
-	interface NotificationEventMap {
-		reply: { response: string };
-	}
-}
-
-class KonchatNotification {
-	public notificationStatus = new ReactiveVar<NotificationPermission | undefined>(undefined);
-
-	public getDesktopPermission() {
-		if (window.Notification && Notification.permission !== 'granted') {
-			return Notification.requestPermission((status) => {
-				this.notificationStatus.set(status);
-			});
-		}
-	}
-}
-
-const instance = new KonchatNotification();
-
-export { instance as KonchatNotification };
+// KonchatNotification in memoriam

apps/meteor/client/definitions/global.d.ts

@@ -80,4 +80,8 @@ declare global {
 			maxHeight: number;
 		};
 	}
+
+	interface NotificationEventMap {
+		reply: { response: string };
+	}
 }

apps/meteor/client/hooks/notification/useNotification.ts

@@ -3,6 +3,7 @@ import { Random } from '@rocket.chat/random';
 import { useRouter, useUserPreference } from '@rocket.chat/ui-contexts';
 import { useCallback } from 'react';
 
+import { useNotificationAllowed } from './useNotificationAllowed';
 import { getUserAvatarURL } from '../../../app/utils/client';
 import { sdk } from '../../../app/utils/client/lib/SDKClient';
 import { stripTags } from '../../../lib/utils/stringUtils';
@@ -11,10 +12,11 @@ import { onClientMessageReceived } from '../../lib/onClientMessageReceived';
 export const useNotification = () => {
 	const requireInteraction = useUserPreference('desktopNotificationRequireInteraction');
 	const router = useRouter();
+	const notificationAllowed = useNotificationAllowed();
 
 	const notify = useCallback(
 		async (notification: INotificationDesktop) => {
-			if (typeof window.Notification === 'undefined' || Notification.permission !== 'granted') {
+			if (!notificationAllowed) {
 				return;
 			}
 			if (!notification.payload) {
@@ -116,7 +118,7 @@ export const useNotification = () => {
 				}
 			};
 		},
-		[requireInteraction, router],
+		[notificationAllowed, requireInteraction, router],
 	);
 	return notify;
 };

apps/meteor/client/hooks/notification/useNotificationAllowed.ts

@@ -0,0 +1,19 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+import { notificationManager } from '../../lib/notificationManager';
+
+export const useNotificationAllowed = (): boolean => {
+	const allowed = useSyncExternalStore(
+		useCallback(
+			(callback): (() => void) =>
+				notificationManager.on('change', () => {
+					notificationManager.allowed = Notification.permission === 'granted';
+					callback();
+				}),
+			[],
+		),
+		(): boolean => notificationManager.allowed,
+	);
+
+	return allowed;
+};

apps/meteor/client/hooks/notification/useNotificationPermission.ts

@@ -0,0 +1,21 @@
+import { useCallback } from 'react';
+
+import { notificationManager } from '../../lib/notificationManager';
+
+export const useNotificationPermission = () => {
+	const requestPermission = useCallback(async () => {
+		const response = await Notification.requestPermission();
+		notificationManager.allowed = response === 'granted';
+		notificationManager.emit('change');
+
+		const notifications = await navigator.permissions.query({ name: 'notifications' });
+		notifications.onchange = () => {
+			notificationManager.allowed = notifications.state === 'granted';
+			notificationManager.emit('change');
+		};
+	}, []);
+
+	if ('Notification' in window) {
+		requestPermission();
+	}
+};

apps/meteor/client/lib/notificationManager.ts

@@ -0,0 +1,6 @@
+import { Emitter } from '@rocket.chat/emitter';
+
+class NotificationPermissionEmitter extends Emitter {
+	allowed: boolean;
+}
+export const notificationManager = new NotificationPermissionEmitter();

apps/meteor/client/views/account/preferences/PreferencesNotificationsSection.tsx

@@ -20,7 +20,6 @@ const emailNotificationOptionsLabelMap = {
 	nothing: 'Email_Notification_Mode_Disabled',
 };
 
-// TODO: Test Notification Button not working
 const PreferencesNotificationsSection = () => {
 	const { t, i18n } = useTranslation();
 

apps/meteor/client/views/home/HomePage.tsx

@@ -1,16 +1,10 @@
 import { useSetting } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
-import { useEffect } from 'react';
 
 import CustomHomePage from './CustomHomePage';
 import DefaultHomePage from './DefaultHomePage';
-import { KonchatNotification } from '../../../app/ui/client/lib/KonchatNotification';
 
 const HomePage = (): ReactElement => {
-	useEffect(() => {
-		KonchatNotification.getDesktopPermission();
-	}, []);
-
 	const customOnly = useSetting('Layout_Custom_Body_Only');
 
 	if (customOnly) {

apps/meteor/client/views/root/AppLayout.tsx

@@ -19,6 +19,7 @@ import { useGitLabAuth } from '../../../app/gitlab/client/hooks/useGitLabAuth';
 import { useLivechatEnterprise } from '../../../app/livechat-enterprise/hooks/useLivechatEnterprise';
 import { useNextcloud } from '../../../app/nextcloud/client/useNextcloud';
 import { useTokenPassAuth } from '../../../app/tokenpass/client/hooks/useTokenPassAuth';
+import { useNotificationPermission } from '../../hooks/notification/useNotificationPermission';
 import { useNotifyUser } from '../../hooks/notification/useNotifyUser';
 import { useAnalyticsEventTracking } from '../../hooks/useAnalyticsEventTracking';
 import { useAutoupdate } from '../../hooks/useAutoupdate';
@@ -43,6 +44,7 @@ const AppLayout = () => {
 	useAnalyticsEventTracking();
 	useLoadRoomForAllowedAnonymousRead();
 	useNotifyUser();
+	useNotificationPermission();
 	useEmojiOne();
 	useRedirectToSetupWizard();
 	useSettingsOnLoadSiteUrl();