diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js index e8d12d9e8..d8fbdc293 100644 --- a/web/settings/relationship/add-users-list.react.js +++ b/web/settings/relationship/add-users-list.react.js @@ -1,251 +1,254 @@ // @flow import * as React from 'react'; import { updateRelationships, updateRelationshipsActionTypes, } from 'lib/actions/relationship-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 { useUserSearchIndex } from 'lib/selectors/nav-selectors.js'; import { useSearchUsers } from 'lib/shared/search-utils.js'; import type { UserRelationshipStatus, RelationshipAction, } from 'lib/types/relationship-types.js'; import type { GlobalAccountUserInfo, AccountUserInfo, } from 'lib/types/user-types.js'; import { useDispatchActionPromise, useServerCall, } from 'lib/utils/action-utils.js'; +import { values } from 'lib/utils/objects.js'; import AddUsersListItem from './add-users-list-item.react.js'; import css from './add-users-list.css'; import Button from '../../components/button.react.js'; import type { ButtonColor } from '../../components/button.react.js'; import Label from '../../components/label.react.js'; import LoadingIndicator from '../../loading-indicator.react.js'; import { useSelector } from '../../redux/redux-utils.js'; const loadingStatusSelector = createLoadingStatusSelector( updateRelationshipsActionTypes, ); type Props = { +searchText: string, +excludedStatuses?: $ReadOnlySet, +closeModal: () => void, +confirmButtonContent: React.Node, +confirmButtonColor?: ButtonColor, +relationshipAction: RelationshipAction, }; function AddUsersList(props: Props): React.Node { const { searchText, excludedStatuses = new Set(), closeModal, confirmButtonContent, confirmButtonColor, relationshipAction, } = props; const viewerID = useSelector(state => state.currentUserInfo?.id); - const userStoreSearchIndex = useSelector(userStoreSearchIndexSelector); + const userInfos = useSelector(state => state.userStore.userInfos); + const userInfosArray = React.useMemo(() => values(userInfos), [userInfos]); + + const userStoreSearchIndex = useUserSearchIndex(userInfosArray); const [userStoreSearchResults, setUserStoreSearchResults] = React.useState< $ReadOnlySet, >(new Set(userStoreSearchIndex.getSearchResults(searchText))); React.useEffect(() => { setUserStoreSearchResults( new Set(userStoreSearchIndex.getSearchResults(searchText)), ); }, [searchText, userStoreSearchIndex]); const serverSearchResults = useSearchUsers(searchText); const searchTextPresent = searchText.length > 0; - const userInfos = useSelector(state => state.userStore.userInfos); const mergedUserInfos = React.useMemo(() => { const mergedInfos: { [string]: GlobalAccountUserInfo | AccountUserInfo } = {}; for (const userInfo of serverSearchResults) { mergedInfos[userInfo.id] = userInfo; } const userStoreUserIDs = searchTextPresent ? userStoreSearchResults : Object.keys(userInfos); for (const id of userStoreUserIDs) { const { username, relationshipStatus } = userInfos[id]; if (username) { mergedInfos[id] = { id, username, relationshipStatus }; } } return mergedInfos; }, [ searchTextPresent, serverSearchResults, userInfos, userStoreSearchResults, ]); const sortedUsers = React.useMemo( () => Object.keys(mergedUserInfos) .map(userID => mergedUserInfos[userID]) .filter( user => user.id !== viewerID && (!user.relationshipStatus || !excludedStatuses.has(user.relationshipStatus)), ) .sort((user1, user2) => user1.username.localeCompare(user2.username)), [excludedStatuses, mergedUserInfos, viewerID], ); const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState< $ReadOnlyArray, >([]); const selectUser = React.useCallback( (userID: string) => { setPendingUsersToAdd(pendingUsers => { const username = mergedUserInfos[userID]?.username; if (!username || pendingUsers.some(user => user.id === userID)) { return pendingUsers; } const newPendingUser = { id: userID, username, }; let targetIndex = 0; while ( targetIndex < pendingUsers.length && newPendingUser.username.localeCompare( pendingUsers[targetIndex].username, ) > 0 ) { targetIndex++; } return [ ...pendingUsers.slice(0, targetIndex), newPendingUser, ...pendingUsers.slice(targetIndex), ]; }); }, [mergedUserInfos], ); const deselectUser = React.useCallback( (userID: string) => setPendingUsersToAdd(pendingUsers => pendingUsers.filter(userInfo => userInfo.id !== userID), ), [], ); const pendingUserIDs = React.useMemo( () => new Set(pendingUsersToAdd.map(userInfo => userInfo.id)), [pendingUsersToAdd], ); const pendingUsersWithENSNames = useENSNames(pendingUsersToAdd); const userTags = React.useMemo(() => { if (pendingUsersWithENSNames.length === 0) { return null; } const tags = pendingUsersWithENSNames.map(userInfo => ( )); return
{tags}
; }, [deselectUser, pendingUsersWithENSNames]); const filteredUsers = React.useMemo( () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)), [pendingUserIDs, sortedUsers], ); const filteredUsersWithENSNames = useENSNames(filteredUsers); const userRows = React.useMemo( () => filteredUsersWithENSNames.map(userInfo => ( )), [filteredUsersWithENSNames, selectUser], ); const [errorMessage, setErrorMessage] = React.useState(''); const callUpdateRelationships = useServerCall(updateRelationships); const dispatchActionPromise = useDispatchActionPromise(); const updateRelationshipsPromiseCreator = React.useCallback(async () => { try { setErrorMessage(''); const result = await callUpdateRelationships({ action: relationshipAction, userIDs: Array.from(pendingUserIDs), }); closeModal(); return result; } catch (e) { setErrorMessage('unknown error'); throw e; } }, [callUpdateRelationships, closeModal, pendingUserIDs, relationshipAction]); const confirmSelection = React.useCallback( () => dispatchActionPromise( updateRelationshipsActionTypes, updateRelationshipsPromiseCreator(), ), [dispatchActionPromise, updateRelationshipsPromiseCreator], ); const loadingStatus = useSelector(loadingStatusSelector); let buttonContent = confirmButtonContent; if (loadingStatus === 'loading') { buttonContent = ( <>
{confirmButtonContent}
); } let errors; if (errorMessage) { errors =
{errorMessage}
; } return (
{userTags}
{userRows}
{errors}
); } export default AddUsersList;