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,49 @@ +// @flow + +import * as React from 'react'; + +import type { MessageReactionInfo } from 'lib/selectors/chat-selectors'; + +import Modal from '../modal.react'; +import css from './message-reactions-modal.css'; + +type Props = { + +onClose: () => void, + +reactions: $ReadOnlyMap, +}; + +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, reaction })); + } + + result.sort((a, b) => { + if (a.id < b.id) { + return 1; + } else if (a.id > b.id) { + return -1; + } + return 0; + }); + + return result.map(user => ( +
+
{user.username}
+
{user.reaction}
+
+ )); + }, [reactions]); + + return ( + +
{reactionsList}
+
+ ); +} + +export default MessageReactionsModal;