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 };