diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index c15fc4a967d5..aeaba9f312bc 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -645,11 +645,55 @@ function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageMani { onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, - value: {avatarUrl: file?.uri ?? ''}, + value: { + avatarUrl: file?.uri ?? '', + pendingFields: { + avatar: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE, + }, + errorFields: { + avatar: null, + }, + }, + }, + ]; + + const failureData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: { + avatarUrl: currentReportData?.[reportID]?.avatarUrl ?? null, + pendingFields: { + avatar: null, + }, + }, + }, + ]; + + const successData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: { + pendingFields: { + avatar: null, + }, + }, }, ]; const parameters: UpdateGroupChatAvatarParams = {file, reportID}; - API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_AVATAR, parameters, {optimisticData}); + API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_AVATAR, parameters, {optimisticData, failureData, successData}); +} + +/** + * Clear error and pending fields for the report avatar + */ +function clearAvatarErrors(reportID: string) { + Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, { + errorFields: { + avatar: null, + }, + }); } /** @@ -3772,4 +3816,5 @@ export { leaveGroupChat, removeFromGroupChat, updateGroupChatMemberRoles, + clearAvatarErrors, }; diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 5ea00361d8c4..fa939be4e63d 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -245,6 +245,10 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', file)} editIcon={Expensicons.Camera} editIconStyle={styles.smallEditIconAccount} + pendingAction={report.pendingFields?.avatar ?? undefined} + errors={report.errorFields?.avatar ?? null} + errorRowStyles={styles.mt6} + onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')} /> ) : (