diff --git a/.changeset/tasty-pianos-bathe.md b/.changeset/tasty-pianos-bathe.md new file mode 100644 index 0000000000000..f247a9a24fd22 --- /dev/null +++ b/.changeset/tasty-pianos-bathe.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/meteor": patch +--- + +Fixes an issue where quick reactions (Feature Preview) would be absent on first access and after page refreshes diff --git a/apps/meteor/app/emoji/client/helpers.ts b/apps/meteor/app/emoji/client/helpers.ts index cbd1b08b687de..d36dc958cf20e 100644 --- a/apps/meteor/app/emoji/client/helpers.ts +++ b/apps/meteor/app/emoji/client/helpers.ts @@ -21,15 +21,17 @@ export const createEmojiListByCategorySubscription = ( actualTone: number, recentEmojis: string[], setRecentEmojis: (emojis: string[]) => void, + setQuickReactions: () => void, ): [subscribe: (onStoreChange: () => void) => () => void, getSnapshot: () => ReturnType] => { let result: ReturnType = [[], []]; updateRecent(recentEmojis); const sub = (cb: () => void) => { result = createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis); - + setQuickReactions(); return emojiEmitter.on('updated', () => { result = createPickerEmojis(customItemsLimit, actualTone, recentEmojis, setRecentEmojis); + setQuickReactions(); cb(); }); }; diff --git a/apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx b/apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx index bf3207bbb8d1d..70ed30697649b 100644 --- a/apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx +++ b/apps/meteor/client/providers/EmojiPickerProvider/EmojiPickerProvider.tsx @@ -1,4 +1,4 @@ -import { useDebouncedState, useLocalStorage } from '@rocket.chat/fuselage-hooks'; +import { useDebouncedState, useEffectEvent, useLocalStorage } from '@rocket.chat/fuselage-hooks'; import type { ReactNode, ReactElement, ContextType } from 'react'; import { useState, useCallback, useMemo, useSyncExternalStore } from 'react'; @@ -23,13 +23,14 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen const [customItemsLimit, setCustomItemsLimit] = useState(DEFAULT_ITEMS_LIMIT); - const [quickReactions, setQuickReactions] = useState<{ emoji: string; image: string }[]>(() => + const [quickReactions, _setQuickReactions] = useState<{ emoji: string; image: string }[]>(() => getFrequentEmoji(frequentEmojis.map(([emoji]) => emoji)), ); + const setQuickReactions = useEffectEvent(() => _setQuickReactions(getFrequentEmoji(frequentEmojis.map(([emoji]) => emoji)))); const [sub, getSnapshot] = useMemo(() => { - return createEmojiListByCategorySubscription(customItemsLimit, actualTone, recentEmojis, setRecentEmojis); - }, [customItemsLimit, actualTone, recentEmojis, setRecentEmojis]); + return createEmojiListByCategorySubscription(customItemsLimit, actualTone, recentEmojis, setRecentEmojis, setQuickReactions); + }, [customItemsLimit, actualTone, recentEmojis, setRecentEmojis, setQuickReactions]); const [emojiListByCategory, categoriesIndexes] = useSyncExternalStore(sub, getSnapshot); @@ -46,7 +47,7 @@ const EmojiPickerProvider = ({ children }: { children: ReactNode }): ReactElemen .sort(([, frequentA], [, frequentB]) => frequentB - frequentA); setFrequentEmojis(sortedFrequent); - setQuickReactions(getFrequentEmoji(sortedFrequent.map(([emoji]) => emoji))); + _setQuickReactions(getFrequentEmoji(sortedFrequent.map(([emoji]) => emoji))); }, [frequentEmojis, setFrequentEmojis], );