Page MenuHomePhabricator
Files F3490391

D6302.id21227.diff
No OneTemporary
Actions

D6302.id21227.diff
View Options

diff --git a/web/modals/chat/message-reactions-modal.css b/web/modals/chat/message-reactions-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/message-reactions-modal.css
@@ -0,0 +1,16 @@
+div.modalContentContainer {
+ padding: 24px 32px 32px 32px;
+ color: var(--fg);
+ background-color: var(--modal-bg);
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ font-size: var(--l-font-18);
+ gap: 16px;
+}
+
+div.userRowContainer {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -0,0 +1,69 @@
+// @flow
+
+import _sortBy from 'lodash/fp/sortBy';
+import * as React from 'react';
+
+import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
+import { stringForUserExplicit } from 'lib/shared/user-utils';
+
+import Modal from '../modal.react';
+import css from './message-reactions-modal.css';
+
+type MessageReactionListInfo = {
+ +id: string,
+ +isViewer: boolean,
+ +reaction: string,
+ +username: string,
+};
+
+type Props = {
+ +onClose: () => void,
+ +reactions: $ReadOnlyMap<string, MessageReactionInfo>,
+};
+
+function MessageReactionsModal(props: Props): React.Node {
+ const { onClose, reactions } = props;
+
+ const reactionsList = React.useMemo(() => {
+ const result = [];
+
+ for (const [reaction, reactionInfo] of reactions) {
+ reactionInfo.users.forEach(user => {
+ result.push({
+ ...user,
+ username: stringForUserExplicit(user),
+ reaction,
+ });
+ });
+ }
+
+ const sortedResult = _sortBy(
+ ([
+ (reactionInfo: MessageReactionListInfo) => {
+ const numOfReactions = reactions.get(reactionInfo.reaction)?.users
+ .length;
+
+ return numOfReactions ? -numOfReactions : 0;
+ },
+ 'username',
+ ]: $ReadOnlyArray<
+ ((reactionInfo: MessageReactionListInfo) => mixed) | string,
+ >),
+ )(result);
+
+ return sortedResult.map(messageReactionUser => (
+ <div key={messageReactionUser.id} className={css.userRowContainer}>
+ <div>{messageReactionUser.username}</div>
+ <div>{messageReactionUser.reaction}</div>
+ </div>
+ ));
+ }, [reactions]);
+
+ return (
+ <Modal size="large" name="Reactions" onClose={onClose}>
+ <div className={css.modalContentContainer}>{reactionsList}</div>
+ </Modal>
+ );
+}
+
+export default MessageReactionsModal;

File Metadata

Mime Type
text/plain
Expires
Thu, Dec 19, 4:06 PM (20 h, 51 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2677921
Default Alt Text
D6302.id21227.diff (2 KB)

Event Timeline