diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index bcec153491c9..d41c1a9aaa63 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 [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState(CONST.EMPTY_ARRAY); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: currentMenuItemsFocusedIndex, maxIndex: currentMenuItems.length - 1, isActive: isVisible}); @@ -158,7 +158,7 @@ function PopoverMenu({ onPress={() => { setCurrentMenuItems(previousMenuItems); setFocusedIndex(-1); - enteredSubMenuIndexes.splice(-1); + setEnteredSubMenuIndexes((prevState) => prevState.slice(0, -1)); }} /> ); @@ -195,7 +195,7 @@ function PopoverMenu({ if (menuItems.length === 0) { return; } - setEnteredSubMenuIndexes([]); + setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY); setCurrentMenuItems(menuItems); }, [menuItems]); @@ -206,7 +206,7 @@ function PopoverMenu({ anchorAlignment={anchorAlignment} onClose={() => { setCurrentMenuItems(menuItems); - setEnteredSubMenuIndexes([]); + setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY); onClose(); }} isVisible={isVisible} diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 6535d35c55f9..d52f5d0ef077 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 {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Banner from '@components/Banner'; import BlockingView from '@components/BlockingViews/BlockingView'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -59,29 +59,18 @@ 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; +type ReportScreenNavigationProps = StackScreenProps; - /** The report metadata loading states */ - reportMetadata: OnyxEntry; -}; +type ReportScreenProps = CurrentReportIDContextValue & ReportScreenNavigationProps; -type OnyxHOCProps = { - /** Onyx function that marks the component ready for hydration */ - markReadyForHydration?: () => void; +const defaultReportMetadata = { + isLoadingInitialReportActions: true, + isLoadingOlderReportActions: false, + hasLoadingOlderReportActionsError: false, + isLoadingNewerReportActions: false, + hasLoadingNewerReportActionsError: false, }; -type ReportScreenNavigationProps = StackScreenProps; - -type ReportScreenProps = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxProps & ReportScreenNavigationProps; - /** Get the currently viewed report ID as number */ function getReportID(route: ReportScreenNavigationProps['route']): string { // The report ID is used in an onyx key. If it's an empty string, onyx will return @@ -110,22 +99,7 @@ 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. @@ -802,7 +771,6 @@ function ReportScreen({ {!shouldShowSkeleton && ( @@ -849,42 +817,4 @@ function ReportScreen({ } ReportScreen.displayName = 'ReportScreen'; - -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), - ), - ), -); +export default withCurrentReportID(memo(ReportScreen, (prevProps, nextProps) => prevProps.currentReportID === nextProps.currentReportID && lodashIsEqual(prevProps.route, nextProps.route)));