diff --git a/lib/shared/chat-message-item-utils.js b/lib/shared/chat-message-item-utils.js --- a/lib/shared/chat-message-item-utils.js +++ b/lib/shared/chat-message-item-utils.js @@ -89,6 +89,7 @@ +threadCreatedFromMessage: ?ThreadInfo, +reactions: ReactionInfo, +hasBeenEdited?: ?boolean, + +deleted?: ?boolean, ... }; function chatMessageItemHasEngagement( @@ -97,9 +98,8 @@ ): boolean { const label = getMessageLabel(item.hasBeenEdited, threadID); return ( - !!label || !!item.threadCreatedFromMessage || - Object.keys(item.reactions).length > 0 + (!item.deleted && (!!label || Object.keys(item.reactions).length > 0)) ); } diff --git a/native/chat/chat-item-height-measurer.react.js b/native/chat/chat-item-height-measurer.react.js --- a/native/chat/chat-item-height-measurer.react.js +++ b/native/chat/chat-item-height-measurer.react.js @@ -108,6 +108,7 @@ label, threadCreatedFromMessage, reactions, + false, ); } else if (item.robotext) { return dummyNodeForRobotextMessageHeightMeasurement( @@ -123,6 +124,7 @@ return dummyNodeForInlineEngagementHeightMeasurement( threadCreatedFromMessage, reactions, + false, ); } invariant( 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 @@ -288,6 +288,7 @@ reactions={item.reactions} positioning={positioning} label={label} + deleted={item.deleted} /> ); }, [label, isViewer, item]); 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 @@ -34,12 +34,14 @@ function dummyNodeForInlineEngagementHeightMeasurement( sidebarInfo: ?ThreadInfo, reactions: ReactionInfo, + deleted: boolean, ): React.Element<typeof View> { return ( <View> <DummyInlineEngagementNode sidebarInfo={sidebarInfo} reactions={reactions} + deleted={deleted} /> </View> ); @@ -50,14 +52,15 @@ +editedLabel?: ?string, +sidebarInfo: ?ThreadInfo, +reactions: ReactionInfo, + +deleted: boolean, }; function DummyInlineEngagementNode( props: DummyInlineEngagementNodeProps, ): React.Node { - const { editedLabel, sidebarInfo, reactions, ...rest } = props; + const { editedLabel, sidebarInfo, reactions, deleted, ...rest } = props; const dummyEditedLabel = React.useMemo(() => { - if (!editedLabel) { + if (!editedLabel || deleted) { return null; } @@ -70,7 +73,7 @@ </Text> </View> ); - }, [editedLabel]); + }, [deleted, editedLabel]); const dummySidebarItem = React.useMemo(() => { if (!sidebarInfo) { @@ -86,7 +89,7 @@ }, [sidebarInfo]); const dummyReactionsList = React.useMemo(() => { - if (Object.keys(reactions).length === 0) { + if (Object.keys(reactions).length === 0 || deleted) { return null; } @@ -106,7 +109,7 @@ </View> ); }); - }, [reactions]); + }, [deleted, reactions]); const dummyContainerStyle = React.useMemo( () => [unboundStyles.inlineEngagement, unboundStyles.dummyInlineEngagement], @@ -134,6 +137,7 @@ +disabled?: boolean, +positioning?: 'left' | 'right' | 'center', +label?: ?string, + +deleted: boolean, }; function InlineEngagement(props: Props): React.Node { const { @@ -144,6 +148,7 @@ disabled = false, positioning, label, + deleted, } = props; const isLeft = positioning === 'left'; @@ -173,7 +178,7 @@ ]); const editedLabel = React.useMemo(() => { - if (!label) { + if (!label || deleted) { return null; } @@ -182,7 +187,7 @@ <Text style={editedLabelStyle}>{label}</Text> </View> ); - }, [editedLabelStyle, label]); + }, [deleted, editedLabelStyle, label]); const unreadStyle = sidebarThreadInfo?.currentUser.unread ? styles.unread @@ -282,7 +287,7 @@ ]); const reactionList = React.useMemo(() => { - if (Object.keys(reactions).length === 0) { + if (Object.keys(reactions).length === 0 || deleted) { return null; } @@ -309,6 +314,7 @@ ); }); }, [ + deleted, onLongPressReaction, onPressReaction, reactionStyle, @@ -533,6 +539,7 @@ reactions={item.reactions} positioning={positioning} disabled + deleted={item.deleted} /> </Animated.View> </Animated.View> diff --git a/native/chat/inner-robotext-message.react.js b/native/chat/inner-robotext-message.react.js --- a/native/chat/inner-robotext-message.react.js +++ b/native/chat/inner-robotext-message.react.js @@ -39,6 +39,7 @@ <DummyInlineEngagementNode sidebarInfo={sidebarInfo} reactions={reactions} + deleted={false} /> </View> ); diff --git a/native/chat/inner-text-message.react.js b/native/chat/inner-text-message.react.js --- a/native/chat/inner-text-message.react.js +++ b/native/chat/inner-text-message.react.js @@ -31,15 +31,16 @@ editedLabel?: ?string, sidebarInfo: ?ThreadInfo, reactions: ReactionInfo, - withoutMarkdown?: ?boolean, + deleted: boolean, ): React.Element<typeof View> { return ( <View> - <DummyTextNode withoutMarkdown={!!withoutMarkdown}>{text}</DummyTextNode> + <DummyTextNode withoutMarkdown={deleted}>{text}</DummyTextNode> <DummyInlineEngagementNode editedLabel={editedLabel} sidebarInfo={sidebarInfo} reactions={reactions} + deleted={deleted} /> </View> ); 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 @@ -80,6 +80,7 @@ sidebarThreadInfo={item.threadCreatedFromMessage} reactions={item.reactions} positioning="center" + deleted={false} /> </View> ); diff --git a/web/chat/composed-message.react.js b/web/chat/composed-message.react.js --- a/web/chat/composed-message.react.js +++ b/web/chat/composed-message.react.js @@ -143,6 +143,7 @@ reactions={item.reactions} positioning={positioning} label={label} + deleted={item.deleted} /> </div> ); diff --git a/web/chat/inline-engagement.react.js b/web/chat/inline-engagement.react.js --- a/web/chat/inline-engagement.react.js +++ b/web/chat/inline-engagement.react.js @@ -21,6 +21,7 @@ +reactions: ReactionInfo, +positioning: 'left' | 'center' | 'right', +label?: ?string, + +deleted: boolean, }; function InlineEngagement(props: Props): React.Node { const { @@ -30,6 +31,7 @@ reactions, positioning, label, + deleted, } = props; const { popModal } = useModalContext(); @@ -42,7 +44,7 @@ [css.messageLabelRight]: !isLeft, }); const editedLabel = React.useMemo(() => { - if (!label) { + if (!label || deleted) { return null; } return ( @@ -50,7 +52,7 @@ <span>{label}</span> </div> ); - }, [label, labelClasses]); + }, [deleted, label, labelClasses]); const onClickSidebarInner = useOnClickThread(sidebarThreadInfo); @@ -78,7 +80,7 @@ }, [sidebarThreadInfo, repliesText, onClickSidebar]); const reactionsList = React.useMemo(() => { - if (Object.keys(reactions).length === 0) { + if (Object.keys(reactions).length === 0 || deleted) { return null; } @@ -91,7 +93,7 @@ reactions={reactions} /> )); - }, [reactions, messageInfo.id, threadInfo]); + }, [reactions, deleted, messageInfo.id, threadInfo]); const containerClasses = classNames([ css.inlineEngagementContainer, diff --git a/web/chat/robotext-message.react.js b/web/chat/robotext-message.react.js --- a/web/chat/robotext-message.react.js +++ b/web/chat/robotext-message.react.js @@ -55,6 +55,7 @@ sidebarThreadInfo={threadCreatedFromMessage} reactions={reactions} positioning="center" + deleted={false} /> </div> );