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 @@ -14,11 +14,12 @@ import { assertComposableMessageType } from 'lib/types/message-types'; import { type ThreadInfo } from 'lib/types/thread-types'; -import { type InputState, InputStateContext } from '../input/input-state'; +import { InputStateContext } from '../input/input-state'; import css from './chat-message-list.css'; import FailedSend from './failed-send.react'; import { InlineSidebar } from './inline-sidebar.react'; import MessageTooltip from './message-tooltip.react'; +import type { MessageReplyProps } from './message-tooltip.react'; import { type OnMessagePositionWithContainerInfo, type MessagePositionInfo, @@ -42,18 +43,15 @@ messagePositionInfo: MessagePositionInfo, ) => void, +mouseOverMessagePosition?: ?OnMessagePositionWithContainerInfo, - +canReply: boolean, +children: React.Node, +fixedWidth?: boolean, +borderRadius: number, }; -type BaseConfig = React.Config; type Props = { ...BaseProps, // Redux state +sidebarExistsOrCanBeCreated: boolean, - // withInputState - +inputState: ?InputState, + +messageReplyProps: MessageReplyProps, }; class ComposedMessage extends React.PureComponent { static defaultProps: { +borderRadius: number } = { @@ -122,21 +120,19 @@ if ( this.props.mouseOverMessagePosition && this.props.mouseOverMessagePosition.item.messageInfo.id === id && - (this.props.sidebarExistsOrCanBeCreated || this.props.canReply) + (this.props.sidebarExistsOrCanBeCreated || + this.props.messageReplyProps.canReply) ) { const availableTooltipPositions = isViewer ? availableTooltipPositionsForViewerMessage : availableTooltipPositionsForNonViewerMessage; - messageTooltip = ( ); } @@ -211,22 +207,35 @@ }; } +type ConnectedComponentProps = { ...BaseProps, +canReply: boolean }; type ConnectedConfig = React.Config< - BaseProps, + ConnectedComponentProps, typeof ComposedMessage.defaultProps, >; -const ConnectedComposedMessage: React.ComponentType = React.memo( +const ConnectedComposedMessage: React.ComponentType = React.memo( function ConnectedComposedMessage(props) { + const { canReply, ...composedMessageProps } = props; const sidebarExistsOrCanBeCreated = useSidebarExistsOrCanBeCreated( props.threadInfo, props.item, ); const inputState = React.useContext(InputStateContext); + const messageReplyProps = React.useMemo(() => { + if (canReply) { + return { + canReply, + inputState, + setMouseOverMessagePosition: props.setMouseOverMessagePosition, + }; + } + return { canReply }; + }, [inputState, canReply, props.setMouseOverMessagePosition]); + return ( ); }, diff --git a/web/chat/message-tooltip.react.js b/web/chat/message-tooltip.react.js --- a/web/chat/message-tooltip.react.js +++ b/web/chat/message-tooltip.react.js @@ -36,26 +36,30 @@ type TooltipType = 'sidebar' | 'reply'; +export type MessageReplyProps = + | { +canReply: false } + | { + +canReply: true, + +inputState: ?InputState, + +setMouseOverMessagePosition: ( + messagePositionInfo: MessagePositionInfo, + ) => void, + }; + type MessageTooltipProps = { +threadInfo: ThreadInfo, +item: ChatMessageInfoItem, +availableTooltipPositions: $ReadOnlyArray, - +setMouseOverMessagePosition?: ( - messagePositionInfo: MessagePositionInfo, - ) => void, + +messageReplyProps: MessageReplyProps, +mouseOverMessagePosition: OnMessagePositionWithContainerInfo, - +canReply?: boolean, - +inputState?: ?InputState, }; function MessageTooltip(props: MessageTooltipProps): React.Node { const { threadInfo, item, availableTooltipPositions, - setMouseOverMessagePosition, mouseOverMessagePosition, - canReply, - inputState, + messageReplyProps, } = props; const { containerPosition } = mouseOverMessagePosition; @@ -114,12 +118,15 @@ [onPendingSidebarOpen, onThreadOpen, threadCreatedFromMessage], ); + const setMouseOverMessagePosition = messageReplyProps.canReply + ? messageReplyProps.setMouseOverMessagePosition + : null; + const onReplyButtonClick = React.useCallback(() => { - invariant( - setMouseOverMessagePosition, - 'setMouseOverMessagePosition should be set if replyButton exists', - ); - setMouseOverMessagePosition({ type: 'off', item: item }); + setMouseOverMessagePosition?.({ + type: 'off', + item: item, + }); }, [item, setMouseOverMessagePosition]); let tooltipText = ''; @@ -146,11 +153,10 @@ } let replyButton; - if (canReply) { - invariant(inputState, 'inputState must be set if replyButton exists'); + if (messageReplyProps.canReply) { invariant( - mouseOverMessagePosition, - 'mouseOverMessagePosition must be set if replyButton exists', + messageReplyProps.inputState, + 'inputState must be set if replyButton exists', ); replyButton = (
{activeTooltip === 'reply' ? tooltipMenu : null}
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 @@ -29,6 +29,7 @@ tooltipPositions.RIGHT, tooltipPositions.LEFT, ]; +const cannotReply = { canReply: false }; type BaseProps = { +item: RobotextChatMessageInfoItem, @@ -71,6 +72,7 @@ item={item} mouseOverMessagePosition={this.props.mouseOverMessagePosition} availableTooltipPositions={availableTooltipPositionsForRobotext} + messageReplyProps={cannotReply} /> ); }