diff --git a/web/chat/member-list-sidebar/member-list-sidebar-header.react.js b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js --- a/web/chat/member-list-sidebar/member-list-sidebar-header.react.js +++ b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js @@ -8,7 +8,7 @@ import css from './member-list-sidebar-header.css'; import { useMemberListSidebarContext } from './member-list-sidebar-provider.react.js'; import AddButton from '../../components/add-button.react.js'; -import { AddMembersModal } from '../../modals/threads/members/add-members-modal.react.js'; +import { AddMembersModalWrapper } from '../../modals/threads/members/add-members-modal.react.js'; type Props = { +threadID: string, @@ -20,7 +20,9 @@ const { pushModal, popModal } = useModalContext(); const onClickAddButton = React.useCallback(() => { - pushModal(); + pushModal( + , + ); }, [popModal, pushModal, threadID]); const { setShowMemberListSidebar } = useMemberListSidebarContext(); diff --git a/web/modals/threads/members/add-members-list-content.react.js b/web/modals/threads/members/add-members-list-content.react.js --- a/web/modals/threads/members/add-members-list-content.react.js +++ b/web/modals/threads/members/add-members-list-content.react.js @@ -19,14 +19,9 @@ const { userListItems, pendingUsersToAdd, switchUser, hasParentThread } = props; - const usersAvailableToAdd = React.useMemo( - () => userListItems.filter(user => !user.alert), - [userListItems], - ); - const groupedAvailableUsersList = React.useMemo( - () => _groupBy(userInfo => userInfo.notice)(usersAvailableToAdd), - [usersAvailableToAdd], + () => _groupBy(userInfo => userInfo.notice)(userListItems), + [userListItems], ); const membersInParentThread = React.useMemo(() => { diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js --- a/web/modals/threads/members/add-members-modal.react.js +++ b/web/modals/threads/members/add-members-modal.react.js @@ -6,17 +6,15 @@ changeThreadSettingsActionTypes, useChangeThreadSettings, } from 'lib/actions/thread-actions.js'; -import { useENSNames } from 'lib/hooks/ens-cache.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; -import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js'; -import { usePotentialMemberItems } from 'lib/shared/search-utils.js'; -import { threadActualMembers } from 'lib/shared/thread-utils.js'; import { useDispatchActionPromise } from 'lib/utils/redux-promise-utils.js'; import AddMembersListContent from './add-members-list-content.react.js'; import css from './members-modal.css'; import Button from '../../../components/button.react.js'; import { useSelector } from '../../../redux/redux-utils.js'; +import { AddUsersListProvider } from '../../../settings/relationship/add-users-list-provider.react.js'; +import { useAddMembersListUserInfos } from '../../../settings/relationship/add-users-utils.js'; import SearchModal from '../../search-modal.react.js'; type ContentProps = { @@ -33,31 +31,11 @@ >(new Set()); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); - const { parentThreadID, community } = threadInfo; - const parentThreadInfo = useSelector(state => - parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, - ); - const communityThreadInfo = useSelector(state => - community ? threadInfoSelector(state)[community] : null, - ); - const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers); - const excludeUserIDs = React.useMemo( - () => - threadActualMembers(threadInfo.members).concat( - Array.from(pendingUsersToAdd), - ), - [pendingUsersToAdd, threadInfo.members], - ); - const userSearchResults = usePotentialMemberItems({ - text: searchText, - userInfos: otherUserInfos, - excludeUserIDs, - inputParentThreadInfo: parentThreadInfo, - inputCommunityThreadInfo: communityThreadInfo, - threadType: threadInfo.type, + const { sortedUsersWithENSNames } = useAddMembersListUserInfos({ + threadID, + searchText, }); - const userSearchResultsWithENSNames = useENSNames(userSearchResults); const onSwitchUser = React.useCallback( (userID: string) => @@ -97,7 +75,7 @@
+ + + ); +} + +export { AddMembersModalWrapper, AddMembersModalContent }; diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js --- a/web/modals/threads/members/members-modal.react.js +++ b/web/modals/threads/members/members-modal.react.js @@ -13,7 +13,7 @@ import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js'; -import { AddMembersModal } from './add-members-modal.react.js'; +import { AddMembersModalWrapper } from './add-members-modal.react.js'; import ThreadMembersList from './members-list.react.js'; import css from './members-modal.css'; import Button from '../../../components/button.react.js'; @@ -90,7 +90,9 @@ const { pushModal, popModal } = useModalContext(); const onClickAddMembers = React.useCallback(() => { - pushModal(); + pushModal( + , + ); }, [popModal, pushModal, threadID]); const canAddMembers = threadHasPermission( diff --git a/web/settings/relationship/add-users-utils.js b/web/settings/relationship/add-users-utils.js --- a/web/settings/relationship/add-users-utils.js +++ b/web/settings/relationship/add-users-utils.js @@ -4,11 +4,18 @@ import { useSortedENSResolvedUsers } from 'lib/hooks/ens-cache.js'; import { useUserSearchIndex } from 'lib/selectors/nav-selectors.js'; -import { useSearchUsers } from 'lib/shared/search-utils.js'; +import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; +import { userInfoSelectorForPotentialMembers } from 'lib/selectors/user-selectors.js'; +import { + useSearchUsers, + usePotentialMemberItems, +} from 'lib/shared/search-utils.js'; +import { threadActualMembers } from 'lib/shared/thread-utils.js'; import type { UserRelationshipStatus } from 'lib/types/relationship-types.js'; import type { GlobalAccountUserInfo, AccountUserInfo, + UserListItem, } from 'lib/types/user-types.js'; import { values } from 'lib/utils/objects.js'; @@ -105,4 +112,74 @@ return result; } -export { useUserRelationshipUserInfos }; +type UseAddMembersListUserInfosParams = { + +threadID: string, + +searchText: string, +}; + +function useAddMembersListUserInfos(params: UseAddMembersListUserInfosParams): { + +userInfos: { + [string]: UserListItem, + }, + +sortedUsersWithENSNames: $ReadOnlyArray, +} { + const { threadID, searchText } = params; + + const { previouslySelectedUsers } = useAddUsersListContext(); + + const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); + const { parentThreadID, community } = threadInfo; + const parentThreadInfo = useSelector(state => + parentThreadID ? threadInfoSelector(state)[parentThreadID] : null, + ); + const communityThreadInfo = useSelector(state => + community ? threadInfoSelector(state)[community] : null, + ); + const otherUserInfos = useSelector(userInfoSelectorForPotentialMembers); + const excludeUserIDs = React.useMemo( + () => + threadActualMembers(threadInfo.members).concat( + Array.from(previouslySelectedUsers.keys()), + ), + [previouslySelectedUsers, threadInfo.members], + ); + + const userSearchResults = usePotentialMemberItems({ + text: searchText, + userInfos: otherUserInfos, + excludeUserIDs, + inputParentThreadInfo: parentThreadInfo, + inputCommunityThreadInfo: communityThreadInfo, + threadType: threadInfo.type, + }); + + const userInfos = React.useMemo(() => { + const mergedInfos: { [string]: UserListItem } = {}; + + for (const userInfo of userSearchResults) { + mergedInfos[userInfo.id] = userInfo; + } + + return mergedInfos; + }, [userSearchResults]); + + const usersAvailableToAdd = React.useMemo( + () => userSearchResults.filter(user => !user.alert), + [userSearchResults], + ); + + const sortedUsersWithENSNames = + useSortedENSResolvedUsers(usersAvailableToAdd); + + const result = React.useMemo( + () => ({ + userInfos, + sortedUsersWithENSNames, + }), + [userInfos, sortedUsersWithENSNames], + ); + + return result; +} + +export { useUserRelationshipUserInfos, useAddMembersListUserInfos };