diff --git a/src/pages/ReportDetailsPage.js b/src/pages/ReportDetailsPage.js index 42a535844c72..111c5a1be0aa 100644 --- a/src/pages/ReportDetailsPage.js +++ b/src/pages/ReportDetailsPage.js @@ -1,4 +1,4 @@ -import React, {useMemo} from 'react'; +import React, {useCallback, useEffect, useMemo} from 'react'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import _ from 'underscore'; @@ -16,6 +16,7 @@ import * as OptionsListUtils from '../libs/OptionsListUtils'; import * as ReportUtils from '../libs/ReportUtils'; import * as PolicyUtils from '../libs/PolicyUtils'; import * as Report from '../libs/actions/Report'; +import * as Policy from '../libs/actions/Policy'; import participantPropTypes from '../components/participantPropTypes'; import * as Expensicons from '../components/Icon/Expensicons'; import ROUTES from '../ROUTES'; @@ -72,7 +73,12 @@ function ReportDetailsPage(props) { const chatRoomSubtitle = useMemo(() => ReportUtils.getChatRoomSubtitle(props.report), [props.report, policy]); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(props.report); const canLeaveRoom = useMemo(() => ReportUtils.canLeaveRoom(props.report, !_.isEmpty(policy)), [policy, props.report]); - const participants = useMemo(() => ReportUtils.getParticipantsIDs(props.report), [props.report]); + const workspaceMembers = useMemo(() => _.keys(PolicyUtils.getMemberAccountIDsForWorkspace(props.policyMembers, props.personalDetails)), [props.policyMembers, props.personalDetails]); + + const participants = useMemo( + () => (props.report.policyID && !ReportUtils.isAdminRoom(props.report) ? workspaceMembers : ReportUtils.getParticipantsIDs(props.report)), + [props.report, workspaceMembers], + ); const isGroupDMChat = useMemo(() => ReportUtils.isDM(props.report) && participants.length > 1, [props.report, participants.length]); @@ -156,6 +162,16 @@ function ReportDetailsPage(props) { {chatRoomSubtitle} ) : null; + const getWorkspaceMembers = useCallback(() => { + Policy.openWorkspaceMembersPage(props.report.policyID, workspaceMembers); + }, [props.report.policyID, workspaceMembers]); + + useEffect(() => { + if (!props.report.policyID || ReportUtils.isAdminRoom(props.report)) { + return; + } + getWorkspaceMembers(); + }, [getWorkspaceMembers, props.report]); return ( @@ -243,5 +259,8 @@ export default compose( policies: { key: ONYXKEYS.COLLECTION.POLICY, }, + policyMembers: { + key: (props) => `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${props.report.policyID}`, + }, }), )(ReportDetailsPage); diff --git a/src/pages/ReportParticipantsPage.js b/src/pages/ReportParticipantsPage.js index 67933ebfe3e4..cff54629c0a5 100755 --- a/src/pages/ReportParticipantsPage.js +++ b/src/pages/ReportParticipantsPage.js @@ -4,6 +4,7 @@ import {View} from 'react-native'; import PropTypes from 'prop-types'; import {withOnyx} from 'react-native-onyx'; import lodashGet from 'lodash/get'; +import lodashUniqBy from 'lodash/uniqBy'; import styles from '../styles/styles'; import ONYXKEYS from '../ONYXKEYS'; import HeaderWithBackButton from '../components/HeaderWithBackButton'; @@ -83,7 +84,39 @@ const getAllParticipants = (report, personalDetails, translate) => .value(); function ReportParticipantsPage(props) { - const participants = _.map(getAllParticipants(props.report, props.personalDetails, props.translate), (participant) => ({ + const getMemberOptions = () => { + let result = []; + _.each(props.policyMembers, (__, accountID) => { + const details = lodashGet(props.personalDetails, accountID, {displayName: props.personalDetails.displayName || props.translate('common.hidden'), avatar: ''}); + + result.push({ + keyForList: accountID, + accountID: Number(accountID), + text: details.displayName, + displayName: details.displayName, + alternateText: details.login, + icons: [ + { + id: accountID, + source: UserUtils.getAvatar(details.avatar, accountID), + name: details.login, + type: CONST.ICON_TYPE_AVATAR, + }, + ], + }); + }); + + result = _.sortBy(lodashUniqBy(result, 'alternateText'), (value) => (value.text || '').toLowerCase()); + + return result; + }; + + const data = + props.report.policyID && props.policyMembers && !ReportUtils.isAdminRoom(props.report) + ? getMemberOptions() + : getAllParticipants(props.report, props.personalDetails, props.translate); + + const participants = _.map(data, (participant) => ({ ...participant, isDisabled: ReportUtils.isOptimisticPersonalDetail(participant.accountID), })); @@ -150,5 +183,8 @@ export default compose( personalDetails: { key: ONYXKEYS.PERSONAL_DETAILS_LIST, }, + policyMembers: { + key: (props) => `${ONYXKEYS.COLLECTION.POLICY_MEMBERS}${props.report.policyID}`, + }, }), )(ReportParticipantsPage);