Merge pull request Expensify#94795 from thelullabyy/refactor-01/66378

Remove Onyx.connect() for the key: ONYXKEYS.COLLECTION.REPORT in src/libs/OptionsListUtils.ts (Part 1)

Author: danieldoglas

src/hooks/useSelectedExpenseReports.ts

@@ -0,0 +1,44 @@
+import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+
+import ONYXKEYS from '@src/ONYXKEYS';
+import type {Report} from '@src/types/onyx';
+
+import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+
+import useOnyx from './useOnyx';
+
+type PolicyExpenseParticipant = {
+    /** The report ID of the participant */
+    reportID?: string;
+
+    /** Whether the participant is a policy expense chat */
+    isPolicyExpenseChat?: boolean;
+};
+
+/**
+ * Resolves the expense reports for the policy expense chat participants without subscribing the consumer to the
+ * entire reports collection, so callers only re-render when one of the relevant reports changes.
+ *
+ * Returns a `getReportByID` resolver (rather than the raw reports collection) because it matches the resolver
+ * contract expected by `formatSectionsFromSearchTerm` and keeps the Onyx key construction encapsulated here
+ * instead of being duplicated at every call site.
+ */
+export default function useSelectedExpenseReports(participants: readonly PolicyExpenseParticipant[]) {
+    const expenseReportIDs = participants
+        .filter((participant): participant is PolicyExpenseParticipant & {reportID: string} => !!participant.isPolicyExpenseChat && !!participant.reportID)
+        .map((participant) => participant.reportID);
+
+    // React Compiler memoizes the selector on `expenseReportIDs`, so it re-runs whenever the set of relevant report IDs changes.
+    const [expenseReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {
+        selector: (reports: OnyxCollection<Report>) => {
+            const result: OnyxCollection<Report> = {};
+            for (const reportID of expenseReportIDs) {
+                const key = `${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportID)}` as const;
+                result[key] = reports?.[key];
+            }
+            return result;
+        },
+    });
+
+    return (reportID: string | undefined): OnyxEntry<Report> => expenseReports?.[`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(reportID)}`];
+}

src/libs/OptionsListUtils/index.ts

@@ -2977,6 +2977,9 @@ function formatSectionsFromSearchTerm(
     shouldGetOptionDetails = false,
     filteredWorkspaceChats: SearchOptionData[] = [],
     reportAttributesDerived?: ReportAttributesDerivedValue['reports'],
+    // Resolves a single report by ID instead of receiving the whole reports collection, so callers only subscribe to the reports they actually need.
+    // The default falls back to the module-level Onyx.connect() cache until every caller passes a resolver (tracked in https://github.com/Expensify/App/issues/66378).
+    getReportByID: (reportID: string | undefined) => OnyxEntry<Report> = (reportID) => allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`],
 ): SectionForSearchTerm {
     // We show the selected participants at the top of the list when there is no search term or maximum number of participants has already been selected
     // However, if there is a search term we remove the selected participants from the top of the list unless they are part of the search results
@@ -2990,8 +2993,7 @@ function formatSectionsFromSearchTerm(
                     ? selectedOptions.map((participant) => {
                           const isReportPolicyExpenseChat = participant.isPolicyExpenseChat ?? false;
                           if (isReportPolicyExpenseChat) {
-                              // TODO: This allReports usage is temporary and will be removed once the full Onyx.connect() refactor is complete (https://github.com/Expensify/App/issues/66378)
-                              const expenseReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${participant.reportID}`];
+                              const expenseReport = getReportByID(participant.reportID);
                               const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${expenseReport?.reportID}`];
                               const expenseReportPolicy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${expenseReport?.policyID}`];
                               return getPolicyExpenseReportOption(participant, privateIsArchived, personalDetails, expenseReport, expenseReportPolicy, reportAttributesDerived);
@@ -3023,8 +3025,7 @@ function formatSectionsFromSearchTerm(
                 ? selectedParticipantsWithoutDetails.map((participant) => {
                       const isReportPolicyExpenseChat = participant.isPolicyExpenseChat ?? false;
                       if (isReportPolicyExpenseChat) {
-                          // TODO: This allReports usage is temporary and will be removed once the full Onyx.connect() refactor is complete (https://github.com/Expensify/App/issues/66378)
-                          const expenseReport = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${participant.reportID}`];
+                          const expenseReport = getReportByID(participant.reportID);
                           const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${expenseReport?.reportID}`];
                           const expenseReportPolicy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${expenseReport?.policyID}`];
                           return getPolicyExpenseReportOption(participant, privateIsArchived, personalDetails, expenseReport, expenseReportPolicy, reportAttributesDerived);

src/pages/iou/request/ParticipantSearchResults.tsx

@@ -19,6 +19,7 @@ import usePrivateIsArchivedMap from '@hooks/usePrivateIsArchivedMap';
 import useReportAttributes from '@hooks/useReportAttributes';
 import useScreenWrapperTransitionStatus from '@hooks/useScreenWrapperTransitionStatus';
 import useSearchSelector from '@hooks/useSearchSelector';
+import useSelectedExpenseReports from '@hooks/useSelectedExpenseReports';
 import useUserToInviteReports from '@hooks/useUserToInviteReports';
 
 import {canUseTouchScreen} from '@libs/DeviceCapabilities';
@@ -172,6 +173,7 @@ function ParticipantSearchResults({
     // Policy and billing data — owned here, used for getValidOptionsConfig and billing gate in onSelectRow
     const [activePolicyID] = useOnyx(ONYXKEYS.NVP_ACTIVE_POLICY_ID);
     const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY);
+    const getReportByID = useSelectedExpenseReports(participants);
     const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${activePolicyID}`];
     const [userBillingGracePeriodEnds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_USER_BILLING_GRACE_PERIOD_END);
     const [ownerBillingGracePeriodEnd] = useOnyx(ONYXKEYS.NVP_PRIVATE_OWNER_BILLING_GRACE_PERIOD_END);
@@ -304,6 +306,7 @@ function ParticipantSearchResults({
             true,
             undefined,
             reportAttributesDerived,
+            getReportByID,
         );
         sections.push({...formatResults.section, sectionIndex: 0});
 

tests/unit/OptionsListUtilsTest.tsx

@@ -7905,6 +7905,62 @@ describe('OptionsListUtils', () => {
 
             expect(result.section.data).toHaveLength(0);
         });
+
+        it('should resolve the policy expense report through the getReportByID resolver instead of the module-level Onyx cache', () => {
+            // This report is intentionally NOT merged into Onyx, so it is only reachable through the resolver.
+            // If the function used the module-level Onyx.connect() cache, the report would not be found and
+            // private_isArchived would be undefined.
+            const resolverReportID = 'resolverOnlyReport1';
+            const resolverReport: Report = {
+                reportID: resolverReportID,
+                reportName: 'Resolver Workspace',
+                type: CONST.REPORT.TYPE.CHAT,
+                chatType: CONST.REPORT.CHAT_TYPE.POLICY_EXPENSE_CHAT,
+                policyID: formatTestPolicyID,
+                ownerAccountID: formatOwnerAccountID,
+                participants: {
+                    [formatOwnerAccountID]: {notificationPreference: CONST.REPORT.NOTIFICATION_PREFERENCE.ALWAYS},
+                },
+            };
+            const getReportByID = (reportID: string | undefined) => (reportID === resolverReportID ? resolverReport : undefined);
+
+            const privateIsArchivedMap: Record<string, boolean> = {
+                [`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${resolverReportID}`]: true,
+            };
+
+            const selectedOptions: SearchOptionData[] = [
+                {
+                    reportID: resolverReportID,
+                    keyForList: resolverReportID,
+                    isPolicyExpenseChat: true,
+                    selected: true,
+                    text: 'Resolver Workspace',
+                    alternateText: '',
+                    isSelected: true,
+                },
+            ];
+
+            const result = formatSectionsFromSearchTerm(
+                '',
+                selectedOptions,
+                [],
+                [],
+                privateIsArchivedMap,
+                CURRENT_USER_ACCOUNT_ID,
+                undefined,
+                translateLocal,
+                formatPersonalDetails,
+                true,
+                undefined,
+                undefined,
+                getReportByID,
+            );
+
+            expect(result.section.data).toHaveLength(1);
+
+            const option = result.section.data.at(0);
+            expect(option?.private_isArchived).toBe(true);
+        });
     });
 
     describe('getUserToInviteOption', () => {