Merge pull request #37930 from Expensify/arosiclair-offline-request-fix

[No QA] Fix optimistic reports getting cleared by unnecessary OpenReport calls

src/libs/ReportUtils.ts

@@ -4212,6 +4212,10 @@ function canAccessReport(report: OnyxEntry<Report>, policies: OnyxCollection<Pol
         return false;
     }
 
+    if (report?.errorFields?.notFound) {
+        return false;
+    }
+
     return true;
 }
 

src/libs/actions/IOU.ts

@@ -631,6 +631,7 @@ function buildOnyxDataForMoneyRequest(
             value: {
                 pendingFields: null,
                 errorFields: null,
+                isOptimisticReport: false,
             },
         });
     }

src/libs/actions/Report.ts

@@ -578,6 +578,15 @@ function openReport(
     ];
 
     const successData: OnyxUpdate[] = [
+        {
+            onyxMethod: Onyx.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
+            value: {
+                errorFields: {
+                    notFound: null,
+                },
+            },
+        },
         {
             onyxMethod: Onyx.METHOD.MERGE,
             key: `${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`,

src/libs/shouldFetchReport.ts

@@ -0,0 +1,7 @@
+import type Report from '@src/types/onyx/Report';
+
+export default function shouldFetchReport(report: Report) {
+    // If the report is optimistic, there's no need to fetch it. The original action should create it.
+    // If there is an error for creating the chat, there's no need to fetch it since it doesn't exist
+    return !report?.isOptimisticReport && !report?.errorFields?.createChat;
+}

src/pages/home/ReportScreen.tsx

@@ -37,6 +37,7 @@ import Performance from '@libs/Performance';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
+import shouldFetchReport from '@libs/shouldFetchReport';
 import type {CentralPaneNavigatorParamList} from '@navigation/types';
 import variables from '@styles/variables';
 import * as ComposerActions from '@userActions/Composer';
@@ -263,7 +264,11 @@ function ReportScreen({
     // There are no reportActions at all to display and we are still in the process of loading the next set of actions.
     const isLoadingInitialReportActions = reportActions.length === 0 && !!reportMetadata?.isLoadingInitialReportActions;
     const isOptimisticDelete = report.statusNum === CONST.REPORT.STATUS_NUM.CLOSED;
-    const shouldHideReport = !ReportUtils.canAccessReport(report, policies, betas);
+
+    // If there's a non-404 error for the report we should show it instead of blocking the screen
+    const hasHelpfulErrors = Object.keys(report?.errorFields ?? {}).some((key) => key !== 'notFound');
+    const shouldHideReport = !hasHelpfulErrors && !ReportUtils.canAccessReport(report, policies, betas);
+
     const isLoading = !reportIDFromRoute || !isSidebarLoaded || PersonalDetailsUtils.isPersonalDetailsEmpty();
     const lastReportAction: OnyxEntry<OnyxTypes.ReportAction> = useMemo(
         () =>
@@ -356,8 +361,12 @@ function ReportScreen({
             return;
         }
 
+        if (!shouldFetchReport(report)) {
+            return;
+        }
+
         fetchReport();
-    }, [report.reportID, reportMetadata?.isLoadingInitialReportActions, fetchReport, reportIDFromRoute]);
+    }, [report, reportMetadata?.isLoadingInitialReportActions, fetchReport, reportIDFromRoute]);
 
     const dismissBanner = useCallback(() => {
         setIsBannerVisible(false);

src/pages/home/report/ReportActionsView.tsx

@@ -17,14 +17,14 @@ import Performance from '@libs/Performance';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import {isUserCreatedPolicyRoom} from '@libs/ReportUtils';
 import {didUserLogInDuringSession} from '@libs/SessionUtils';
+import shouldFetchReport from '@libs/shouldFetchReport';
 import {ReactionListContext} from '@pages/home/ReportScreenContext';
 import * as Report from '@userActions/Report';
 import Timing from '@userActions/Timing';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
-import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import getInitialPaginationSize from './getInitialPaginationSize';
 import PopoverReactionList from './ReactionList/PopoverReactionList';
 import ReportActionsList from './ReportActionsList';
@@ -113,15 +113,21 @@ function ReportActionsView({
     const isReportFullyVisible = useMemo((): boolean => getIsReportFullyVisible(isFocused), [isFocused]);
 
     const openReportIfNecessary = () => {
-        const createChatError = report.errorFields?.createChat;
-        // If the report is optimistic (AKA not yet created) we don't need to call openReport again
-        if (!!report.isOptimisticReport || !isEmptyObject(createChatError)) {
+        if (!shouldFetchReport(report)) {
             return;
         }
 
         Report.openReport(reportID, reportActionID);
     };
 
+    const reconnectReportIfNecessary = () => {
+        if (!shouldFetchReport(report)) {
+            return;
+        }
+
+        Report.reconnect(reportID);
+    };
+
     useLayoutEffect(() => {
         setCurrentReportActionID('');
     }, [route]);
@@ -223,7 +229,7 @@ function ReportActionsView({
             if (isReportFullyVisible) {
                 openReportIfNecessary();
             } else {
-                Report.reconnect(reportID);
+                reconnectReportIfNecessary();
             }
         }
         // update ref with current network state
@@ -237,7 +243,7 @@ function ReportActionsView({
             if (isReportFullyVisible) {
                 openReportIfNecessary();
             } else {
-                Report.reconnect(reportID);
+                reconnectReportIfNecessary();
             }
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps