Render incoming Reactions

ts/components/emoji/Emoji.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { getImagePath, SkinToneKey } from './lib';
+import { emojiToImage, getImagePath, SkinToneKey } from './lib';
 
 export type OwnProps = {
   inline?: boolean;
-  shortName: string;
+  emoji?: string;
+  shortName?: string;
   skinTone?: SkinToneKey | number;
   size?: 16 | 18 | 20 | 24 | 28 | 32 | 64 | 66;
   children?: React.ReactNode;
@@ -21,13 +22,18 @@ export const Emoji = React.memo(
         size = 28,
         shortName,
         skinTone,
+        emoji,
         inline,
         className,
         children,
       }: Props,
       ref
     ) => {
-      const image = getImagePath(shortName, skinTone);
+      const image = shortName
+        ? getImagePath(shortName, skinTone)
+        : emoji
+        ? emojiToImage(emoji)
+        : '';
       const backgroundStyle = inline
         ? { backgroundImage: `url('${image}')` }
         : {};

ts/components/emoji/EmojiPicker.tsx

@@ -17,6 +17,7 @@ import {
 } from 'lodash';
 import { Emoji } from './Emoji';
 import { dataByCategory, search } from './lib';
+import { useRestoreFocus } from '../hooks';
 import { LocalizerType } from '../../types/Util';
 
 export type EmojiPickDataType = { skinTone?: number; shortName: string };
@@ -173,19 +174,8 @@ export const EmojiPicker = React.memo(
         };
       }, [onClose, searchMode]);
 
-      // Restore focus on teardown
-      React.useEffect(() => {
-        const lastFocused = document.activeElement as any;
-        if (focusRef.current) {
-          focusRef.current.focus();
-        }
-
-        return () => {
-          if (lastFocused && lastFocused.focus) {
-            lastFocused.focus();
-          }
-        };
-      }, []);
+      // Focus after initial render, restore focus on teardown
+      useRestoreFocus(focusRef);
 
       const emojiGrid = React.useMemo(() => {
         if (searchText) {

ts/components/emoji/lib.ts

@@ -125,6 +125,7 @@ export const preloadImages = async () => {
 
 const dataByShortName = keyBy(data, 'short_name');
 const imageByEmoji: { [key: string]: string } = {};
+const dataByEmoji: { [key: string]: EmojiData } = {};
 
 export const dataByCategory = mapValues(
   groupBy(data, ({ category }) => {
@@ -314,12 +315,14 @@ data.forEach(emoji => {
   }
 
   imageByEmoji[convertShortName(short_name)] = makeImagePath(image);
+  dataByEmoji[convertShortName(short_name)] = emoji;
 
   if (skin_variations) {
     Object.entries(skin_variations).forEach(([tone, variation]) => {
       imageByEmoji[
         convertShortName(short_name, tone as SkinToneKey)
       ] = makeImagePath(variation.image);
+      dataByEmoji[convertShortName(short_name, tone as SkinToneKey)] = emoji;
     });
   }
 });