diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 684274bc007..90133eff27f 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -1997,7 +1997,7 @@ function getWorkspaceIcon(report: OnyxInputOrEntry, policy?: OnyxInputOr const iconFromCache = workSpaceIconsCache.get(cacheKey); // disabling to protect against empty strings // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - const policyAvatarURL = report?.policyAvatar || allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatarURL; + const policyAvatarURL = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`]?.avatarURL || report?.policyAvatar; // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const policyExpenseChatAvatarSource = policyAvatarURL || getDefaultWorkspaceAvatar(workspaceName); diff --git a/src/pages/home/HeaderView.tsx b/src/pages/home/HeaderView.tsx index 180f7da970a..d463fa1cec3 100644 --- a/src/pages/home/HeaderView.tsx +++ b/src/pages/home/HeaderView.tsx @@ -78,7 +78,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const isTaskReport = ReportUtils.isTaskReport(report); const reportHeaderData = !isTaskReport && !isChatThread && report?.parentReportID ? parentReport : report; // Use sorted display names for the title for group chats on native small screen widths - const title = ReportUtils.getReportName(reportHeaderData, undefined, parentReportAction, personalDetails, invoiceReceiverPolicy); + const title = ReportUtils.getReportName(reportHeaderData, policy, parentReportAction, personalDetails, invoiceReceiverPolicy); const subtitle = ReportUtils.getChatRoomSubtitle(reportHeaderData); const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(reportHeaderData); const reportDescription = ReportUtils.getReportDescriptionText(report); @@ -124,7 +124,7 @@ function HeaderView({report, parentReportAction, reportID, onNavigationMenuButto const shouldShowSubscript = ReportUtils.shouldReportShowSubscript(report); const defaultSubscriptSize = ReportUtils.isExpenseRequest(report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; - const icons = ReportUtils.getIcons(reportHeaderData, personalDetails, null, '', -1, undefined, invoiceReceiverPolicy); + const icons = ReportUtils.getIcons(reportHeaderData, personalDetails, null, '', -1, policy, invoiceReceiverPolicy); const brickRoadIndicator = ReportUtils.hasReportNameError(report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''; const shouldShowBorderBottom = !isTaskReport || !shouldUseNarrowLayout; const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(report); diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index 4d4a560953e..700c87ee352 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -1,13 +1,12 @@ -import lodashIsEqual from 'lodash/isEqual'; import React, {memo} from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import MultipleAvatars from '@components/MultipleAvatars'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ReportWelcomeText from '@components/ReportWelcomeText'; import useLocalize from '@hooks/useLocalize'; +import usePolicy from '@hooks/usePolicy'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; @@ -15,21 +14,9 @@ import * as ReportUtils from '@libs/ReportUtils'; import {navigateToConciergeChatAndDeleteReport} from '@userActions/Report'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {PersonalDetailsList, Policy, Report} from '@src/types/onyx'; import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground'; -type ReportActionItemCreatedOnyxProps = { - /** The report currently being looked at */ - report: OnyxEntry; - - /** The policy object for the current route */ - policy: OnyxEntry; - - /** Personal details of all the users */ - personalDetails: OnyxEntry; -}; - -type ReportActionItemCreatedProps = ReportActionItemCreatedOnyxProps & { +type ReportActionItemCreatedProps = { /** The id of the report */ reportID: string; @@ -37,7 +24,10 @@ type ReportActionItemCreatedProps = ReportActionItemCreatedOnyxProps & { // eslint-disable-next-line react/no-unused-prop-types policyID: string | undefined; }; -function ReportActionItemCreated({report, personalDetails, policy, reportID}: ReportActionItemCreatedProps) { +function ReportActionItemCreated({policyID, reportID}: ReportActionItemCreatedProps) { + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const policy = usePolicy(policyID); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -48,7 +38,7 @@ function ReportActionItemCreated({report, personalDetails, policy, reportID}: Re return null; } - let icons = ReportUtils.getIcons(report, personalDetails, null, '', -1, undefined, invoiceReceiverPolicy); + let icons = ReportUtils.getIcons(report, personalDetails, null, '', -1, policy, invoiceReceiverPolicy); const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(report); if (ReportUtils.isInvoiceRoom(report) && ReportUtils.isCurrentUserInvoiceReceiver(report)) { @@ -99,33 +89,4 @@ function ReportActionItemCreated({report, personalDetails, policy, reportID}: Re ReportActionItemCreated.displayName = 'ReportActionItemCreated'; -export default withOnyx({ - report: { - key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - }, - - policy: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, - }, - - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, -})( - memo( - ReportActionItemCreated, - (prevProps, nextProps) => - prevProps.policy?.name === nextProps.policy?.name && - prevProps.policy?.avatarURL === nextProps.policy?.avatarURL && - prevProps.report?.stateNum === nextProps.report?.stateNum && - prevProps.report?.statusNum === nextProps.report?.statusNum && - prevProps.report?.lastReadTime === nextProps.report?.lastReadTime && - prevProps.report?.description === nextProps.report?.description && - prevProps.personalDetails === nextProps.personalDetails && - prevProps.policy?.description === nextProps.policy?.description && - prevProps.report?.reportName === nextProps.report?.reportName && - prevProps.report?.avatarUrl === nextProps.report?.avatarUrl && - lodashIsEqual(prevProps.report?.invoiceReceiver, nextProps.report?.invoiceReceiver) && - prevProps.report?.errorFields === nextProps.report?.errorFields, - ), -); +export default memo(ReportActionItemCreated); diff --git a/src/pages/home/report/ReportActionItemSingle.tsx b/src/pages/home/report/ReportActionItemSingle.tsx index 56eaf814ff1..91f12339ee0 100644 --- a/src/pages/home/report/ReportActionItemSingle.tsx +++ b/src/pages/home/report/ReportActionItemSingle.tsx @@ -14,6 +14,7 @@ import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import UserDetailsTooltip from '@components/UserDetailsTooltip'; import useLocalize from '@hooks/useLocalize'; +import usePolicy from '@hooks/usePolicy'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -82,6 +83,7 @@ function ReportActionItemSingle({ const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); const personalDetails = usePersonalDetails() ?? CONST.EMPTY_OBJECT; + const policy = usePolicy(report?.policyID); const delegatePersonalDetails = personalDetails[action?.delegateAccountID ?? '']; const actorAccountID = ReportUtils.getReportActionActorAccountID(action); const [invoiceReceiverPolicy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${report?.invoiceReceiver && 'policyID' in report.invoiceReceiver ? report.invoiceReceiver.policyID : -1}`); @@ -102,9 +104,9 @@ function ReportActionItemSingle({ let avatarId: number | string | undefined = actorAccountID; if (isWorkspaceActor) { - displayName = ReportUtils.getPolicyName(report); + displayName = ReportUtils.getPolicyName(report, undefined, policy); actorHint = displayName; - avatarSource = ReportUtils.getWorkspaceIcon(report).source; + avatarSource = ReportUtils.getWorkspaceIcon(report, policy).source; avatarId = report?.policyID; } else if (action?.delegateAccountID && personalDetails[action?.delegateAccountID]) { displayName = delegatePersonalDetails?.displayName ?? '';