From bce34c111a0d9c56f6b87381d29e39765a205cc8 Mon Sep 17 00:00:00 2001
From: Nikki Sharpley <nsharpley@mozilla.com>
Date: Mon, 19 Jun 2023 12:54:34 -0400
Subject: [PATCH] fix for emojis crash

---
 package-lock.json                             | 19 +++++++++++----
 package.json                                  |  2 +-
 src/react-components/room/ChatSidebar.js      |  5 ++--
 .../room/ChatSidebarContainer.js              |  2 +-
 src/react-components/room/EmojiPicker.js      | 24 ++-----------------
 5 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 40fc15f1c..5bba0152a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,7 +39,7 @@
         "detect-browser": "^3.0.1",
         "downshift": "^6.0.5",
         "draft-js": "^0.11.7",
-        "emoji-mart": "^5.5.2",
+        "emoji-picker-react": "^4.4.9",
         "event-target-shim": "^3.0.1",
         "form-data": "^3.0.0",
         "form-urlencoded": "^2.0.4",
@@ -13515,10 +13515,19 @@
         "url": "https://github.com/sindresorhus/emittery?sponsor=1"
       }
     },
-    "node_modules/emoji-mart": {
-      "version": "5.5.2",
-      "resolved": "https://registry.npmjs.org/emoji-mart/-/emoji-mart-5.5.2.tgz",
-      "integrity": "sha512-Sqc/nso4cjxhOwWJsp9xkVm8OF5c+mJLZJFoFfzRuKO+yWiN7K8c96xmtughYb0d/fZ8UC6cLIQ/p4BR6Pv3/A=="
+    "node_modules/emoji-picker-react": {
+      "version": "4.4.9",
+      "resolved": "https://registry.npmjs.org/emoji-picker-react/-/emoji-picker-react-4.4.9.tgz",
+      "integrity": "sha512-ef9MfzSJy5xrzihLLv0e1zZmiNtcekubctTBQVfIpvKfsfu4iLBBzcHCmOC2IaUVBCZuUw+GM24BAPj1MdCQXQ==",
+      "dependencies": {
+        "clsx": "^1.2.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "react": ">=16"
+      }
     },
     "node_modules/emoji-regex": {
       "version": "6.5.1",
diff --git a/package.json b/package.json
index 13eef133a..ccf7ff337 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,7 @@
     "detect-browser": "^3.0.1",
     "downshift": "^6.0.5",
     "draft-js": "^0.11.7",
-    "emoji-mart": "^5.5.2",
+    "emoji-picker-react": "^4.4.9",
     "event-target-shim": "^3.0.1",
     "form-data": "^3.0.0",
     "form-urlencoded": "^2.0.4",
diff --git a/src/react-components/room/ChatSidebar.js b/src/react-components/room/ChatSidebar.js
index 065aebd00..8b6f4e1bb 100644
--- a/src/react-components/room/ChatSidebar.js
+++ b/src/react-components/room/ChatSidebar.js
@@ -61,9 +61,10 @@ export const EmojiPickerPopoverButton = React.memo(({ onSelectEmoji, disabled })
       title=""
       content={({ closePopover }) => (
         <EmojiPicker
-          onSelect={emoji => {
+          onEmojiClick={emoji => {
+            console.log(emoji);
             const keepPickerOpen = shiftKeyDown.current;
-            onSelectEmoji({ emoji, pickerRemainedOpen: keepPickerOpen });
+            onSelectEmoji({ emoji: emoji.emoji, pickerRemainedOpen: keepPickerOpen });
             // Keep the picker open if the Shift key was held down to allow
             // for multiple emoji selections.
             if (!keepPickerOpen) closePopover();
diff --git a/src/react-components/room/ChatSidebarContainer.js b/src/react-components/room/ChatSidebarContainer.js
index 9f4cf8baf..c9d09524f 100644
--- a/src/react-components/room/ChatSidebarContainer.js
+++ b/src/react-components/room/ChatSidebarContainer.js
@@ -118,7 +118,7 @@ export function ChatSidebarContainer({
 
   const onSelectEmoji = useCallback(
     ({ emoji, pickerRemainedOpen }) => {
-      setMessage(message => message + emoji.native);
+      setMessage(message => message + emoji);
       // If the picker remained open, avoid selecting the input so that the
       // user can keep picking emojis.
       if (!pickerRemainedOpen) inputRef.current.select();
diff --git a/src/react-components/room/EmojiPicker.js b/src/react-components/room/EmojiPicker.js
index c8fe3ea82..27aaccb84 100644
--- a/src/react-components/room/EmojiPicker.js
+++ b/src/react-components/room/EmojiPicker.js
@@ -1,28 +1,8 @@
 import React from "react";
-import { Picker } from "emoji-mart";
-// Twitter emoji sheets downloaded from unpkg.com provided by https://github.com/missive/emoji-mart
-import emojiIcons16 from "../../assets/images/emoji-picker-16.png";
-import emojiIcons20 from "../../assets/images/emoji-picker-20.png";
-import emojiIcons32 from "../../assets/images/emoji-picker-32.png";
-import emojiIcons64 from "../../assets/images/emoji-picker-64.png";
+import Picker from "emoji-picker-react";
 
 import "./EmojiPicker.scss";
 
-const iconSheet = {
-  16: emojiIcons16,
-  20: emojiIcons20,
-  32: emojiIcons32,
-  64: emojiIcons64
-};
-
 export function EmojiPicker(props) {
-  return (
-    <Picker
-      title="Pick an emoji!"
-      color="var(--tab-highlight-color)"
-      // eslint-disable-next-line no-unused-vars
-      backgroundImageFn={(set, sheetSize) => iconSheet[sheetSize]}
-      {...props}
-    />
-  );
+  return <Picker {...props} />;
 }