diff --git a/lib/shared/reaction-utils.js b/lib/shared/reaction-utils.js --- a/lib/shared/reaction-utils.js +++ b/lib/shared/reaction-utils.js @@ -33,6 +33,22 @@ return reactionText.join(' '); } +function getViewerAlreadySelectedMessageReactions( + reactions: ReactionInfo, +): $ReadOnlyArray { + const alreadySelectedEmojis = []; + + for (const reaction in reactions) { + const reactionInfo = reactions[reaction]; + + if (reactionInfo.viewerReacted) { + alreadySelectedEmojis.push(reaction); + } + } + + return alreadySelectedEmojis; +} + type MessageReactionListInfo = { +id: string, +isViewer: boolean, @@ -103,6 +119,7 @@ export { stringForReactionList, + getViewerAlreadySelectedMessageReactions, useMessageReactionsList, useCanCreateReactionFromMessage, }; diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -4,7 +4,10 @@ import Animated from 'react-native-reanimated'; import { localIDPrefix } from 'lib/shared/message-utils.js'; -import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; +import { + getViewerAlreadySelectedMessageReactions, + useCanCreateReactionFromMessage, +} from 'lib/shared/reaction-utils.js'; import { TooltipInlineEngagement } from './inline-engagement.react.js'; import { InnerMultimediaMessage } from './inner-multimedia-message.react.js'; @@ -152,7 +155,10 @@ [sendReaction, dismissTooltip], ); - const alreadySelectedEmojis = React.useMemo(() => [], []); + const alreadySelectedEmojis = React.useMemo( + () => getViewerAlreadySelectedMessageReactions(item.reactions), + [item.reactions], + ); return ( <> diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js --- a/native/chat/robotext-message-tooltip-button.react.js +++ b/native/chat/robotext-message-tooltip-button.react.js @@ -4,7 +4,10 @@ import Animated from 'react-native-reanimated'; import { localIDPrefix } from 'lib/shared/message-utils.js'; -import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; +import { + getViewerAlreadySelectedMessageReactions, + useCanCreateReactionFromMessage, +} from 'lib/shared/reaction-utils.js'; import { TooltipInlineEngagement } from './inline-engagement.react.js'; import { InnerRobotextMessage } from './inner-robotext-message.react.js'; @@ -135,7 +138,10 @@ [sendReaction, dismissTooltip], ); - const alreadySelectedEmojis = React.useMemo(() => [], []); + const alreadySelectedEmojis = React.useMemo( + () => getViewerAlreadySelectedMessageReactions(item.reactions), + [item.reactions], + ); return ( <> diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js --- a/native/chat/text-message-tooltip-button.react.js +++ b/native/chat/text-message-tooltip-button.react.js @@ -4,7 +4,10 @@ import Animated from 'react-native-reanimated'; import { localIDPrefix } from 'lib/shared/message-utils.js'; -import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils.js'; +import { + getViewerAlreadySelectedMessageReactions, + useCanCreateReactionFromMessage, +} from 'lib/shared/reaction-utils.js'; import { TooltipInlineEngagement } from './inline-engagement.react.js'; import { InnerTextMessage } from './inner-text-message.react.js'; @@ -149,7 +152,10 @@ [sendReaction, dismissTooltip], ); - const alreadySelectedEmojis = React.useMemo(() => [], []); + const alreadySelectedEmojis = React.useMemo( + () => getViewerAlreadySelectedMessageReactions(item.reactions), + [item.reactions], + ); return ( diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js --- a/native/components/emoji-keyboard.react.js +++ b/native/components/emoji-keyboard.react.js @@ -76,6 +76,12 @@ (emoji: EmojiSelection) => { if (!selectMultipleEmojis) { setCurrentlySelected([emoji.name]); + } else if (emoji.alreadySelected) { + setCurrentlySelected(prev => + prev.filter(emojiName => emojiName !== emoji.name), + ); + } else { + setCurrentlySelected(prev => [...prev, emoji.name]); } onEmojiSelected(emoji); },