diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 78b780c19844..a298aa6edf00 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -110,7 +110,7 @@ function PopoverMenu({ const [currentMenuItems, setCurrentMenuItems] = useState(menuItems); const currentMenuItemsFocusedIndex = currentMenuItems?.findIndex((option) => option.isSelected); - const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState(CONST.EMPTY_ARRAY); + const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState([]); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible}); @@ -158,7 +158,11 @@ function PopoverMenu({ onPress={() => { setCurrentMenuItems(previousMenuItems); setFocusedIndex(-1); +<<<<<<< HEAD setEnteredSubMenuIndexes(enteredSubMenuIndexes.slice(0, -1)); +======= + enteredSubMenuIndexes.splice(-1); +>>>>>>> 0560908 (Merge pull request #45674 from Expensify/vit-revert44724) }} /> ); @@ -188,7 +192,7 @@ function PopoverMenu({ if (menuItems.length === 0) { return; } - setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY); + setEnteredSubMenuIndexes([]); setCurrentMenuItems(menuItems); }, [menuItems]); @@ -199,7 +203,7 @@ function PopoverMenu({ anchorAlignment={anchorAlignment} onClose={() => { setCurrentMenuItems(menuItems); - setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY); + setEnteredSubMenuIndexes([]); onClose(); }} isVisible={isVisible} diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 49897928ffe9..d3ca56b95a71 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -5,8 +5,8 @@ import lodashIsEqual from 'lodash/isEqual'; import React, {memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react'; import type {FlatList, ViewStyle} from 'react-native'; import {InteractionManager, View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx} from 'react-native-onyx'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import Banner from '@components/Banner'; import BlockingView from '@components/BlockingViews/BlockingView'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -59,9 +59,28 @@ import ReportFooter from './report/ReportFooter'; import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext'; import {ActionListContext, ReactionListContext} from './ReportScreenContext'; +type ReportScreenOnyxProps = { + /** Tells us if the sidebar has rendered */ + isSidebarLoaded: OnyxEntry; + + /** Beta features list */ + betas: OnyxEntry; + + /** The policies which the user has access to */ + policies: OnyxCollection; + + /** The report metadata loading states */ + reportMetadata: OnyxEntry; +}; + +type OnyxHOCProps = { + /** Onyx function that marks the component ready for hydration */ + markReadyForHydration?: () => void; +}; + type ReportScreenNavigationProps = StackScreenProps; -type ReportScreenProps = CurrentReportIDContextValue & ReportScreenNavigationProps; +type ReportScreenProps = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxProps & ReportScreenNavigationProps; /** Get the currently viewed report ID as number */ function getReportID(route: ReportScreenNavigationProps['route']): string { @@ -91,7 +110,22 @@ function getParentReportAction(parentReportActions: OnyxEntry { + if (!markReadyForHydration) { + return; + } + + markReadyForHydration(); + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, []); + const actionListValue = useMemo((): ActionListContextType => ({flatListRef, scrollPosition, setScrollPosition}), [flatListRef, scrollPosition, setScrollPosition]); // This helps in tracking from the moment 'route' triggers useMemo until isLoadingInitialReportActions becomes true. It prevents blinking when loading reportActions from cache. @@ -725,6 +756,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro {shouldShowReportActionList && ( @@ -771,4 +803,42 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro } ReportScreen.displayName = 'ReportScreen'; -export default withCurrentReportID(memo(ReportScreen, (prevProps, nextProps) => prevProps.currentReportID === nextProps.currentReportID && lodashIsEqual(prevProps.route, nextProps.route))); + +export default withCurrentReportID( + withOnyx( + { + isSidebarLoaded: { + key: ONYXKEYS.IS_SIDEBAR_LOADED, + }, + reportMetadata: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, + initialValue: { + isLoadingInitialReportActions: true, + isLoadingOlderReportActions: false, + hasLoadingOlderReportActionsError: false, + isLoadingNewerReportActions: false, + hasLoadingNewerReportActionsError: false, + }, + }, + betas: { + key: ONYXKEYS.BETAS, + }, + policies: { + key: ONYXKEYS.COLLECTION.POLICY, + allowStaleData: true, + }, + }, + true, + )( + memo( + ReportScreen, + (prevProps, nextProps) => + prevProps.isSidebarLoaded === nextProps.isSidebarLoaded && + lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) && + lodashIsEqual(prevProps.betas, nextProps.betas) && + lodashIsEqual(prevProps.policies, nextProps.policies) && + prevProps.currentReportID === nextProps.currentReportID && + lodashIsEqual(prevProps.route, nextProps.route), + ), + ), +); diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 34b0eecf7b35..b8ff8b690d8e 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -271,9 +271,7 @@ function ReportActionsList({ const isFromNotification = route?.params?.referrer === CONST.REFERRER.NOTIFICATION; if ((Visibility.isVisible() || isFromNotification) && scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD) { Report.readNewestAction(report.reportID); - if (isFromNotification) { - Navigation.setParams({referrer: undefined}); - } + Navigation.setParams({referrer: undefined}); } else { readActionSkipped.current = true; }