diff --git a/native/chat/composed-message.react.js b/native/chat/composed-message.react.js --- a/native/chat/composed-message.react.js +++ b/native/chat/composed-message.react.js @@ -199,6 +199,8 @@ const positioning = isViewer ? 'right' : 'left'; inlineEngagement = ( <InlineEngagement + messageInfo={item.messageInfo} + threadInfo={item.threadInfo} sidebarThreadInfo={item.threadCreatedFromMessage} reactions={item.reactions} positioning={positioning} diff --git a/native/chat/inline-engagement.react.js b/native/chat/inline-engagement.react.js --- a/native/chat/inline-engagement.react.js +++ b/native/chat/inline-engagement.react.js @@ -11,6 +11,8 @@ import useInlineEngagementText from 'lib/hooks/inline-engagement-text.react.js'; import type { ReactionInfo } from 'lib/selectors/chat-selectors.js'; +import { localIDPrefix } from 'lib/shared/message-utils.js'; +import type { MessageInfo } from 'lib/types/message-types.js'; import type { ThreadInfo } from 'lib/types/thread-types.js'; import { @@ -22,13 +24,17 @@ avatarOffset, } from './chat-constants.js'; import { useNavigateToThread } from './message-list-types.js'; +import { useSendReaction } from './reaction-message-utils.js'; import CommIcon from '../components/comm-icon.react.js'; import GestureTouchableOpacity from '../components/gesture-touchable-opacity.react.js'; import { MessageReactionsModalRouteName } from '../navigation/route-names.js'; +import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; import type { ChatMessageInfoItemWithHeight } from '../types/chat-types.js'; type Props = { + +messageInfo: MessageInfo, + +threadInfo: ThreadInfo, +sidebarThreadInfo: ?ThreadInfo, +reactions: ReactionInfo, +disabled?: boolean, @@ -37,6 +43,8 @@ }; function InlineEngagement(props: Props): React.Node { const { + messageInfo, + threadInfo, sidebarThreadInfo, reactions, disabled = false, @@ -130,7 +138,22 @@ repliesText, ]); - const onPressReactions = React.useCallback(() => { + const nextLocalID = useSelector(state => state.nextLocalID); + const localID = `${localIDPrefix}${nextLocalID}`; + + const sendReaction = useSendReaction( + messageInfo.id, + localID, + threadInfo.id, + reactions, + ); + + const onPressReaction = React.useCallback( + (reaction: string) => sendReaction(reaction), + [sendReaction], + ); + + const onLongPressReaction = React.useCallback(() => { navigate<'MessageReactionsModal'>({ name: MessageReactionsModalRouteName, params: { reactions }, @@ -164,7 +187,8 @@ return ( <GestureTouchableOpacity style={reactionStyle} - onPress={onPressReactions} + onPress={() => onPressReaction(reaction)} + onLongPress={onLongPressReaction} activeOpacity={0.7} key={reaction} > @@ -172,7 +196,13 @@ </GestureTouchableOpacity> ); }); - }, [onPressReactions, reactionStyle, reactions, styles.reaction]); + }, [ + onLongPressReaction, + onPressReaction, + reactionStyle, + reactions, + styles.reaction, + ]); const inlineEngagementPositionStyle = React.useMemo(() => { const styleResult = [styles.inlineEngagement]; @@ -365,6 +395,8 @@ <Animated.View style={inlineEngagementContainer}> <Animated.View style={inlineEngagementStyles}> <InlineEngagement + messageInfo={item.messageInfo} + threadInfo={item.threadInfo} sidebarThreadInfo={item.threadCreatedFromMessage} reactions={item.reactions} disabled diff --git a/native/chat/robotext-message.react.js b/native/chat/robotext-message.react.js --- a/native/chat/robotext-message.react.js +++ b/native/chat/robotext-message.react.js @@ -66,6 +66,8 @@ inlineEngagement = ( <View style={styles.sidebar}> <InlineEngagement + messageInfo={item.messageInfo} + threadInfo={item.threadInfo} sidebarThreadInfo={item.threadCreatedFromMessage} reactions={item.reactions} positioning="center"