diff --git a/lib/shared/reaction-utils.js b/lib/shared/reaction-utils.js index 5aa27ef2b1..df97cc007b 100644 --- a/lib/shared/reaction-utils.js +++ b/lib/shared/reaction-utils.js @@ -33,6 +33,22 @@ function stringForReactionList(reactions: ReactionInfo): string { 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 @@ function useCanCreateReactionFromMessage( 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 index 74be16fa0e..10d3461ebf 100644 --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -4,7 +4,10 @@ import * as React from 'react'; 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 @@ function MultimediaMessageTooltipButton(props: Props): React.Node { [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 index b32f0e4a41..00d409c0af 100644 --- a/native/chat/robotext-message-tooltip-button.react.js +++ b/native/chat/robotext-message-tooltip-button.react.js @@ -4,7 +4,10 @@ import * as React from 'react'; 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 @@ function RobotextMessageTooltipButton(props: Props): React.Node { [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 index 499b12b54f..45996265b8 100644 --- a/native/chat/text-message-tooltip-button.react.js +++ b/native/chat/text-message-tooltip-button.react.js @@ -4,7 +4,10 @@ import * as React from 'react'; 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 @@ function TextMessageTooltipButton(props: Props): React.Node { [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 index 194c979c1a..60ef4b3e25 100644 --- a/native/components/emoji-keyboard.react.js +++ b/native/components/emoji-keyboard.react.js @@ -76,6 +76,12 @@ function EmojiKeyboard(props: Props): React.Node { (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); },