Page MenuHomePhabricator
Files F3315219

D6424.diff
No OneTemporary
Actions

D6424.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
@@ -2,7 +2,9 @@
import invariant from 'invariant';
import _sortBy from 'lodash/fp/sortBy';
+import * as React from 'react';
+import { useENSNames } from '../hooks/ens-cache';
import type { MessageReactionInfo } from '../selectors/chat-selectors';
import type {
RobotextMessageInfo,
@@ -41,31 +43,34 @@
+username: string,
};
-function createMessageReactionsList(
+function useMessageReactionsList(
reactions: $ReadOnlyMap<string, MessageReactionInfo>,
): $ReadOnlyArray<MessageReactionListInfo> {
- const result = [];
-
- for (const [reaction, reactionInfo] of reactions) {
- reactionInfo.users.forEach(user => {
- result.push({
- ...user,
- username: stringForUserExplicit(user),
- reaction,
+ const withoutENSNames = React.useMemo(() => {
+ const result = [];
+
+ for (const [reaction, reactionInfo] of reactions) {
+ reactionInfo.users.forEach(user => {
+ result.push({
+ ...user,
+ username: stringForUserExplicit(user),
+ reaction,
+ });
});
- });
- }
-
- const sortByNumReactions = (reactionInfo: MessageReactionListInfo) => {
- const numOfReactions = reactions.get(reactionInfo.reaction)?.users.length;
- return numOfReactions ? -numOfReactions : 0;
- };
+ }
- return _sortBy(
- ([sortByNumReactions, 'username']: $ReadOnlyArray<
- ((reactionInfo: MessageReactionListInfo) => mixed) | string,
- >),
- )(result);
+ const sortByNumReactions = (reactionInfo: MessageReactionListInfo) => {
+ const numOfReactions = reactions.get(reactionInfo.reaction)?.users.length;
+ return numOfReactions ? -numOfReactions : 0;
+ };
+
+ return _sortBy(
+ ([sortByNumReactions, 'username']: $ReadOnlyArray<
+ ((reactionInfo: MessageReactionListInfo) => mixed) | string,
+ >),
+ )(result);
+ }, [reactions]);
+ return useENSNames<MessageReactionListInfo>(withoutENSNames);
}
function useCanCreateReactionFromMessage(
@@ -99,6 +104,6 @@
export {
stringForReactionList,
- createMessageReactionsList,
+ useMessageReactionsList,
useCanCreateReactionFromMessage,
};
diff --git a/native/chat/message-reactions-modal.react.js b/native/chat/message-reactions-modal.react.js
--- a/native/chat/message-reactions-modal.react.js
+++ b/native/chat/message-reactions-modal.react.js
@@ -6,7 +6,7 @@
import { View, Text, FlatList, TouchableHighlight } from 'react-native';
import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
-import { createMessageReactionsList } from 'lib/shared/reaction-utils';
+import { useMessageReactionsList } from 'lib/shared/reaction-utils';
import Modal from '../components/modal.react';
import type { RootNavigationProp } from '../navigation/root-navigator.react';
@@ -32,10 +32,7 @@
const close = React.useCallback(() => navigation.goBack(), [navigation]);
- const reactionsListData = React.useMemo(
- () => createMessageReactionsList(reactions),
- [reactions],
- );
+ const reactionsListData = useMessageReactionsList(reactions);
const renderItem = React.useCallback(
({ item }) => {
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
@@ -3,7 +3,7 @@
import * as React from 'react';
import type { MessageReactionInfo } from 'lib/selectors/chat-selectors';
-import { createMessageReactionsList } from 'lib/shared/reaction-utils';
+import { useMessageReactionsList } from 'lib/shared/reaction-utils';
import Modal from '../modal.react';
import css from './message-reactions-modal.css';
@@ -16,16 +16,18 @@
function MessageReactionsModal(props: Props): React.Node {
const { onClose, reactions } = props;
- const reactionsList = React.useMemo(() => {
- const messageReactionsList = createMessageReactionsList(reactions);
-
- return messageReactionsList.map(messageReactionUser => (
- <div key={messageReactionUser.id} className={css.userRowContainer}>
- <div>{messageReactionUser.username}</div>
- <div>{messageReactionUser.reaction}</div>
- </div>
- ));
- }, [reactions]);
+ const messageReactionsList = useMessageReactionsList(reactions);
+
+ const reactionsList = React.useMemo(
+ () =>
+ messageReactionsList.map(messageReactionUser => (
+ <div key={messageReactionUser.id} className={css.userRowContainer}>
+ <div>{messageReactionUser.username}</div>
+ <div>{messageReactionUser.reaction}</div>
+ </div>
+ )),
+ [messageReactionsList],
+ );
return (
<Modal size="large" name="Reactions" onClose={onClose}>

File Metadata

Mime Type
text/plain
Expires
Wed, Nov 20, 3:26 PM (21 h, 56 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2546553
Default Alt Text
D6424.diff (4 KB)

Event Timeline