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 @@ -11,8 +11,8 @@ } from 'lib/actions/relationship-actions.js'; import { useENSNames } from 'lib/hooks/ens-cache.js'; import { registerFetchKey } from 'lib/reducers/loading-reducer.js'; +import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js'; import { userRelationshipsSelector } from 'lib/selectors/relationship-selectors.js'; -import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js'; import { useSearchUsers } from 'lib/shared/search-utils.js'; import { userRelationshipStatus, @@ -26,6 +26,7 @@ useServerCall, useDispatchActionPromise, } from 'lib/utils/action-utils.js'; +import { values } from 'lib/utils/objects.js'; import type { ProfileNavigationProp } from './profile.react.js'; import RelationshipListItem from './relationship-list-item.react.js'; @@ -90,13 +91,6 @@ +route: NavigationRoute<'FriendList' | 'BlockList'>, }; function RelationshipList(props: Props): React.Node { - const userInfos = useSelector(state => state.userStore.userInfos); - - const [searchInputText, setSearchInputText] = React.useState(''); - const [userStoreSearchResults, setUserStoreSearchResults] = React.useState< - $ReadOnlySet, - >(new Set()); - const { route } = props; const routeName = route.name; const excludeStatuses = React.useMemo( @@ -111,6 +105,21 @@ [routeName], ); + const userInfos = useSelector(state => state.userStore.userInfos); + const userInfosArray = React.useMemo( + () => + values(userInfos).filter(userInfo => { + const relationship = userInfo.relationshipStatus; + return !excludeStatuses.includes(relationship); + }), + [userInfos, excludeStatuses], + ); + + const [searchInputText, setSearchInputText] = React.useState(''); + const [userStoreSearchResults, setUserStoreSearchResults] = React.useState< + $ReadOnlySet, + >(new Set()); + const serverSearchResults = useSearchUsers(searchInputText); const filteredServerSearchResults = React.useMemo( () => @@ -123,20 +132,15 @@ [serverSearchResults, userInfos, excludeStatuses], ); - const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector); + const userStoreSearchIndex = useUserSearchIndex(userInfosArray); const onChangeSearchText = React.useCallback( async (searchText: string) => { setSearchInputText(searchText); - const results = userStoreSearchIndex - .getSearchResults(searchText) - .filter(userID => { - const relationship = userInfos[userID].relationshipStatus; - return !excludeStatuses.includes(relationship); - }); + const results = userStoreSearchIndex.getSearchResults(searchText); setUserStoreSearchResults(new Set(results)); }, - [userStoreSearchIndex, userInfos, excludeStatuses], + [userStoreSearchIndex], ); const overlayContext = React.useContext(OverlayContext);