diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js --- a/web/modals/threads/members/add-members-modal.react.js +++ b/web/modals/threads/members/add-members-modal.react.js @@ -6,6 +6,7 @@ changeThreadSettingsActionTypes, changeThreadSettings, } from 'lib/actions/thread-actions'; +import { useENSNames } from 'lib/hooks/ens-cache'; import { threadInfoSelector } from 'lib/selectors/thread-selectors'; import { userSearchIndexForPotentialMembers, @@ -77,6 +78,7 @@ userSearchIndex, ], ); + const userSearchResultsWithENSNames = useENSNames(userSearchResults); const onSwitchUser = React.useCallback( userID => @@ -112,35 +114,39 @@ threadID, ]); - const pendingUsersWithNames = React.useMemo( + const pendingUserInfos = React.useMemo( () => Array.from(pendingUsersToAdd) - .map(userID => [userID, otherUserInfos[userID].username]) - .sort((a, b) => a[1].localeCompare(b[1])), + .map(userID => ({ + id: userID, + username: otherUserInfos[userID].username, + })) + .sort((a, b) => a.username.localeCompare(b.username)), [otherUserInfos, pendingUsersToAdd], ); + const pendingUserInfosWithENSNames = useENSNames(pendingUserInfos); const labelItems = React.useMemo(() => { - if (!pendingUsersWithNames.length) { + if (!pendingUserInfosWithENSNames.length) { return null; } return (
- {pendingUsersWithNames.map(([userID, username]) => ( -
); - }, [onSwitchUser, pendingUsersWithNames]); + }, [onSwitchUser, pendingUserInfosWithENSNames]); return (
{labelItems}