usign reportID from route

Author: DylanDylann

src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx

@@ -80,14 +80,11 @@ const DELAY_FOR_SCROLLING_TO_END = 100;
 const BACKFILL_MIN_ACTIONS_THRESHOLD = 50;
 
 type MoneyRequestReportListProps = {
-    /** The reportID of the report to display */
-    reportID: string | undefined;
-
     /** Callback executed on layout */
     onLayout?: (event: LayoutChangeEvent) => void;
 };
 
-function MoneyRequestReportActionsList({reportID: reportIDProp, onLayout}: MoneyRequestReportListProps) {
+function MoneyRequestReportActionsList({onLayout}: MoneyRequestReportListProps) {
     const styles = useThemeStyles();
     const {translate, getLocalDateFromDatetime} = useLocalize();
     const {isOffline, lastOfflineAt, lastOnlineAt} = useNetworkWithOfflineStatus();
@@ -97,18 +94,19 @@ function MoneyRequestReportActionsList({reportID: reportIDProp, onLayout}: Money
     const [isVisible, setIsVisible] = useState(Visibility.isVisible);
     const isFocused = useIsFocused();
     const route = useRoute<PlatformStackRouteProp<ReportsSplitNavigatorParamList, typeof SCREENS.REPORT>>();
+    const reportIDFromRoute = route.params.reportID;
 
     // Self-subscribe to report, policy, metadata, actions, transactions
     // report is guaranteed to exist — callers only render this component when report is loaded
-    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDProp}`) as unknown as [OnyxTypes.Report];
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`) as unknown as [OnyxTypes.Report];
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${getNonEmptyStringOnyxID(report?.policyID)}`);
-    const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDProp}`);
+    const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`);
     const reportID = report?.reportID;
 
     const {reportActions: unfilteredReportActions, hasNewerActions, hasOlderActions} = usePaginatedReportActions(reportID, route?.params?.reportActionID);
     const reportActions = useMemo(() => getFilteredReportActionsForReportView(unfilteredReportActions), [unfilteredReportActions]);
 
-    const allReportTransactions = useReportTransactionsCollection(reportIDProp);
+    const allReportTransactions = useReportTransactionsCollection(reportIDFromRoute);
     const reportTransactions = useMemo(() => getAllNonDeletedTransactions(allReportTransactions, reportActions, isOffline, true), [allReportTransactions, reportActions, isOffline]);
     const transactions = useMemo(
         () => reportTransactions?.filter((transaction) => isOffline || transaction.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE) ?? [],

src/components/MoneyRequestReportView/MoneyRequestReportView.tsx

@@ -273,10 +273,7 @@ function MoneyRequestReportView({report, reportMetadata, shouldDisplayReportFoot
                     )}
                     <View style={[styles.overflowHidden, styles.justifyContentEnd, styles.flex1]}>
                         {shouldDisplayMoneyRequestActionsList ? (
-                            <MoneyRequestReportActionsList
-                                reportID={reportID}
-                                onLayout={onLayout}
-                            />
+                            <MoneyRequestReportActionsList onLayout={onLayout} />
                         ) : (
                             <ReportActionsView
                                 reportID={reportID}

src/pages/inbox/ReportActionsList.tsx

@@ -50,7 +50,7 @@ function ReportActionsList() {
     }
 
     if (shouldDisplayMoneyRequestActionsList) {
-        return <MoneyRequestReportActionsList reportID={report.reportID} />;
+        return <MoneyRequestReportActionsList />;
     }
 
     return <ReportActionsView reportID={report.reportID} />;

tests/ui/MoneyRequestReportActionsListRejectModalTest.tsx

@@ -26,7 +26,9 @@ jest.mock('@react-navigation/native', () => ({
     useNavigationState: () => true,
     usePreventRemove: jest.fn(),
     useRoute: () => ({
-        params: {},
+        key: 'test-key',
+        name: 'Report' as never,
+        params: {reportID: FAKE_REPORT_ID},
     }),
 }));
 
@@ -194,7 +196,7 @@ const renderComponent = () => {
         <ComposeProviders components={[OnyxListItemProvider, LocaleContextProvider]}>
             <SearchContextProvider>
                 <ScreenWrapper testID="test">
-                    <MoneyRequestReportActionsList reportID={FAKE_REPORT_ID} />
+                    <MoneyRequestReportActionsList />
                 </ScreenWrapper>
             </SearchContextProvider>
         </ComposeProviders>,
@@ -210,17 +212,13 @@ describe('MoneyRequestReportActionsList - Reject Educational Modal', () => {
             keys: ONYXKEYS,
             evictableKeys: [ONYXKEYS.COLLECTION.REPORT_ACTIONS],
         });
-        jest.spyOn(NativeNavigation, 'useRoute').mockReturnValue({
-            key: 'test-key',
-            name: 'Report' as never,
-            params: {reportID: FAKE_REPORT_ID},
-        });
         jest.spyOn(NativeNavigation, 'useIsFocused').mockReturnValue(true);
         await TestHelper.signInWithTestUser(FAKE_ACCOUNT_ID, FAKE_EMAIL);
     });
 
     beforeEach(async () => {
         jest.clearAllMocks();
+        jest.spyOn(NativeNavigation, 'useIsFocused').mockReturnValue(true);
         await act(async () => {
             await Onyx.clear();
             await waitForBatchedUpdatesWithAct();