diff --git a/native/profile/relationship-list.react.js b/native/profile/relationship-list.react.js --- a/native/profile/relationship-list.react.js +++ b/native/profile/relationship-list.react.js @@ -10,6 +10,7 @@ updateRelationships, } from 'lib/actions/relationship-actions'; import { searchUsersActionTypes, searchUsers } from 'lib/actions/user-actions'; +import { useENSNames } from 'lib/hooks/ens-cache'; import { registerFetchKey } from 'lib/reducers/loading-reducer'; import { userRelationshipsSelector } from 'lib/selectors/relationship-selectors'; import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors'; @@ -320,57 +321,66 @@ const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); - const listData = React.useMemo(() => { - const defaultUsers = { - [FriendListRouteName]: relationships.friends, - [BlockListRouteName]: relationships.blocked, - }[routeName]; + const usersWithoutENSNames = React.useMemo(() => { + if (searchInputText === '') { + return { + [FriendListRouteName]: relationships.friends, + [BlockListRouteName]: relationships.blocked, + }[routeName]; + } + + const mergedUserInfos: { [id: string]: AccountUserInfo } = {}; + for (const userInfo of serverSearchResults) { + mergedUserInfos[userInfo.id] = userInfo; + } + for (const id of userStoreSearchResults) { + const { username, relationshipStatus } = userInfos[id]; + if (username) { + mergedUserInfos[id] = { id, username, relationshipStatus }; + } + } const excludeUserIDsArray = currentTags .map(userInfo => userInfo.id) .concat(viewerID || []); - const excludeUserIDs = new Set(excludeUserIDsArray); - let displayUsers = defaultUsers; - - if (searchInputText !== '') { - const mergedUserInfos: { [id: string]: AccountUserInfo } = {}; - for (const userInfo of serverSearchResults) { - mergedUserInfos[userInfo.id] = userInfo; - } - for (const id of userStoreSearchResults) { - const { username, relationshipStatus } = userInfos[id]; - if (username) { - mergedUserInfos[id] = { id, username, relationshipStatus }; - } + const sortToEnd = []; + const userSearchResults = []; + const sortRelationshipTypesToEnd = { + [FriendListRouteName]: [userRelationshipStatus.FRIEND], + [BlockListRouteName]: [ + userRelationshipStatus.BLOCKED_BY_VIEWER, + userRelationshipStatus.BOTH_BLOCKED, + ], + }[routeName]; + for (const userID in mergedUserInfos) { + if (excludeUserIDs.has(userID)) { + continue; } - const sortToEnd = []; - const userSearchResults = []; - const sortRelationshipTypesToEnd = { - [FriendListRouteName]: [userRelationshipStatus.FRIEND], - [BlockListRouteName]: [ - userRelationshipStatus.BLOCKED_BY_VIEWER, - userRelationshipStatus.BOTH_BLOCKED, - ], - }[routeName]; - for (const userID in mergedUserInfos) { - if (excludeUserIDs.has(userID)) { - continue; - } - - const userInfo = mergedUserInfos[userID]; - if (sortRelationshipTypesToEnd.includes(userInfo.relationshipStatus)) { - sortToEnd.push(userInfo); - } else { - userSearchResults.push(userInfo); - } + const userInfo = mergedUserInfos[userID]; + if (sortRelationshipTypesToEnd.includes(userInfo.relationshipStatus)) { + sortToEnd.push(userInfo); + } else { + userSearchResults.push(userInfo); } - - displayUsers = userSearchResults.concat(sortToEnd); } + return userSearchResults.concat(sortToEnd); + }, [ + searchInputText, + relationships, + routeName, + viewerID, + currentTags, + serverSearchResults, + userStoreSearchResults, + userInfos, + ]); + + const displayUsers = useENSNames(usersWithoutENSNames); + const listData = React.useMemo(() => { let emptyItem; if (displayUsers.length === 0 && searchInputText === '') { emptyItem = { type: 'empty', because: 'no-relationships' }; @@ -390,26 +400,17 @@ .concat(emptyItem ? [] : { type: 'header' }) .concat(mappedUsers) .concat(emptyItem ? [] : { type: 'footer' }); - }, [ - routeName, - relationships, - verticalBounds, - searchInputText, - serverSearchResults, - userStoreSearchResults, - userInfos, - viewerID, - currentTags, - ]); + }, [displayUsers, verticalBounds, searchInputText]); const indicatorStyle = useIndicatorStyle(); + const currentTagsWithENSNames = useENSNames(currentTags); return ( Search: