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 @@ -9,14 +9,11 @@ updateRelationshipsActionTypes, updateRelationships, } from 'lib/actions/relationship-actions.js'; -import { - searchUsersActionTypes, - searchUsers, -} from 'lib/actions/user-actions.js'; import { useENSNames } from 'lib/hooks/ens-cache.js'; import { registerFetchKey } from 'lib/reducers/loading-reducer.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, relationshipActions, @@ -93,42 +90,44 @@ +route: NavigationRoute<'FriendList' | 'BlockList'>, }; function RelationshipList(props: Props): React.Node { - const callSearchUsers = useServerCall(searchUsers); const userInfos = useSelector(state => state.userStore.userInfos); - const searchUsersOnServer = React.useCallback( - async (usernamePrefix: string) => { - if (usernamePrefix.length === 0) { - return []; - } - - const userInfosResult = await callSearchUsers(usernamePrefix); - return userInfosResult.userInfos; - }, - [callSearchUsers], - ); const [searchInputText, setSearchInputText] = React.useState(''); const [userStoreSearchResults, setUserStoreSearchResults] = React.useState< $ReadOnlySet, >(new Set()); - const [serverSearchResults, setServerSearchResults] = React.useState< - $ReadOnlyArray, - >([]); const { route } = props; const routeName = route.name; - const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector); - const onChangeSearchText = React.useCallback( - async (searchText: string) => { - setSearchInputText(searchText); - - const excludeStatuses = { + const excludeStatuses = React.useMemo( + () => + ({ [FriendListRouteName]: [ userRelationshipStatus.BLOCKED_VIEWER, userRelationshipStatus.BOTH_BLOCKED, ], [BlockListRouteName]: [], - }[routeName]; + }[routeName]), + [routeName], + ); + + const serverSearchResults = useSearchUsers(searchInputText); + const filteredServerSearchResults = React.useMemo( + () => + serverSearchResults.filter(searchUserInfo => { + const userInfo = userInfos[searchUserInfo.id]; + return ( + !userInfo || !excludeStatuses.includes(userInfo.relationshipStatus) + ); + }), + [serverSearchResults, userInfos, excludeStatuses], + ); + + const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector); + const onChangeSearchText = React.useCallback( + async (searchText: string) => { + setSearchInputText(searchText); + const results = userStoreSearchIndex .getSearchResults(searchText) .filter(userID => { @@ -136,19 +135,8 @@ return !excludeStatuses.includes(relationship); }); setUserStoreSearchResults(new Set(results)); - - const searchResultsFromServer = await searchUsersOnServer(searchText); - const filteredServerSearchResults = searchResultsFromServer.filter( - searchUserInfo => { - const userInfo = userInfos[searchUserInfo.id]; - return ( - !userInfo || !excludeStatuses.includes(userInfo.relationshipStatus) - ); - }, - ); - setServerSearchResults(filteredServerSearchResults); }, - [routeName, userStoreSearchIndex, userInfos, searchUsersOnServer], + [userStoreSearchIndex, userInfos, excludeStatuses], ); const overlayContext = React.useContext(OverlayContext); @@ -336,7 +324,7 @@ } const mergedUserInfos: { [id: string]: AccountUserInfo } = {}; - for (const userInfo of serverSearchResults) { + for (const userInfo of filteredServerSearchResults) { mergedUserInfos[userInfo.id] = userInfo; } for (const id of userStoreSearchResults) { @@ -380,7 +368,7 @@ routeName, viewerID, currentTags, - serverSearchResults, + filteredServerSearchResults, userStoreSearchResults, userInfos, ]); @@ -489,7 +477,6 @@ }, }; -registerFetchKey(searchUsersActionTypes); registerFetchKey(updateRelationshipsActionTypes); const MemoizedRelationshipList: React.ComponentType = diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js --- a/web/settings/relationship/add-users-list.react.js +++ b/web/settings/relationship/add-users-list.react.js @@ -6,10 +6,10 @@ updateRelationships, updateRelationshipsActionTypes, } from 'lib/actions/relationship-actions.js'; -import { searchUsers } from 'lib/actions/user-actions.js'; import { useENSNames } from 'lib/hooks/ens-cache.js'; import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js'; import { userStoreSearchIndex as userStoreSearchIndexSelector } from 'lib/selectors/user-selectors.js'; +import { useSearchUsers } from 'lib/shared/search-utils.js'; import type { UserRelationshipStatus, RelationshipAction, @@ -62,20 +62,7 @@ ); }, [searchText, userStoreSearchIndex]); - const [serverSearchResults, setServerSearchResults] = React.useState< - $ReadOnlyArray, - >([]); - const callSearchUsers = useServerCall(searchUsers); - React.useEffect(() => { - (async () => { - if (searchText.length === 0) { - setServerSearchResults([]); - } else { - const { userInfos } = await callSearchUsers(searchText); - setServerSearchResults(userInfos); - } - })(); - }, [callSearchUsers, searchText]); + const serverSearchResults = useSearchUsers(searchText); const searchTextPresent = searchText.length > 0; const userInfos = useSelector(state => state.userStore.userInfos);