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 @@ -26,60 +26,62 @@ tooltipPositions.RIGHT_BOTTOM, ]; -type BaseProps = { +type Props = { +item: RobotextChatMessageInfoItem, +threadInfo: ThreadInfo, }; -type Props = { - ...BaseProps, - +onMouseLeave: ?() => mixed, - +onMouseEnter: (event: SyntheticEvent) => mixed, -}; -class RobotextMessage extends React.PureComponent { - render() { - let inlineEngagement; - if ( - this.props.item.threadCreatedFromMessage || - this.props.item.reactions.size > 0 - ) { - inlineEngagement = ( -
- -
- ); - } - - return ( -
-
- {this.linkedRobotext()} -
- {inlineEngagement} +function RobotextMessage(props: Props): React.Node { + let inlineEngagement; + const { item } = props; + const { threadCreatedFromMessage, reactions } = item; + if (threadCreatedFromMessage || reactions.size > 0) { + inlineEngagement = ( +
+
); } - linkedRobotext() { - const { item } = this.props; - const { robotext } = item; - const { threadID } = item.messageInfo; + const { messageInfo, robotext } = item; + const { threadID } = messageInfo; + const textParts = React.useMemo(() => { return entityTextToReact(robotext, threadID, { + // eslint-disable-next-line react/display-name renderText: ({ text }) => ( {text} ), + // eslint-disable-next-line react/display-name renderThread: ({ id, name }) => , + // eslint-disable-next-line react/display-name renderColor: ({ hex }) => , }); - } + }, [robotext, threadID]); + + const { threadInfo } = props; + const { onMouseEnter, onMouseLeave } = useMessageTooltip({ + item, + threadInfo, + availablePositions: availableTooltipPositionsForRobotext, + }); + + return ( +
+
+ {textParts} +
+ {inlineEngagement} +
+ ); } + type BaseInnerThreadEntityProps = { +id: string, +name: string, @@ -126,24 +128,8 @@ return {props.color}; } -const ConnectedRobotextMessage: React.ComponentType = React.memo( - function ConnectedRobotextMessage(props) { - const { item, threadInfo } = props; - - const { onMouseLeave, onMouseEnter } = useMessageTooltip({ - item, - threadInfo, - availablePositions: availableTooltipPositionsForRobotext, - }); - - return ( - - ); - }, +const MemoizedRobotextMessage: React.ComponentType = React.memo( + RobotextMessage, ); -export default ConnectedRobotextMessage; +export default MemoizedRobotextMessage;