From 6fdb0d24dbb668899d18d111505d4f55013c368e Mon Sep 17 00:00:00 2001 From: usman-ghani564 Date: Wed, 24 Apr 2024 18:07:58 +0500 Subject: [PATCH 1/5] implement offline behaviour for updateGroupChatAvatar --- src/libs/actions/Report.ts | 24 ++++++++++++++++++++++-- src/pages/ReportDetailsPage.tsx | 2 ++ 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 9de059acd1d7..5801ef2608fe 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -642,11 +642,31 @@ 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 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, successData}); } /** diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 3a7f4ad6f28d..1cbc98c80f27 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -243,6 +243,8 @@ 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} /> ) : ( Date: Tue, 30 Apr 2024 03:41:23 +0500 Subject: [PATCH 2/5] add failureData to updateGroupChatAvatar --- src/libs/actions/Report.ts | 17 +++++++++++++++-- src/pages/ReportDetailsPage.tsx | 4 ++-- 2 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 5801ef2608fe..f45192c0d438 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -636,7 +636,7 @@ function updateGroupChatName(reportID: string, reportName: string) { API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_NAME, parameters, {optimisticData}); } -function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageManipulatorResult) { +function updateGroupChatAvatar(reportID: string, previousUrl: string, file?: File | CustomRNImageManipulatorResult) { // If we have no file that means we are removing the avatar. const optimisticData: OnyxUpdate[] = [ { @@ -654,6 +654,19 @@ function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageMani }, ]; + const failureData: OnyxUpdate[] = [ + { + onyxMethod: Onyx.METHOD.MERGE, + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, + value: { + avatarUrl: previousUrl, + pendingFields: { + avatar: null, + }, + }, + }, + ]; + const successData: OnyxUpdate[] = [ { onyxMethod: Onyx.METHOD.MERGE, @@ -666,7 +679,7 @@ function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageMani }, ]; const parameters: UpdateGroupChatAvatarParams = {file, reportID}; - API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_AVATAR, parameters, {optimisticData, successData}); + API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_AVATAR, parameters, {optimisticData, failureData, successData}); } /** diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 1cbc98c80f27..bd4249633756 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -238,9 +238,9 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD shouldDisableViewPhoto onImageRemoved={() => { // Calling this without a file will remove the avatar - Report.updateGroupChatAvatar(report.reportID ?? ''); + Report.updateGroupChatAvatar(report.reportID ?? '', report.avatarUrl ?? ''); }} - onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', file)} + onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', report.avatarUrl ?? '', file)} editIcon={Expensicons.Camera} editIconStyle={styles.smallEditIconAccount} pendingAction={report?.pendingFields?.avatar ?? undefined} From cd8c4be0243d6435b32db146b5242b5dd72bbb73 Mon Sep 17 00:00:00 2001 From: usman-ghani564 Date: Tue, 30 Apr 2024 05:23:23 +0500 Subject: [PATCH 3/5] use currentReportData updateGroupChatAvatar --- src/libs/actions/Report.ts | 4 ++-- src/pages/ReportDetailsPage.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index f45192c0d438..e93a01d9e6a9 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -636,7 +636,7 @@ function updateGroupChatName(reportID: string, reportName: string) { API.write(WRITE_COMMANDS.UPDATE_GROUP_CHAT_NAME, parameters, {optimisticData}); } -function updateGroupChatAvatar(reportID: string, previousUrl: string, file?: File | CustomRNImageManipulatorResult) { +function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageManipulatorResult) { // If we have no file that means we are removing the avatar. const optimisticData: OnyxUpdate[] = [ { @@ -659,7 +659,7 @@ function updateGroupChatAvatar(reportID: string, previousUrl: string, file?: Fil onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, value: { - avatarUrl: previousUrl, + avatarUrl: currentReportData?.[reportID]?.avatarUrl, pendingFields: { avatar: null, }, diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index bd4249633756..1cbc98c80f27 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -238,9 +238,9 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD shouldDisableViewPhoto onImageRemoved={() => { // Calling this without a file will remove the avatar - Report.updateGroupChatAvatar(report.reportID ?? '', report.avatarUrl ?? ''); + Report.updateGroupChatAvatar(report.reportID ?? ''); }} - onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', report.avatarUrl ?? '', file)} + onImageSelected={(file) => Report.updateGroupChatAvatar(report.reportID ?? '', file)} editIcon={Expensicons.Camera} editIconStyle={styles.smallEditIconAccount} pendingAction={report?.pendingFields?.avatar ?? undefined} From 43c3c8ce774c0a83cbae383850a6930e6dd8db76 Mon Sep 17 00:00:00 2001 From: usman-ghani564 Date: Tue, 30 Apr 2024 20:54:56 +0500 Subject: [PATCH 4/5] clear errorFields --- src/libs/actions/Report.ts | 17 ++++++++++++++++- src/pages/ReportDetailsPage.tsx | 6 ++++-- 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index e93a01d9e6a9..bdf0b944e6b0 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -659,7 +659,7 @@ function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageMani onyxMethod: Onyx.METHOD.MERGE, key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, value: { - avatarUrl: currentReportData?.[reportID]?.avatarUrl, + avatarUrl: currentReportData?.[reportID]?.avatarUrl ?? null, pendingFields: { avatar: null, }, @@ -682,6 +682,20 @@ function updateGroupChatAvatar(reportID: string, file?: File | CustomRNImageMani 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, + }, + pendingFields: { + avatar: null, + }, + }); +} + /** * Gets the latest page of report actions and updates the last read message * If a chat with the passed reportID is not found, we will create a chat based on the passed participantList @@ -3708,4 +3722,5 @@ export { leaveGroupChat, removeFromGroupChat, updateGroupChatMemberRoles, + clearAvatarErrors, }; diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx index 1cbc98c80f27..2a3bef2cc662 100644 --- a/src/pages/ReportDetailsPage.tsx +++ b/src/pages/ReportDetailsPage.tsx @@ -243,8 +243,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} + pendingAction={report.pendingFields?.avatar ?? undefined} + errors={report.errorFields?.avatar ?? null} + errorRowStyles={styles.mt6} + onErrorClose={() => Report.clearAvatarErrors(report.reportID ?? '')} /> ) : ( Date: Thu, 2 May 2024 20:54:46 +0500 Subject: [PATCH 5/5] remove pendingFields --- src/libs/actions/Report.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 6c196890003f..aeaba9f312bc 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -693,9 +693,6 @@ function clearAvatarErrors(reportID: string) { errorFields: { avatar: null, }, - pendingFields: { - avatar: null, - }, }); }