fix: broken client-side updates for recent emoji list (RocketChat#33808)

.changeset/serious-mice-film.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': patch
+---
+
+Fixes client-side updates for recent emoji list when custom emojis are modified.

apps/meteor/app/emoji-custom/client/lib/emojiCustom.ts

@@ -3,7 +3,7 @@ import { escapeRegExp } from '@rocket.chat/string-helpers';
 import { Meteor } from 'meteor/meteor';
 import { Session } from 'meteor/session';
 
-import { emoji, updateRecent } from '../../../emoji/client';
+import { emoji, removeFromRecent, replaceEmojiInRecent } from '../../../emoji/client';
 import { CachedCollectionManager } from '../../../ui-cached-collection/client';
 import { getURL } from '../../../utils/client';
 import { sdk } from '../../../utils/client/lib/SDKClient';
@@ -49,7 +49,8 @@ export const deleteEmojiCustom = (emojiData: IEmoji) => {
 			}
 		}
 	}
-	updateRecent(['rocket']);
+
+	removeFromRecent(emojiData.name, emoji.packages.base.emojisByCategory.recent);
 };
 
 export const updateEmojiCustom = (emojiData: IEmoji) => {
@@ -94,7 +95,9 @@ export const updateEmojiCustom = (emojiData: IEmoji) => {
 		}
 	}
 
-	updateRecent(['rocket']);
+	if (previousExists) {
+		replaceEmojiInRecent({ oldEmoji: emojiData.previousName, newEmoji: emojiData.name });
+	}
 };
 
 const customRender = (html: string) => {

apps/meteor/app/emoji/client/helpers.ts

@@ -138,15 +138,15 @@ export const getEmojisBySearchTerm = (
 	return emojis;
 };
 
-export const removeFromRecent = (emoji: string, recentEmojis: string[], setRecentEmojis: (emojis: string[]) => void) => {
+export const removeFromRecent = (emoji: string, recentEmojis: string[], setRecentEmojis?: (emojis: string[]) => void) => {
 	const _emoji = emoji.replace(/(^:|:$)/g, '');
 	const pos = recentEmojis.indexOf(_emoji as never);
 
 	if (pos === -1) {
 		return;
 	}
 	recentEmojis.splice(pos, 1);
-	setRecentEmojis(recentEmojis);
+	setRecentEmojis?.(recentEmojis);
 };
 
 export const updateRecent = (recentList: string[]) => {
@@ -156,6 +156,15 @@ export const updateRecent = (recentList: string[]) => {
 	});
 };
 
+export const replaceEmojiInRecent = ({ oldEmoji, newEmoji }: { oldEmoji: string; newEmoji: string }) => {
+	const recentPkgList: string[] = emoji.packages.base.emojisByCategory.recent;
+	const pos = recentPkgList.indexOf(oldEmoji);
+
+	if (pos !== -1) {
+		recentPkgList[pos] = newEmoji;
+	}
+};
+
 const getEmojiRender = (emojiName: string) => {
 	const emojiPackageName = emoji.list[emojiName]?.emojiPackage;
 	const emojiPackage = emoji.packages[emojiPackageName];

apps/meteor/tests/unit/app/emoji/helpers.spec.ts

@@ -0,0 +1,51 @@
+import { expect } from 'chai';
+import { describe, it, beforeEach } from 'mocha';
+
+import { updateRecent, removeFromRecent, replaceEmojiInRecent } from '../../../../app/emoji/client/helpers';
+import { emoji } from '../../../../app/emoji/client/lib';
+
+describe('Emoji Client Helpers', () => {
+	beforeEach(() => {
+		emoji.packages.base.emojisByCategory.recent = [];
+	});
+
+	describe('updateRecent', () => {
+		it('should update recent emojis with the provided emojis', () => {
+			const recentEmojis = ['emoji1', 'emoji2'];
+			updateRecent(recentEmojis);
+			expect(emoji.packages.base.emojisByCategory.recent).to.contain('emoji1');
+			expect(emoji.packages.base.emojisByCategory.recent).to.contain('emoji2');
+		});
+	});
+
+	describe('removeFromRecent', () => {
+		it('should remove a specific emoji from recent emojis', () => {
+			emoji.packages.base.emojisByCategory.recent = ['emoji1', 'emoji2', 'emoji3'];
+			removeFromRecent('emoji2', emoji.packages.base.emojisByCategory.recent);
+			expect(emoji.packages.base.emojisByCategory.recent).to.not.include('emoji2');
+			expect(emoji.packages.base.emojisByCategory.recent).to.deep.equal(['emoji1', 'emoji3']);
+		});
+
+		it('should do nothing if the emoji is not in the recent list', () => {
+			emoji.packages.base.emojisByCategory.recent = ['emoji1', 'emoji2'];
+			removeFromRecent('emoji3', emoji.packages.base.emojisByCategory.recent);
+			expect(emoji.packages.base.emojisByCategory.recent).to.deep.equal(['emoji1', 'emoji2']);
+		});
+	});
+
+	describe('replaceEmojiInRecent', () => {
+		it('should replace an existing emoji with a new one in recent emojis', () => {
+			emoji.packages.base.emojisByCategory.recent = ['emoji1', 'emoji2', 'emoji3'];
+			replaceEmojiInRecent({ oldEmoji: 'emoji2', newEmoji: 'emoji4' });
+			expect(emoji.packages.base.emojisByCategory.recent).to.not.include('emoji2');
+			expect(emoji.packages.base.emojisByCategory.recent).to.include('emoji4');
+			expect(emoji.packages.base.emojisByCategory.recent).to.deep.equal(['emoji1', 'emoji4', 'emoji3']);
+		});
+
+		it('should do nothing if the emoji to replace is not in the recent list', () => {
+			emoji.packages.base.emojisByCategory.recent = ['emoji1', 'emoji2'];
+			replaceEmojiInRecent({ oldEmoji: 'emoji3', newEmoji: 'emoji4' });
+			expect(emoji.packages.base.emojisByCategory.recent).to.deep.equal(['emoji1', 'emoji2']);
+		});
+	});
+});