diff --git a/web/modals/threads/create/steps/subchannel-members-list.react.js b/web/modals/threads/create/steps/subchannel-members-list.react.js index 93cc892aa..b8893552a 100644 --- a/web/modals/threads/create/steps/subchannel-members-list.react.js +++ b/web/modals/threads/create/steps/subchannel-members-list.react.js @@ -1,117 +1,117 @@ // @flow import * as React from 'react'; -import { useSelector } from 'react-redux'; import { useENSNames } from 'lib/hooks/ens-cache.js'; import { stringForUser } from 'lib/shared/user-utils.js'; import type { MinimallyEncodedRelativeMemberInfo, MinimallyEncodedThreadInfo, } from 'lib/types/minimally-encoded-thread-permissions-types.js'; import type { RelativeMemberInfo, ThreadInfo } from 'lib/types/thread-types.js'; import type { UserListItem } from 'lib/types/user-types.js'; +import { useSelector } from '../../../../redux/redux-utils.js'; import AddMembersList from '../../../components/add-members-list.react.js'; type Props = { +searchText: string, +searchResult: $ReadOnlySet, +communityThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo, +parentThreadInfo: ThreadInfo | MinimallyEncodedThreadInfo, +selectedUsers: $ReadOnlySet, +toggleUserSelection: (userID: string) => void, }; function SubchannelMembersList(props: Props): React.Node { const { searchText, searchResult, communityThreadInfo, parentThreadInfo, selectedUsers, toggleUserSelection, } = props; const { name: communityName } = communityThreadInfo; - const currentUserId = useSelector(state => state.currentUserInfo.id); + const currentUserId = useSelector(state => state.currentUserInfo?.id); const parentMembersSet = React.useMemo( () => new Set(parentThreadInfo.members.map(user => user.id)), [parentThreadInfo], ); const filterOutParentMembersWithENSNames = React.useCallback( ( members: $ReadOnlyArray< RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo, >, ) => members .filter( user => user.id !== currentUserId && (searchResult.has(user.id) || searchText.length === 0), ) .map(user => ({ id: user.id, username: stringForUser(user) })), [currentUserId, searchResult, searchText.length], ); const parentMemberListWithoutENSNames = React.useMemo( () => filterOutParentMembersWithENSNames(parentThreadInfo.members), [filterOutParentMembersWithENSNames, parentThreadInfo.members], ); const parentMemberList = useENSNames( parentMemberListWithoutENSNames, ); const filterOutOtherMembersWithENSNames = React.useCallback( ( members: $ReadOnlyArray< RelativeMemberInfo | MinimallyEncodedRelativeMemberInfo, >, ) => members .filter( user => !parentMembersSet.has(user.id) && user.id !== currentUserId && (searchResult.has(user.id) || searchText.length === 0), ) .map(user => ({ id: user.id, username: stringForUser(user) })), [currentUserId, parentMembersSet, searchResult, searchText.length], ); const otherMemberListWithoutENSNames = React.useMemo( () => filterOutOtherMembersWithENSNames(communityThreadInfo.members), [communityThreadInfo.members, filterOutOtherMembersWithENSNames], ); const otherMemberList = useENSNames( otherMemberListWithoutENSNames, ); const sortedGroupedUserList = React.useMemo( () => [ { header: 'Users in parent channel', userInfos: parentMemberList }, { header: `All users in ${communityName ?? 'community'}`, userInfos: otherMemberList, }, ].filter(item => item.userInfos.length), [parentMemberList, otherMemberList, communityName], ); return ( ); } export default SubchannelMembersList;