Page MenuHomePhorge
Files F33037605

D9485.1768410828.diff
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

D9485.1768410828.diff
View Options

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,37 @@
+// @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;
+
+ const messageReactionsListItem = React.useMemo(
+ () => (
+ <div className={css.userRowContainer}>
+ <div className={css.userInfoContainer}>
+ <UserAvatar size="S" userID={messageReactionUser.id} />
+ <div className={css.username}>{messageReactionUser.username}</div>
+ </div>
+ <div>{messageReactionUser.reaction}</div>
+ </div>
+ ),
+ [
+ messageReactionUser.id,
+ messageReactionUser.reaction,
+ messageReactionUser.username,
+ ],
+ );
+
+ return messageReactionsListItem;
+}
+
+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 => (
- <div key={messageReactionUser.id} className={css.userRowContainer}>
- <div className={css.userInfoContainer}>
- <UserAvatar size="S" userID={messageReactionUser.id} />
- <div className={css.username}>{messageReactionUser.username}</div>
- </div>
- <div>{messageReactionUser.reaction}</div>
- </div>
+ <MessageReactionsListItem
+ key={messageReactionUser.id}
+ messageReactionUser={messageReactionUser}
+ />
)),
[messageReactionsList],
);

File Metadata

Mime Type
text/plain
Expires
Wed, Jan 14, 5:13 PM (8 h, 54 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5932505
Default Alt Text
D9485.1768410828.diff (2 KB)

Event Timeline