Show recent emoji in the customize reaction emoji picker

ts/components/CustomizingPreferredReactionsModal.stories.tsx

@@ -29,6 +29,7 @@ const defaultProps: ComponentProps<
   isSaving: false,
   onSetSkinTone: action('onSetSkinTone'),
   originalPreferredReactions: ['❤️', '👍', '👎', '😂', '😮', '😢'],
+  recentEmojis: ['cake'],
   replaceSelectedDraftEmoji: action('replaceSelectedDraftEmoji'),
   resetDraftEmoji: action('resetDraftEmoji'),
   savePreferredReactions: action('savePreferredReactions'),

ts/components/CustomizingPreferredReactionsModal.tsx

@@ -23,6 +23,7 @@ type PropsType = {
   i18n: LocalizerType;
   isSaving: boolean;
   originalPreferredReactions: Array<string>;
+  recentEmojis: Array<string>;
   selectedDraftEmojiIndex: undefined | number;
   skinTone: number;
 
@@ -44,6 +45,7 @@ export function CustomizingPreferredReactionsModal({
   isSaving,
   onSetSkinTone,
   originalPreferredReactions,
+  recentEmojis,
   replaceSelectedDraftEmoji,
   resetDraftEmoji,
   savePreferredReactions,
@@ -162,6 +164,7 @@ export function CustomizingPreferredReactionsModal({
               );
               replaceSelectedDraftEmoji(emoji);
             }}
+            recentEmojis={recentEmojis}
             skinTone={skinTone}
             onSetSkinTone={onSetSkinTone}
             onClose={() => {

ts/state/smart/CustomizingPreferredReactionsModal.tsx

@@ -10,6 +10,7 @@ import { useActions as usePreferredReactionsActions } from '../ducks/preferredRe
 import { useActions as useItemsActions } from '../ducks/items';
 import { getIntl } from '../selectors/user';
 import { getEmojiSkinTone } from '../selectors/items';
+import { useRecentEmojis } from '../selectors/emojis';
 import { getCustomizeModalState } from '../selectors/preferredReactions';
 
 import { CustomizingPreferredReactionsModal } from '../../components/CustomizingPreferredReactionsModal';
@@ -30,6 +31,8 @@ export function SmartCustomizingPreferredReactionsModal(): JSX.Element {
     );
   }
 
+  const recentEmojis = useRecentEmojis();
+
   const skinTone = useSelector<StateType, number>(state =>
     getEmojiSkinTone(state)
   );
@@ -38,6 +41,7 @@ export function SmartCustomizingPreferredReactionsModal(): JSX.Element {
     <CustomizingPreferredReactionsModal
       i18n={i18n}
       onSetSkinTone={onSetSkinTone}
+      recentEmojis={recentEmojis}
       skinTone={skinTone}
       {...preferredReactionsActions}
       {...customizeModalState}