diff --git a/lib/shared/reaction-utils.js b/lib/shared/reaction-utils.js
--- a/lib/shared/reaction-utils.js
+++ b/lib/shared/reaction-utils.js
@@ -34,7 +34,7 @@
}, [reactions]);
}
-type MessageReactionListInfo = {
+export type MessageReactionListInfo = {
+id: string,
+isViewer: boolean,
+reaction: string,
diff --git a/web/modals/chat/message-reactions-list-item.react.js b/web/modals/chat/message-reactions-list-item.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/message-reactions-list-item.react.js
@@ -0,0 +1,28 @@
+// @flow
+
+import * as React from 'react';
+
+import { type MessageReactionListInfo } from 'lib/shared/reaction-utils.js';
+
+import css from './message-reactions-modal.css';
+import UserAvatar from '../../avatars/user-avatar.react.js';
+
+type Props = {
+ +messageReactionUser: MessageReactionListInfo,
+};
+
+function MessageReactionsListItem(props: Props): React.Node {
+ const { messageReactionUser } = props;
+
+ return (
+
+
+
+
{messageReactionUser.username}
+
+
{messageReactionUser.reaction}
+
+ );
+}
+
+export default MessageReactionsListItem;
diff --git a/web/modals/chat/message-reactions-modal.react.js b/web/modals/chat/message-reactions-modal.react.js
--- a/web/modals/chat/message-reactions-modal.react.js
+++ b/web/modals/chat/message-reactions-modal.react.js
@@ -5,8 +5,8 @@
import type { ReactionInfo } from 'lib/selectors/chat-selectors.js';
import { useMessageReactionsList } from 'lib/shared/reaction-utils.js';
+import MessageReactionsListItem from './message-reactions-list-item.react.js';
import css from './message-reactions-modal.css';
-import UserAvatar from '../../avatars/user-avatar.react.js';
import Modal from '../modal.react.js';
type Props = {
@@ -22,13 +22,10 @@
const reactionsList = React.useMemo(
() =>
messageReactionsList.map(messageReactionUser => (
-
-
-
-
{messageReactionUser.username}
-
-
{messageReactionUser.reaction}
-
+
)),
[messageReactionsList],
);