refactor: remove meteor startup & autorun from emojione (#34989)

Co-authored-by: Douglas Fabris <27704687+dougfabris@users.noreply.github.com>

apps/meteor/app/emoji-emojione/client/hooks/useEmojiOne.ts

+import { useUserPreference } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+
+import { emoji } from '../../../emoji/client';
+import { getEmojiConfig } from '../../lib/getEmojiConfig';
+import { isSetNotNull } from '../../lib/isSetNotNull';
+
+const config = getEmojiConfig();
+
+export const useEmojiOne = () => {
+	const convertAsciiToEmoji = useUserPreference<boolean>('convertAsciiEmoji', true);
+
+	emoji.packages.emojione = config.emojione as any;
+	if (emoji.packages.emojione) {
+		emoji.packages.emojione.sprites = config.sprites;
+		emoji.packages.emojione.emojisByCategory = config.emojisByCategory;
+		emoji.packages.emojione.emojiCategories = config.emojiCategories as any;
+		emoji.packages.emojione.toneList = config.toneList;
+
+		emoji.packages.emojione.render = config.render;
+		emoji.packages.emojione.renderPicker = config.renderPicker;
+
+		// RocketChat.emoji.list is the collection of emojis from all emoji packages
+		for (const [key, currentEmoji] of Object.entries(config.emojione.emojioneList)) {
+			currentEmoji.emojiPackage = 'emojione';
+			emoji.list[key] = currentEmoji;
+
+			if (currentEmoji.shortnames) {
+				currentEmoji.shortnames.forEach((shortname: string) => {
+					emoji.list[shortname] = currentEmoji;
+				});
+			}
+		}
+	}
+	useEffect(() => {
+		if (emoji.packages.emojione) {
+			// Additional settings -- ascii emojis
+			const ascii = async (): Promise<void> => {
+				if ((await isSetNotNull(() => emoji.packages.emojione)) && emoji.packages.emojione) {
+					if (typeof convertAsciiToEmoji === 'boolean') {
+						emoji.packages.emojione.ascii = convertAsciiToEmoji;
+					} else {
+						emoji.packages.emojione.ascii = true;
+					}
+				}
+			};
+
+			void ascii();
+		}
+	}, [convertAsciiToEmoji]);
+};

apps/meteor/app/emoji-emojione/client/index.ts

-import './lib';
 import './emojione-sprites.css';

apps/meteor/app/emoji-emojione/client/lib.ts

-import { Meteor } from 'meteor/meteor';
-
-import { emoji } from '../../emoji/client';
-import { getUserPreference } from '../../utils/client';
-import { getEmojiConfig } from '../lib/getEmojiConfig';
-import { isSetNotNull } from '../lib/isSetNotNull';
-
-const config = getEmojiConfig();
-
-emoji.packages.emojione = config.emojione as any;
-if (emoji.packages.emojione) {
-	emoji.packages.emojione.sprites = config.sprites;
-	emoji.packages.emojione.emojisByCategory = config.emojisByCategory;
-	emoji.packages.emojione.emojiCategories = config.emojiCategories as any;
-	emoji.packages.emojione.toneList = config.toneList;
-
-	emoji.packages.emojione.render = config.render;
-	emoji.packages.emojione.renderPicker = config.renderPicker;
-
-	// RocketChat.emoji.list is the collection of emojis from all emoji packages
-	for (const [key, currentEmoji] of Object.entries(config.emojione.emojioneList)) {
-		currentEmoji.emojiPackage = 'emojione';
-		emoji.list[key] = currentEmoji;
-
-		if (currentEmoji.shortnames) {
-			currentEmoji.shortnames.forEach((shortname: string) => {
-				emoji.list[shortname] = currentEmoji;
-			});
-		}
-	}
-
-	// Additional settings -- ascii emojis
-	Meteor.startup(() => {
-		Tracker.autorun(async () => {
-			if ((await isSetNotNull(() => emoji.packages.emojione)) && emoji.packages.emojione) {
-				if (await isSetNotNull(() => getUserPreference(Meteor.userId() as string, 'convertAsciiEmoji'))) {
-					emoji.packages.emojione.ascii = await getUserPreference(Meteor.userId() as string, 'convertAsciiEmoji');
-				} else {
-					emoji.packages.emojione.ascii = true;
-				}
-			}
-		});
-	});
-}

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

@@ -9,6 +9,7 @@ import { useSettingsOnLoadSiteUrl } from './hooks/useSettingsOnLoadSiteUrl';
 import { useAnalytics } from '../../../app/analytics/client/loadScript';
 import { useDolphin } from '../../../app/dolphin/client/hooks/useDolphin';
 import { useDrupal } from '../../../app/drupal/client/hooks/useDrupal';
+import { useEmojiOne } from '../../../app/emoji-emojione/client/hooks/useEmojiOne';
 import { useGitHubEnterpriseAuth } from '../../../app/github-enterprise/client/hooks/useGitHubEnterpriseAuth';
 import { useGitLabAuth } from '../../../app/gitlab/client/hooks/useGitLabAuth';
 import { useLivechatEnterprise } from '../../../app/livechat-enterprise/hooks/useLivechatEnterprise';
@@ -35,6 +36,7 @@ const AppLayout = () => {
 	useAnalyticsEventTracking();
 	useLoadRoomForAllowedAnonymousRead();
 	useNotifyUser();
+	useEmojiOne();
 	useRedirectToSetupWizard();
 	useSettingsOnLoadSiteUrl();
 	useLivechatEnterprise();