diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index d89f81ee81a0..a92c89479c74 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -289,6 +289,7 @@ type OptimisticChatReport = Pick< | 'description' | 'writeCapability' | 'avatarUrl' + | 'avatarFileName' | 'invoiceReceiver' | 'isHidden' > & { @@ -5078,6 +5079,7 @@ function buildOptimisticChatReport( parentReportID = '', description = '', avatarUrl = '', + avatarFileName = '', optimisticReportID = '', ): OptimisticChatReport { const isWorkspaceChatType = chatType && isWorkspaceChat(chatType); @@ -5118,6 +5120,7 @@ function buildOptimisticChatReport( description, writeCapability, avatarUrl, + avatarFileName, }; if (chatType === CONST.REPORT.CHAT_TYPE.INVOICE) { @@ -5135,6 +5138,7 @@ function buildOptimisticGroupChatReport( participantAccountIDs: number[], reportName: string, avatarUri: string, + avatarFilename: string, optimisticReportID?: string, notificationPreference?: NotificationPreference, ) { @@ -5153,6 +5157,7 @@ function buildOptimisticGroupChatReport( undefined, undefined, avatarUri, + avatarFilename, optimisticReportID, ); } @@ -5562,6 +5567,7 @@ function buildOptimisticWorkspaceChats(policyID: string, policyName: string, exp undefined, undefined, undefined, + undefined, expenseReportId, ); const expenseChatReportID = expenseChatData.reportID; diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 40a7059b54b9..caaf6840e56d 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -697,7 +697,8 @@ function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageMani onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, value: { - avatarUrl: file?.uri ?? '', + avatarUrl: file ? file?.uri ?? '' : null, + avatarFileName: file ? file?.name ?? '' : null, pendingFields: { avatar: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE, }, @@ -708,12 +709,14 @@ function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageMani }, ]; + const fetchedReport = ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]; const failureData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, value: { - avatarUrl: ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]?.avatarUrl ?? null, + avatarUrl: fetchedReport?.avatarUrl ?? null, + avatarFileName: fetchedReport?.avatarFileName ?? null, pendingFields: { avatar: null, }, @@ -1011,7 +1014,14 @@ function navigateToAndOpenReport( if (isEmptyObject(chat)) { if (isGroupChat) { // If we are creating a group chat then participantAccountIDs is expected to contain currentUserAccountID - newChat = ReportUtils.buildOptimisticGroupChatReport(participantAccountIDs, reportName ?? '', avatarUri ?? '', optimisticReportID, CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS); + newChat = ReportUtils.buildOptimisticGroupChatReport( + participantAccountIDs, + reportName ?? '', + avatarUri ?? '', + avatarFile?.name ?? '', + optimisticReportID, + CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS, + ); } else { newChat = ReportUtils.buildOptimisticChatReport( [...participantAccountIDs, currentUserAccountID], diff --git a/src/pages/ReportAvatar.tsx b/src/pages/ReportAvatar.tsx index eb921032979b..b9a91705a401 100644 --- a/src/pages/ReportAvatar.tsx +++ b/src/pages/ReportAvatar.tsx @@ -1,7 +1,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React from 'react'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import React, {useMemo} from 'react'; +import {useOnyx} from 'react-native-onyx'; import AttachmentModal from '@components/AttachmentModal'; import Navigation from '@libs/Navigation/Navigation'; import type {AuthScreensParamList} from '@libs/Navigation/types'; @@ -10,34 +9,46 @@ import * as UserUtils from '@libs/UserUtils'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {Policy, Report} from '@src/types/onyx'; -type ReportAvatarOnyxProps = { - report: OnyxEntry; - isLoadingApp: OnyxEntry; - policies: OnyxCollection; -}; +type ReportAvatarProps = StackScreenProps; -type ReportAvatarProps = ReportAvatarOnyxProps & StackScreenProps; +function ReportAvatar({route}: ReportAvatarProps) { + const reportIDFromRoute = route.params?.reportID ?? '-1'; + const policyIDFromRoute = route.params?.policyID ?? '-1'; + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`); + const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyIDFromRoute}`); + const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP, {initialValue: true}); -function ReportAvatar({report = {} as Report, route, policies, isLoadingApp = true}: ReportAvatarProps) { - const policyID = route.params.policyID ?? '-1'; - const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`]; - const policyName = ReportUtils.getPolicyName(report, false, policy); - const avatarURL = ReportUtils.getWorkspaceIcon(report).source; + const attachment = useMemo(() => { + if (ReportUtils.isGroupChat(report) && !ReportUtils.isThread(report)) { + return { + source: report?.avatarUrl ? UserUtils.getFullSizeAvatar(report.avatarUrl, 0) : ReportUtils.getDefaultGroupAvatar(report?.reportID ?? ''), + headerTitle: ReportUtils.getReportName(report), + originalFileName: report?.avatarFileName ?? '', + isWorkspaceAvatar: false, + }; + } + + return { + source: UserUtils.getFullSizeAvatar(ReportUtils.getWorkspaceIcon(report).source, 0), + headerTitle: ReportUtils.getPolicyName(report, false, policy), + // In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar + originalFileName: policy?.originalFileName ?? policy?.id ?? report?.policyID ?? '', + isWorkspaceAvatar: true, + }; + }, [report, policy]); return ( { Navigation.goBack(ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report?.reportID ?? '-1')); }} - isWorkspaceAvatar + isWorkspaceAvatar={attachment.isWorkspaceAvatar} maybeIcon - // In the case of default workspace avatar, originalFileName prop takes policyID as value to get the color of the avatar - originalFileName={policy?.originalFileName ?? policy?.id ?? report?.policyID} + originalFileName={attachment.originalFileName} shouldShowNotFoundPage={!report?.reportID && !isLoadingApp} isLoading={(!report?.reportID || !policy?.id) && !!isLoadingApp} /> @@ -45,15 +56,4 @@ function ReportAvatar({report = {} as Report, route, policies, isLoadingApp = tr } ReportAvatar.displayName = 'ReportAvatar'; - -export default withOnyx({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`, - }, - isLoadingApp: { - key: ONYXKEYS.IS_LOADING_APP, - }, - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - }, -})(ReportAvatar); +export default ReportAvatar; diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 199dbfabac3b..c11d3d65933b 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -506,7 +506,7 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD isUsingDefaultAvatar={!report.avatarUrl} size={CONST.AVATAR_SIZE.XLARGE} avatarStyle={styles.avatarXLarge} - shouldDisableViewPhoto + onViewPhotoPress={() => Navigation.navigate(ROUTES.REPORT_AVATAR.getRoute(report.reportID ?? '-1'))} onImageRemoved={() => { // Calling this without a file will remove the avatar Report.updateGroupChatAvatar(report.reportID ?? ''); diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index fd0e22fd6b44..9da19f192c1d 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -206,6 +206,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro isOptimisticReport: reportOnyx?.isOptimisticReport, lastMentionedTime: reportOnyx?.lastMentionedTime, avatarUrl: reportOnyx?.avatarUrl, + avatarFileName: reportOnyx?.avatarFileName, permissions, invoiceReceiver: reportOnyx?.invoiceReceiver, policyAvatar: reportOnyx?.policyAvatar, @@ -248,6 +249,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro reportOnyx?.isOptimisticReport, reportOnyx?.lastMentionedTime, reportOnyx?.avatarUrl, + reportOnyx?.avatarFileName, permissions, reportOnyx?.invoiceReceiver, reportOnyx?.policyAvatar, diff --git a/src/types/onyx/Report.ts b/src/types/onyx/Report.ts index b92f38f29ee1..ab3bb6bb7af3 100644 --- a/src/types/onyx/Report.ts +++ b/src/types/onyx/Report.ts @@ -71,6 +71,9 @@ type Report = OnyxCommon.OnyxValueWithOfflineFeedback< /** The URL of the Group Chat report custom avatar */ avatarUrl?: string; + /** The filename of the avatar */ + avatarFileName?: string; + /** The specific type of chat */ chatType?: ValueOf;