diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index e6ba4858ad8b..2271391b65bc 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -14,7 +14,7 @@ import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import type {WithReportOrNotFoundOnyxProps, WithReportOrNotFoundProps} from './withReportOrNotFound'; +import type {WithReportOrNotFoundProps} from './withReportOrNotFound'; import withReportOrNotFound from './withReportOrNotFound'; type WithReportAndPrivateNotesOrNotFoundOnyxProps = { @@ -28,7 +28,7 @@ export default function (pageTitle: TranslationPaths) { // eslint-disable-next-line rulesdir/no-negated-variables return ( WrappedComponent: ComponentType>, - ): React.ComponentType & RefAttributes, keyof WithReportOrNotFoundOnyxProps>> => { + ): React.ComponentType & RefAttributes> => { // eslint-disable-next-line rulesdir/no-negated-variables function WithReportAndPrivateNotesOrNotFound(props: TProps, ref: ForwardedRef) { const {translate} = useLocalize(); diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index 7947ab0a04b4..8c0f4acbbe39 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -2,8 +2,8 @@ import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect} from 'react'; +import {useOnyx} from 'react-native-onyx'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as ReportUtils from '@libs/ReportUtils'; @@ -22,24 +22,7 @@ import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type WithReportOrNotFoundOnyxProps = { - /** The report currently being looked at */ - report: OnyxEntry; - - /** Metadata of the report currently being looked at */ - reportMetadata: OnyxEntry; - - /** The policies which the user has access to */ - policies: OnyxCollection; - - /** Beta features list */ - betas: OnyxEntry; - - /** Indicated whether the report data is loading */ - isLoadingReportData: OnyxEntry; -}; - -type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { +type WithReportOrNotFoundProps = { route: | RouteProp | RouteProp @@ -53,21 +36,36 @@ type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { /** The report currently being looked at */ report: OnyxTypes.Report; + + /** Metadata of the report currently being looked at */ + reportMetadata: OnyxEntry; + + /** The policies which the user has access to */ + policies: OnyxCollection; + + /** Beta features list */ + betas: OnyxEntry; + + /** Indicated whether the report data is loading */ + isLoadingReportData: OnyxEntry; }; export default function ( shouldRequireReportID = true, -): ( - WrappedComponent: React.ComponentType>, -) => React.ComponentType, keyof WithReportOrNotFoundOnyxProps>> { +): (WrappedComponent: React.ComponentType>) => React.ComponentType> { return function (WrappedComponent: ComponentType>) { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { + const [betas] = useOnyx(ONYXKEYS.BETAS); + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); + const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); const contentShown = React.useRef(false); const isReportIdInRoute = !!props.route.params.reportID?.length; - const isReportLoaded = !isEmptyObject(props.report) && !!props.report?.reportID; + const isReportLoaded = !isEmptyObject(report) && !!report?.reportID; // The `isLoadingInitialReportActions` value will become `false` only after the first OpenReport API call is finished (either succeeded or failed) - const shouldFetchReport = isReportIdInRoute && props.reportMetadata?.isLoadingInitialReportActions !== false; + const shouldFetchReport = isReportIdInRoute && reportMetadata?.isLoadingInitialReportActions !== false; // When accessing certain report-dependant pages (e.g. Task Title) by deeplink, the OpenReport API is not called, // So we need to call OpenReport API here to make sure the report data is loaded if it exists on the Server @@ -82,8 +80,8 @@ export default function ( }, [shouldFetchReport, isReportLoaded, props.route.params.reportID]); if (shouldRequireReportID || isReportIdInRoute) { - const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (props.isLoadingReportData !== false || shouldFetchReport); - const shouldShowNotFoundPage = !isReportLoaded || !ReportUtils.canAccessReport(props.report, props.policies, props.betas); + const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (isLoadingReportData !== false || shouldFetchReport); + const shouldShowNotFoundPage = !isReportLoaded || !ReportUtils.canAccessReport(report, policies, betas); // If the content was shown, but it's not anymore, that means the report was deleted, and we are probably navigating out of this screen. // Return null for this case to avoid rendering FullScreenLoadingIndicator or NotFoundPage when animating transition. @@ -108,6 +106,11 @@ export default function ( ); @@ -115,24 +118,8 @@ export default function ( WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`; - return withOnyx, WithReportOrNotFoundOnyxProps>({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, - }, - reportMetadata: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`, - }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, - betas: { - key: ONYXKEYS.BETAS, - }, - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - }, - })(React.forwardRef(WithReportOrNotFound)); + return React.forwardRef(WithReportOrNotFound); }; } -export type {WithReportOrNotFoundProps, WithReportOrNotFoundOnyxProps}; +export type {WithReportOrNotFoundProps};