Merge pull request Expensify#88053 from DylanDylann/using-reportID-from-route

Using ReportID from route

Author: rlinoz

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) ?? [],
@@ -672,7 +670,7 @@ function MoneyRequestReportActionsList({reportID: reportIDProp, onLayout}: Money
             ref={wrapperViewRef}
         >
             <SelectionToolbar
-                reportID={report.reportID}
+                reportID={reportIDFromRoute}
                 transactions={transactions}
                 reportActions={reportActions}
             />

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,10 +50,10 @@ function ReportActionsList() {
     }
 
     if (shouldDisplayMoneyRequestActionsList) {
-        return <MoneyRequestReportActionsList reportID={report.reportID} />;
+        return <MoneyRequestReportActionsList />;
     }
 
-    return <ReportActionsView reportID={report.reportID} />;
+    return <ReportActionsView reportID={reportIDFromRoute} />;
 }
 
 export default ReportActionsList;

src/pages/inbox/report/ReportFooter.tsx

@@ -80,7 +80,7 @@ function ReportFooter() {
     const isSystemChat = isSystemChatUtil(report);
     const isAdminsOnlyPostingRoom = isAdminsOnlyPostingRoomUtil(report);
 
-    if (!isCurrentReportLoadedFromOnyx || !report) {
+    if (!isCurrentReportLoadedFromOnyx || !report || !reportIDFromRoute) {
         return null;
     }
 
@@ -91,7 +91,7 @@ function ReportFooter() {
         return (
             <View style={[chatFooterStyles, isComposerFullSize && styles.chatFooterFullCompose]}>
                 <SwipeableView onSwipeDown={Keyboard.dismiss}>
-                    <ReportActionCompose reportID={report.reportID} />
+                    <ReportActionCompose reportID={reportIDFromRoute} />
                 </SwipeableView>
             </View>
         );
@@ -101,7 +101,7 @@ function ReportFooter() {
     if (isArchivedRoom) {
         return (
             <View style={[styles.chatFooter, styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
-                <ArchivedReportFooter reportID={report.reportID} />
+                <ArchivedReportFooter reportID={reportIDFromRoute} />
                 {!shouldUseNarrowLayout && (
                     <View style={styles.offlineIndicatorContainer}>
                         <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />
@@ -115,7 +115,7 @@ function ReportFooter() {
     if (isAnonymousUser) {
         return (
             <View style={[styles.chatFooter, styles.mt4, shouldUseNarrowLayout && styles.mb5]}>
-                <AnonymousReportFooter reportID={report.reportID} />
+                <AnonymousReportFooter reportID={reportIDFromRoute} />
                 {!shouldUseNarrowLayout && (
                     <View style={styles.offlineIndicatorContainer}>
                         <OfflineIndicator containerStyles={[styles.chatItemComposeSecondaryRow]} />

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();