fix Home page Begin button behavior

src/pages/home/ForYouSection/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useCallback, useMemo} from 'react';
 import {View} from 'react-native';
 import ActivityIndicator from '@components/ActivityIndicator';
 import BaseWidgetItem from '@components/BaseWidgetItem';
@@ -15,7 +15,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import {accountIDSelector} from '@src/selectors/Session';
-import todosReportCountsSelector from '@src/selectors/Todos';
+import todosReportCountsSelector, {EMPTY_TODOS_SINGLE_REPORT_IDS, todosSingleReportIDsSelector} from '@src/selectors/Todos';
 import EmptyState from './EmptyState';
 
 function ForYouSection() {
@@ -26,6 +26,7 @@ function ForYouSection() {
     const [accountID] = useOnyx(ONYXKEYS.SESSION, {selector: accountIDSelector});
     const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const [reportCounts = CONST.EMPTY_TODOS_REPORT_COUNTS] = useOnyx(ONYXKEYS.DERIVED.TODOS, {selector: todosReportCountsSelector});
+    const [singleReportIDs = EMPTY_TODOS_SINGLE_REPORT_IDS] = useOnyx(ONYXKEYS.DERIVED.TODOS, {selector: todosSingleReportIDsSelector});
 
     const icons = useMemoizedLazyExpensifyIcons(['MoneyBag', 'Send', 'ThumbsUp', 'Export']);
 
@@ -36,48 +37,72 @@ function ForYouSection() {
 
     const hasAnyTodos = submitCount > 0 || approveCount > 0 || payCount > 0 || exportCount > 0;
 
-    const createNavigationHandler = (action: string, queryParams: Record<string, unknown>) => () => {
-        Navigation.navigate(
-            ROUTES.SEARCH_ROOT.getRoute({
-                query: buildQueryStringFromFilterFormValues({
-                    type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT,
-                    action,
-                    ...queryParams,
-                }),
-            }),
-        );
-    };
+    const createNavigationHandler = useCallback(
+        (action: string, queryParams: Record<string, unknown>, reportID?: string) => () => {
+            if (reportID) {
+                if (shouldUseNarrowLayout) {
+                    Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(reportID));
+                } else {
+                    Navigation.navigate(ROUTES.EXPENSE_REPORT_RHP.getRoute({reportID}));
+                }
+                return;
+            }
 
-    const todoItems = [
-        {
-            key: 'submit',
-            count: submitCount,
-            icon: icons.Send,
-            translationKey: 'homePage.forYouSection.submit' as const,
-            handler: createNavigationHandler(CONST.SEARCH.ACTION_FILTERS.SUBMIT, {from: [`${accountID}`]}),
-        },
-        {
-            key: 'approve',
-            count: approveCount,
-            icon: icons.ThumbsUp,
-            translationKey: 'homePage.forYouSection.approve' as const,
-            handler: createNavigationHandler(CONST.SEARCH.ACTION_FILTERS.APPROVE, {to: [`${accountID}`]}),
-        },
-        {
-            key: 'pay',
-            count: payCount,
-            icon: icons.MoneyBag,
-            translationKey: 'homePage.forYouSection.pay' as const,
-            handler: createNavigationHandler(CONST.SEARCH.ACTION_FILTERS.PAY, {reimbursable: CONST.SEARCH.BOOLEAN.YES, payer: accountID?.toString()}),
-        },
-        {
-            key: 'export',
-            count: exportCount,
-            icon: icons.Export,
-            translationKey: 'homePage.forYouSection.export' as const,
-            handler: createNavigationHandler(CONST.SEARCH.ACTION_FILTERS.EXPORT, {exporter: [`${accountID}`], exportedOn: CONST.SEARCH.DATE_PRESETS.NEVER}),
+            Navigation.navigate(
+                ROUTES.SEARCH_ROOT.getRoute({
+                    query: buildQueryStringFromFilterFormValues({
+                        type: CONST.SEARCH.DATA_TYPES.EXPENSE_REPORT,
+                        action,
+                        ...queryParams,
+                    }),
+                }),
+            );
         },
-    ].filter((item) => item.count > 0);
+        [shouldUseNarrowLayout],
+    );
+
+    const todoItems = useMemo(
+        () =>
+            [
+                {
+                    key: 'submit',
+                    count: submitCount,
+                    icon: icons.Send,
+                    translationKey: 'homePage.forYouSection.submit' as const,
+                    handler: createNavigationHandler(CONST.SEARCH.ACTION_FILTERS.SUBMIT, {from: [`${accountID}`]}, singleReportIDs[CONST.SEARCH.SEARCH_KEYS.SUBMIT]),
+                },
+                {
+                    key: 'approve',
+                    count: approveCount,
+                    icon: icons.ThumbsUp,
+                    translationKey: 'homePage.forYouSection.approve' as const,
+                    handler: createNavigationHandler(CONST.SEARCH.ACTION_FILTERS.APPROVE, {to: [`${accountID}`]}, singleReportIDs[CONST.SEARCH.SEARCH_KEYS.APPROVE]),
+                },
+                {
+                    key: 'pay',
+                    count: payCount,
+                    icon: icons.MoneyBag,
+                    translationKey: 'homePage.forYouSection.pay' as const,
+                    handler: createNavigationHandler(
+                        CONST.SEARCH.ACTION_FILTERS.PAY,
+                        {reimbursable: CONST.SEARCH.BOOLEAN.YES, payer: accountID?.toString()},
+                        singleReportIDs[CONST.SEARCH.SEARCH_KEYS.PAY],
+                    ),
+                },
+                {
+                    key: 'export',
+                    count: exportCount,
+                    icon: icons.Export,
+                    translationKey: 'homePage.forYouSection.export' as const,
+                    handler: createNavigationHandler(
+                        CONST.SEARCH.ACTION_FILTERS.EXPORT,
+                        {exporter: [`${accountID}`], exportedOn: CONST.SEARCH.DATE_PRESETS.NEVER},
+                        singleReportIDs[CONST.SEARCH.SEARCH_KEYS.EXPORT],
+                    ),
+                },
+            ].filter((item) => item.count > 0),
+        [accountID, approveCount, createNavigationHandler, exportCount, icons.Export, icons.MoneyBag, icons.Send, icons.ThumbsUp, payCount, singleReportIDs, submitCount],
+    );
 
     const renderTodoItems = () => (
         <View style={styles.getForYouSectionContainerStyle(shouldUseNarrowLayout)}>

src/selectors/Todos.ts

@@ -1,7 +1,15 @@
+import {shallowEqual} from 'fast-equals';
 import type {OnyxEntry} from 'react-native-onyx';
 import CONST from '@src/CONST';
 import type {TodosDerivedValue} from '@src/types/onyx';
 
+const EMPTY_TODOS_SINGLE_REPORT_IDS = Object.freeze({
+    submit: undefined,
+    approve: undefined,
+    pay: undefined,
+    export: undefined,
+});
+
 const todosReportCountsSelector = (todos: OnyxEntry<TodosDerivedValue>) => {
     if (!todos) {
         return CONST.EMPTY_TODOS_REPORT_COUNTS;
@@ -15,4 +23,44 @@ const todosReportCountsSelector = (todos: OnyxEntry<TodosDerivedValue>) => {
     };
 };
 
+type SingleReportIDs = {
+    [CONST.SEARCH.SEARCH_KEYS.SUBMIT]: string | undefined;
+    [CONST.SEARCH.SEARCH_KEYS.APPROVE]: string | undefined;
+    [CONST.SEARCH.SEARCH_KEYS.PAY]: string | undefined;
+    [CONST.SEARCH.SEARCH_KEYS.EXPORT]: string | undefined;
+};
+
+let previousSingleReportIDs: SingleReportIDs = EMPTY_TODOS_SINGLE_REPORT_IDS as SingleReportIDs;
+
+const todosSingleReportIDsSelector = (todos: OnyxEntry<TodosDerivedValue>) => {
+    if (!todos) {
+        return EMPTY_TODOS_SINGLE_REPORT_IDS;
+    }
+
+    const submitReportID = todos.reportsToSubmit.length === 1 ? todos.reportsToSubmit.at(0)?.reportID : undefined;
+    const approveReportID = todos.reportsToApprove.length === 1 ? todos.reportsToApprove.at(0)?.reportID : undefined;
+    const payReportID = todos.reportsToPay.length === 1 ? todos.reportsToPay.at(0)?.reportID : undefined;
+    const exportReportID = todos.reportsToExport.length === 1 ? todos.reportsToExport.at(0)?.reportID : undefined;
+
+    if (!submitReportID && !approveReportID && !payReportID && !exportReportID) {
+        previousSingleReportIDs = EMPTY_TODOS_SINGLE_REPORT_IDS;
+        return EMPTY_TODOS_SINGLE_REPORT_IDS;
+    }
+
+    const newValue = {
+        [CONST.SEARCH.SEARCH_KEYS.SUBMIT]: submitReportID,
+        [CONST.SEARCH.SEARCH_KEYS.APPROVE]: approveReportID,
+        [CONST.SEARCH.SEARCH_KEYS.PAY]: payReportID,
+        [CONST.SEARCH.SEARCH_KEYS.EXPORT]: exportReportID,
+    };
+
+    if (shallowEqual(previousSingleReportIDs, newValue)) {
+        return previousSingleReportIDs;
+    }
+
+    previousSingleReportIDs = newValue;
+    return newValue;
+};
+
 export default todosReportCountsSelector;
+export {todosSingleReportIDsSelector, EMPTY_TODOS_SINGLE_REPORT_IDS};