Use UnstableValue for finding the shortcode

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
Signed-off-by: Sumner Evans <sumner@beeper.com>

Author: sumnerevans

src/components/views/messages/ReactionsRow.tsx

@@ -18,6 +18,7 @@ import React, { SyntheticEvent } from "react";
 import classNames from "classnames";
 import { MatrixEvent, MatrixEventEvent, Relations, RelationsEvent } from "matrix-js-sdk/src/matrix";
 import { uniqBy } from "lodash";
+import { UnstableValue } from "matrix-js-sdk/src/NamespacedValue";
 
 import { _t } from "../../../languageHandler";
 import { isContentActionable } from "../../../utils/EventUtils";
@@ -31,6 +32,8 @@ import AccessibleButton from "../elements/AccessibleButton";
 // The maximum number of reactions to initially show on a message.
 const MAX_ITEMS_WHEN_LIMITED = 8;
 
+export const REACTION_SHORTCODE_KEY = new UnstableValue("shortcode", "com.beeper.reaction.shortcode");
+
 const ReactButton: React.FC<IProps> = ({ mxEvent, reactions }) => {
     const [menuDisplayed, button, openMenu, closeMenu] = useContextMenu();
 

src/components/views/messages/ReactionsRowButton.tsx

@@ -26,6 +26,7 @@ import ReactionsRowButtonTooltip from "./ReactionsRowButtonTooltip";
 import AccessibleButton from "../elements/AccessibleButton";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SettingsStore from "../../../settings/SettingsStore";
+import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -115,8 +116,8 @@ export default class ReactionsRowButton extends React.PureComponent<IProps, ISta
             for (const reactionEvent of reactionEvents) {
                 const member = room.getMember(reactionEvent.getSender()!);
                 senders.push(member?.name || reactionEvent.getSender()!);
-                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
-                    customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
+                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                    customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }
 

src/components/views/messages/ReactionsRowButtonTooltip.tsx

@@ -23,6 +23,7 @@ import { formatCommaSeparatedList } from "../../../utils/FormattingUtils";
 import Tooltip from "../elements/Tooltip";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import SettingsStore from "../../../settings/SettingsStore";
+import { REACTION_SHORTCODE_KEY } from "./ReactionsRow";
 interface IProps {
     // The event we're displaying reactions for
     mxEvent: MatrixEvent;
@@ -50,8 +51,8 @@ export default class ReactionsRowButtonTooltip extends React.PureComponent<IProp
                 const member = room.getMember(reactionEvent.getSender()!);
                 const name = member?.name ?? reactionEvent.getSender()!;
                 senders.push(name);
-                if (customReactionImagesEnabled && reactionEvent.event.content?.["com.beeper.reaction.shortcode"]) {
-                    customReactionName = reactionEvent.event.content?.["com.beeper.reaction.shortcode"];
+                if (customReactionImagesEnabled && REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent())) {
+                    customReactionName = REACTION_SHORTCODE_KEY.findIn(reactionEvent.getContent());
                 }
             }
             const shortName = unicodeToShortcode(content) || customReactionName;