diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js index 1fb127ed8..8bad2b5fc 100644 --- a/web/modals/threads/members/add-members-modal.react.js +++ b/web/modals/threads/members/add-members-modal.react.js @@ -1,95 +1,139 @@ // @flow import * as React from 'react'; +import { threadInfoSelector } from 'lib/selectors/thread-selectors'; +import { + userSearchIndexForPotentialMembers, + userInfoSelectorForPotentialMembers, +} from 'lib/selectors/user-selectors'; +import { getPotentialMemberItems } from 'lib/shared/search-utils'; +import { threadActualMembers } from 'lib/shared/thread-utils'; + import Button from '../../../components/button.react'; +import { useSelector } from '../../../redux/redux-utils'; import SearchModal from '../../search-modal.react'; import AddMembersList from './add-members-list.react'; import css from './members-modal.css'; type ContentProps = { +searchText: string, +threadID: string, +onClose: () => void, }; function AddMembersModalContent(props: ContentProps): React.Node { - const { onClose } = props; + const { searchText, threadID, onClose } = props; const [pendingUsersToAdd, setPendingUsersToAdd] = React.useState< $ReadOnlySet, >(new Set()); - const userSearchResults = []; + 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 userSearchIndex = useSelector(userSearchIndexForPotentialMembers); + const excludeUserIDs = React.useMemo( + () => threadActualMembers(threadInfo.members), + [threadInfo.members], + ); + + const userSearchResults = React.useMemo( + () => + getPotentialMemberItems( + searchText, + otherUserInfos, + userSearchIndex, + excludeUserIDs, + parentThreadInfo, + communityThreadInfo, + threadInfo.type, + ), + [ + communityThreadInfo, + excludeUserIDs, + otherUserInfos, + parentThreadInfo, + searchText, + threadInfo.type, + userSearchIndex, + ], + ); const onSwitchUser = React.useCallback( userID => setPendingUsersToAdd(users => { const newUsers = new Set(users); if (newUsers.has(userID)) { newUsers.delete(userID); } else { newUsers.add(userID); } return newUsers; }), [], ); return (
); } type Props = { +threadID: string, +onClose: () => void, }; function AddMembersModal(props: Props): React.Node { const { threadID, onClose } = props; const addMembersModalContent = React.useCallback( (searchText: string) => ( ), [onClose, threadID], ); return ( {addMembersModalContent} ); } export default AddMembersModal;