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 @@ -81,16 +81,59 @@ [excludedStatuses, mergedUserInfos], ); + 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 pendingUserIDs = React.useMemo( + () => new Set(pendingUsersToAdd.map(userInfo => userInfo.id)), + [pendingUsersToAdd], + ); + + const filteredUsers = React.useMemo( + () => sortedUsers.filter(userInfo => !pendingUserIDs.has(userInfo.id)), + [pendingUserIDs, sortedUsers], + ); + const userRows = React.useMemo( () => - sortedUsers.map(userInfo => ( + filteredUsers.map(userInfo => ( {}} + selectUser={selectUser} /> )), - [sortedUsers], + [filteredUsers, selectUser], ); return
{userRows}
; }