diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js index 16d9fb014..597a9c535 100644 --- a/web/modals/threads/members/members-modal.react.js +++ b/web/modals/threads/members/members-modal.react.js @@ -1,141 +1,142 @@ // @flow import * as React from 'react'; import { useModalContext } from 'lib/components/modal-provider.react.js'; import { threadInfoSelector } from 'lib/selectors/thread-selectors.js'; import { userStoreSearchIndex } from 'lib/selectors/user-selectors.js'; import { - memberHasAdminPowers, - memberIsAdmin, + roleIsAdminRole, threadHasPermission, } from 'lib/shared/thread-utils.js'; import { threadPermissions } from 'lib/types/thread-permission-types.js'; import { type RelativeMemberInfo } from 'lib/types/thread-types.js'; +import { useRolesFromCommunityThreadInfo } from 'lib/utils/role-utils.js'; import { AddMembersModal } 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'; import Tabs from '../../../components/tabs.react.js'; import { useSelector } from '../../../redux/redux-utils.js'; import SearchModal from '../../search-modal.react.js'; type ContentProps = { +searchText: string, +threadID: string, }; function ThreadMembersModalContent(props: ContentProps): React.Node { const { threadID, searchText } = props; const [tab, setTab] = React.useState<'All Members' | 'Admins'>('All Members'); const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); const { members: threadMembersNotFiltered } = threadInfo; const userSearchIndex = useSelector(userStoreSearchIndex); const userIDs = React.useMemo( () => userSearchIndex.getSearchResults(searchText), [searchText, userSearchIndex], ); const allMembers = React.useMemo( () => threadMembersNotFiltered.filter( (member: RelativeMemberInfo) => searchText.length === 0 || userIDs.includes(member.id), ), [searchText.length, threadMembersNotFiltered, userIDs], ); + + const roles = useRolesFromCommunityThreadInfo(threadInfo, allMembers); const adminMembers = React.useMemo( () => - allMembers.filter( - (member: RelativeMemberInfo) => - memberIsAdmin(member, threadInfo) || memberHasAdminPowers(member), + allMembers.filter((member: RelativeMemberInfo) => + roleIsAdminRole(roles.get(member.id)), ), - [allMembers, threadInfo], + [allMembers, roles], ); const allUsersTab = React.useMemo( () => ( ), [allMembers, threadInfo], ); const allAdminsTab = React.useMemo( () => ( ), [adminMembers, threadInfo], ); const { pushModal, popModal } = useModalContext(); const onClickAddMembers = React.useCallback(() => { pushModal(); }, [popModal, pushModal, threadID]); const canAddMembers = threadHasPermission( threadInfo, threadPermissions.ADD_MEMBERS, ); const addMembersButton = React.useMemo(() => { if (!canAddMembers) { return null; } return (
); }, [canAddMembers, onClickAddMembers]); return (
{allUsersTab} {allAdminsTab}
{addMembersButton}
); } type Props = { +threadID: string, +onClose: () => void, }; function ThreadMembersModal(props: Props): React.Node { const { onClose, threadID } = props; const renderModalContent = React.useCallback( (searchText: string) => ( ), [threadID], ); return ( {renderModalContent} ); } export default ThreadMembersModal;