diff --git a/.changeset/serious-mice-film.md b/.changeset/serious-mice-film.md new file mode 100644 index 0000000000000..35a2d67040717 --- /dev/null +++ b/.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. diff --git a/apps/meteor/app/emoji-custom/client/lib/emojiCustom.ts b/apps/meteor/app/emoji-custom/client/lib/emojiCustom.ts index ee186ebd4e15d..3f4b876f12a76 100644 --- a/apps/meteor/app/emoji-custom/client/lib/emojiCustom.ts +++ b/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) => { diff --git a/apps/meteor/app/emoji/client/helpers.ts b/apps/meteor/app/emoji/client/helpers.ts index 35badda26a732..a203216640f5e 100644 --- a/apps/meteor/app/emoji/client/helpers.ts +++ b/apps/meteor/app/emoji/client/helpers.ts @@ -138,7 +138,7 @@ 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); @@ -146,7 +146,7 @@ export const removeFromRecent = (emoji: string, recentEmojis: string[], setRecen 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]; diff --git a/apps/meteor/tests/unit/app/emoji/helpers.spec.ts b/apps/meteor/tests/unit/app/emoji/helpers.spec.ts new file mode 100644 index 0000000000000..c7d83b5a36c27 --- /dev/null +++ b/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']); + }); + }); +});