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
+ ) {
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
@@ -4,6 +4,7 @@
import * as React from 'react';
import useInlineSidebarText from 'lib/hooks/inline-sidebar-text.react';
+import type { ReactionMessageInfo } from 'lib/types/message-types';
import type { ThreadInfo } from 'lib/types/thread-types';
import CommIcon from '../CommIcon.react';
@@ -12,7 +13,7 @@
type Props = {
+threadInfo: ?ThreadInfo,
- +reactions?: $ReadOnlyArray,
+ +reactions?: $ReadOnlyArray,
+positioning: 'left' | 'center' | 'right',
};
function InlineSidebar(props: Props): React.Node {
@@ -32,14 +33,13 @@
if (!reactions || reactions.length === 0) {
return null;
}
- const reactionsItems = reactions.map(reaction => {
- return (
-
- {reaction}
-
- );
- });
- return {reactionsItems}
;
+ let reactionText = reactions[0].reaction;
+ if (reactions.length > 1) {
+ reactionText += ` ${reactions.length}`;
+ }
+ const reactionItems = {reactionText}
;
+
+ return {reactionItems}
;
}, [reactions]);
const onClick = useOnClickThread(threadInfo);