refactor: remove emoji-custom from meteor (#35737)

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

@@ -1 +0,0 @@
-import './lib/emojiCustom';

apps/meteor/client/hooks/customEmoji/useCustomEmoji.ts

@@ -0,0 +1,55 @@
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect } from 'react';
+
+import { emoji } from '../../../app/emoji/client';
+import { customRender } from '../../lib/customEmoji';
+
+export const useCustomEmoji = () => {
+	const getCustomEmojis = useEndpoint('GET', '/v1/emoji-custom.list');
+	const result = useQuery({
+		queryKey: ['emoji-custom.list'],
+		queryFn: () => getCustomEmojis({ query: '' }),
+	});
+
+	useEffect(() => {
+		emoji.packages.emojiCustom = {
+			emojiCategories: [{ key: 'rocket', i18n: 'Custom' }],
+			categoryIndex: 1,
+			toneList: {},
+			list: [],
+			_regexpSignature: null,
+			_regexp: null,
+			emojisByCategory: { rocket: [] },
+			render: customRender,
+			renderPicker: customRender,
+		};
+
+		if (result.isError) {
+			console.error('Error getting custom emoji ', result.error);
+		}
+
+		if (result.isSuccess) {
+			const {
+				emojis: { update: customEmojis },
+			} = result.data;
+
+			const addCustomEmojis = () => {
+				for (const currentEmoji of customEmojis) {
+					emoji.packages.emojiCustom.emojisByCategory.rocket.push(currentEmoji.name);
+					emoji.packages.emojiCustom.list?.push(`:${currentEmoji.name}:`);
+					emoji.list[`:${currentEmoji.name}:`] = { ...currentEmoji, emojiPackage: 'emojiCustom' } as any;
+					for (const alias of currentEmoji.aliases) {
+						emoji.packages.emojiCustom.list?.push(`:${alias}:`);
+						emoji.list[`:${alias}:`] = {
+							emojiPackage: 'emojiCustom',
+							aliasOf: currentEmoji.name,
+						};
+					}
+				}
+				emoji.dispatchUpdate();
+			};
+			addCustomEmojis();
+		}
+	}, [result.data, result.error, result.isError, result.isSuccess]);
+};

apps/meteor/client/importPackages.ts

@@ -3,7 +3,6 @@ import '../app/authorization/client';
 import '../app/autotranslate/client';
 import '../app/emoji/client';
 import '../app/emoji-emojione/client';
-import '../app/emoji-custom/client';
 import '../app/gitlab/client';
 import '../app/iframe-login/client';
 import '../app/license/client';

apps/meteor/client/lib/customEmoji.ts

@@ -1,11 +1,8 @@
 import type { IEmoji } from '@rocket.chat/core-typings';
 import { escapeRegExp } from '@rocket.chat/string-helpers';
-import { Meteor } from 'meteor/meteor';
 
-import { onLoggedIn } from '../../../../client/lib/loggedIn';
-import { emoji, removeFromRecent, replaceEmojiInRecent } from '../../../emoji/client';
-import { getURL } from '../../../utils/client';
-import { sdk } from '../../../utils/client/lib/SDKClient';
+import { emoji, removeFromRecent, replaceEmojiInRecent } from '../../app/emoji/client';
+import { getURL } from '../../app/utils/client';
 
 const isSetNotNull = (fn: () => unknown) => {
 	let value;
@@ -17,38 +14,6 @@ const isSetNotNull = (fn: () => unknown) => {
 	return value !== null && value !== undefined;
 };
 
-const getEmojiUrlFromName = (name: string, extension: string, etag?: string) => {
-	if (!name) {
-		return;
-	}
-
-	return getURL(`/emoji-custom/${encodeURIComponent(name)}.${extension}${etag ? `?etag=${etag}` : ''}`);
-};
-
-export const deleteEmojiCustom = (emojiData: IEmoji) => {
-	delete emoji.list[`:${emojiData.name}:`];
-	const arrayIndex = emoji.packages.emojiCustom.emojisByCategory.rocket.indexOf(emojiData.name);
-	if (arrayIndex !== -1) {
-		emoji.packages.emojiCustom.emojisByCategory.rocket.splice(arrayIndex, 1);
-	}
-	const arrayIndexList = emoji.packages.emojiCustom.list?.indexOf(`:${emojiData.name}:`) ?? -1;
-	if (arrayIndexList !== -1) {
-		emoji.packages.emojiCustom.list?.splice(arrayIndexList, 1);
-	}
-	if (emojiData.aliases) {
-		for (const alias of emojiData.aliases) {
-			delete emoji.list[`:${alias}:`];
-			const aliasIndex = emoji.packages.emojiCustom.list?.indexOf(`:${alias}:`) ?? -1;
-			if (aliasIndex !== -1) {
-				emoji.packages.emojiCustom.list?.splice(aliasIndex, 1);
-			}
-		}
-	}
-
-	removeFromRecent(emojiData.name, emoji.packages.base.emojisByCategory.recent);
-	emoji.dispatchUpdate();
-};
-
 export const updateEmojiCustom = (emojiData: IEmoji) => {
 	const previousExists = isSetNotNull(() => emojiData.previousName);
 	const currentAliases = isSetNotNull(() => emojiData.aliases);
@@ -98,7 +63,39 @@ export const updateEmojiCustom = (emojiData: IEmoji) => {
 	emoji.dispatchUpdate();
 };
 
-const customRender = (html: string) => {
+export const deleteEmojiCustom = (emojiData: IEmoji) => {
+	delete emoji.list[`:${emojiData.name}:`];
+	const arrayIndex = emoji.packages.emojiCustom.emojisByCategory.rocket.indexOf(emojiData.name);
+	if (arrayIndex !== -1) {
+		emoji.packages.emojiCustom.emojisByCategory.rocket.splice(arrayIndex, 1);
+	}
+	const arrayIndexList = emoji.packages.emojiCustom.list?.indexOf(`:${emojiData.name}:`) ?? -1;
+	if (arrayIndexList !== -1) {
+		emoji.packages.emojiCustom.list?.splice(arrayIndexList, 1);
+	}
+	if (emojiData.aliases) {
+		for (const alias of emojiData.aliases) {
+			delete emoji.list[`:${alias}:`];
+			const aliasIndex = emoji.packages.emojiCustom.list?.indexOf(`:${alias}:`) ?? -1;
+			if (aliasIndex !== -1) {
+				emoji.packages.emojiCustom.list?.splice(aliasIndex, 1);
+			}
+		}
+	}
+
+	removeFromRecent(emojiData.name, emoji.packages.base.emojisByCategory.recent);
+	emoji.dispatchUpdate();
+};
+
+const getEmojiUrlFromName = (name: string, extension: string, etag?: string) => {
+	if (!name) {
+		return;
+	}
+
+	return getURL(`/emoji-custom/${encodeURIComponent(name)}.${extension}${etag ? `?etag=${etag}` : ''}`);
+};
+
+export const customRender = (html: string) => {
 	const emojisMatchGroup = emoji.packages.emojiCustom.list?.map(escapeRegExp).join('|');
 	if (emojisMatchGroup !== emoji.packages.emojiCustom._regexpSignature) {
 		emoji.packages.emojiCustom._regexpSignature = emojisMatchGroup;
@@ -131,42 +128,3 @@ const customRender = (html: string) => {
 
 	return html;
 };
-
-emoji.packages.emojiCustom = {
-	emojiCategories: [{ key: 'rocket', i18n: 'Custom' }],
-	categoryIndex: 1,
-	toneList: {},
-	list: [],
-	_regexpSignature: null,
-	_regexp: null,
-	emojisByCategory: {},
-	render: customRender,
-	renderPicker: customRender,
-};
-
-Meteor.startup(() => {
-	onLoggedIn(async () => {
-		try {
-			const {
-				emojis: { update: emojis },
-			} = await sdk.rest.get('/v1/emoji-custom.list', { query: '' });
-
-			emoji.packages.emojiCustom.emojisByCategory = { rocket: [] };
-			for (const currentEmoji of emojis) {
-				emoji.packages.emojiCustom.emojisByCategory.rocket.push(currentEmoji.name);
-				emoji.packages.emojiCustom.list?.push(`:${currentEmoji.name}:`);
-				emoji.list[`:${currentEmoji.name}:`] = { ...currentEmoji, emojiPackage: 'emojiCustom' } as any;
-				for (const alias of currentEmoji.aliases) {
-					emoji.packages.emojiCustom.list?.push(`:${alias}:`);
-					emoji.list[`:${alias}:`] = {
-						emojiPackage: 'emojiCustom',
-						aliasOf: currentEmoji.name,
-					};
-				}
-			}
-			emoji.dispatchUpdate();
-		} catch (e) {
-			console.error('Error getting custom emoji', e);
-		}
-	});
-});

apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx

@@ -5,6 +5,7 @@ import { useState, useCallback, useMemo, useSyncExternalStore } from 'react';
 import { useUpdateCustomEmoji } from './useUpdateCustomEmoji';
 import { emoji, getFrequentEmoji, createEmojiListByCategorySubscription } from '../../../app/emoji/client';
 import { EmojiPickerContext } from '../../contexts/EmojiPickerContext';
+import { useCustomEmoji } from '../../hooks/customEmoji/useCustomEmoji';
 import EmojiPicker from '../../views/composer/EmojiPicker/EmojiPicker';
 
 const DEFAULT_ITEMS_LIMIT = 90;
@@ -34,6 +35,7 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen
 
 	const [emojiListByCategory, categoriesIndexes] = useSyncExternalStore(sub, getSnapshot);
 
+	useCustomEmoji();
 	useUpdateCustomEmoji();
 
 	const addFrequentEmojis = useCallback(

apps/meteor/client/providers/EmojiPickerProvider/useUpdateCustomEmoji.ts

@@ -1,7 +1,7 @@
 import { useStream, useUserId } from '@rocket.chat/ui-contexts';
 import { useEffect } from 'react';
 
-import { updateEmojiCustom, deleteEmojiCustom } from '../../../app/emoji-custom/client/lib/emojiCustom';
+import { updateEmojiCustom, deleteEmojiCustom } from '../../lib/customEmoji';
 
 export const useUpdateCustomEmoji = () => {
 	const notify = useStream('notify-logged');