Page MenuHomePhabricator
Files F3402516

D5814.id19337.diff
No OneTemporary
Actions

D5814.id19337.diff
View Options

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 = (
<div className={css.sidebarMarginBottom}>
<InlineSidebar
threadInfo={item.threadCreatedFromMessage}
+ reactions={item.reactions}
positioning={positioning}
/>
</div>
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<string>,
+ +reactions?: $ReadOnlyMap<string, MessageReactionInfo>,
+positioning: 'left' | 'center' | 'right',
};
function InlineSidebar(props: Props): React.Node {
@@ -29,17 +31,27 @@
]);
const reactionsList = React.useMemo(() => {
- if (!reactions || reactions.length === 0) {
+ if (!reactions || reactions.size === 0) {
return null;
}
- const reactionsItems = reactions.map(reaction => {
- return (
- <div key={reaction} className={css.reactions}>
- {reaction}
- </div>
- );
- });
- return <div className={css.reactionsContainer}>{reactionsItems}</div>;
+
+ let reactionText = '';
+ let index = 0;
+ for (const key of reactions.keys()) {
+ const reactionInfo = reactions.get(key);
+ invariant(reactionInfo, 'reactionInfo should be set');
+
+ if (index > 0) {
+ reactionText += ' ';
+ }
+ reactionText += key;
+ if (reactionInfo.users.size > 1) {
+ reactionText += ` ${reactionInfo.users.size}`;
+ }
+ index++;
+ }
+
+ return <div className={css.reactionsContainer}>{reactionText}</div>;
}, [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<Props> {
render() {
let inlineSidebar;
- if (this.props.item.threadCreatedFromMessage) {
+ if (
+ this.props.item.threadCreatedFromMessage ||
+ this.props.item.reactions.size > 0
+ ) {
inlineSidebar = (
<div className={css.sidebarMarginTop}>
<InlineSidebar
threadInfo={this.props.item.threadCreatedFromMessage}
+ reactions={this.props.item.reactions}
positioning="center"
/>
</div>

File Metadata

Mime Type
text/plain
Expires
Tue, Dec 3, 5:06 PM (3 h, 17 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2612471
Default Alt Text
D5814.id19337.diff (3 KB)

Event Timeline