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 @@ -121,12 +121,16 @@ } let inlineSidebar = null; - if (this.props.containsInlineSidebar && item.threadCreatedFromMessage) { + if ( + (this.props.containsInlineSidebar && item.threadCreatedFromMessage) || + item.reactions.size > 0 + ) { const positioning = isViewer ? 'right' : 'left'; inlineSidebar = (
diff --git a/web/chat/inline-sidebar.react.js b/web/chat/inline-sidebar.react.js --- a/web/chat/inline-sidebar.react.js +++ b/web/chat/inline-sidebar.react.js @@ -1,9 +1,11 @@ // @flow import classNames from 'classnames'; +import invariant from 'invariant'; import * as React from 'react'; import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react'; +import type { MessageReactionInfo } from 'lib/selectors/chat-selectors'; import type { ThreadInfo } from 'lib/types/thread-types'; import CommIcon from '../CommIcon.react'; @@ -12,7 +14,7 @@ type Props = { +threadInfo: ?ThreadInfo, - +reactions?: $ReadOnlyArray, + +reactions?: Map, +positioning: 'left' | 'center' | 'right', }; function InlineSidebar(props: Props): React.Node { @@ -29,17 +31,24 @@ ]); const reactionsList = React.useMemo(() => { - if (!reactions || reactions.length === 0) { + if (!reactions) { return null; } - const reactionsItems = reactions.map(reaction => { - return ( -
- {reaction} -
- ); - }); - return
{reactionsItems}
; + + let reactionText = ''; + for (const key of reactions.keys()) { + const reactionInfo = reactions.get(key); + invariant(reactionInfo, 'reactionInfo should be set'); + + reactionText += key; + if (reactionInfo.users.size > 1) { + reactionText += ` ${reactionInfo.users.size}`; + } + } + + const reactionItems =
{reactionText}
; + + return
{reactionItems}
; }, [reactions]); const onClick = useOnClickThread(threadInfo); 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 @@ -38,11 +38,15 @@ class RobotextMessage extends React.PureComponent { render() { let inlineSidebar; - if (this.props.item.threadCreatedFromMessage) { + if ( + this.props.item.threadCreatedFromMessage || + this.props.item.reactions.size > 0 + ) { inlineSidebar = (