From 089c0fa254aae4fbd86460aabf1d4df5729d6f6b Mon Sep 17 00:00:00 2001
From: Bernhard Owen Josephus <bernhard.josephus@gmail.com>
Date: Sat, 13 Jul 2024 10:45:10 +0800
Subject: [PATCH] add comment and restructure code to make it easier to read

---
 src/pages/ReportDetailsPage.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/pages/ReportDetailsPage.tsx b/src/pages/ReportDetailsPage.tsx
index 4f88efa2d334..031f2f9ebbdf 100644
--- a/src/pages/ReportDetailsPage.tsx
+++ b/src/pages/ReportDetailsPage.tsx
@@ -637,7 +637,9 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
         </OfflineWithFeedback>
     );
 
+    // A flag to indicate whether the user choose to delete the transaction or not
     const isTransactionDeleted = useRef<boolean>(false);
+    // Where to go back after deleting the transaction and its report. It's empty if the transaction report isn't deleted.
     const navigateBackToAfterDelete = useRef<Route>();
 
     const deleteTransaction = useCallback(() => {
@@ -750,10 +752,13 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                     onConfirm={deleteTransaction}
                     onCancel={() => setIsDeleteModalVisible(false)}
                     onModalHide={() => {
-                        if (isTransactionDeleted.current && !navigateBackToAfterDelete.current) {
-                            Navigation.dismissModal();
-                        } else {
-                            ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current);
+                        // We use isTransactionDeleted to know if the modal hides because the user deletes the transaction.
+                        if (isTransactionDeleted.current) {
+                            if (!navigateBackToAfterDelete.current) {
+                                Navigation.dismissModal();
+                            } else {
+                                ReportUtils.navigateBackAfterDeleteTransaction(navigateBackToAfterDelete.current);
+                            }
                         }
                     }}
                     prompt={caseID === CASES.DEFAULT ? translate('task.deleteConfirmation') : translate('iou.deleteConfirmation')}