diff --git a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx index 8df530f3c81c..2361d58dc2be 100644 --- a/src/pages/iou/request/step/withWritableReportOrNotFound.tsx +++ b/src/pages/iou/request/step/withWritableReportOrNotFound.tsx @@ -2,7 +2,7 @@ import type {RouteProp} from '@react-navigation/core'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {forwardRef, useEffect} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; @@ -18,9 +18,6 @@ type WithWritableReportOrNotFoundOnyxProps = { /** The report corresponding to the reportID in the route params */ report: OnyxEntry; - /** Whether the reports are loading. When false it means they are ready to be used. */ - isLoadingApp: OnyxEntry; - /** The draft report corresponding to the reportID in the route params */ reportDraft: OnyxEntry; }; @@ -54,13 +51,18 @@ export default function , keyof WithWritableReportOrNotFoundOnyxProps>> { // eslint-disable-next-line rulesdir/no-negated-variables - function WithWritableReportOrNotFound(props: TProps, ref: ForwardedRef) { - const {report = {reportID: ''}, route, isLoadingApp = true, reportDraft} = props; + function WithWritableReportOrNotFound(props: Omit, ref: ForwardedRef) { + const {route} = props; + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`); + const [isLoadingApp = true] = useOnyx(ONYXKEYS.IS_LOADING_APP); + const [reportDraft] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_DRAFT}${route.params.reportID ?? '-1'}`); + const iouTypeParamIsInvalid = !Object.values(CONST.IOU.TYPE) .filter((type) => shouldIncludeDeprecatedIOUType || (type !== CONST.IOU.TYPE.REQUEST && type !== CONST.IOU.TYPE.SEND)) .includes(route.params?.iouType); const isEditing = 'action' in route.params && route.params?.action === CONST.IOU.ACTION.EDIT; - const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report); + + const canUserPerformWriteAction = ReportUtils.canUserPerformWriteAction(report ?? {reportID: ''}); useEffect(() => { if (!!report?.reportID || !route.params.reportID || !!reportDraft || !isEditing) { @@ -81,7 +83,9 @@ export default function ); @@ -89,17 +93,7 @@ export default function , WithWritableReportOrNotFoundOnyxProps>({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '-1'}`, - }, - isLoadingApp: { - key: ONYXKEYS.IS_LOADING_APP, - }, - reportDraft: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT}${route.params.reportID ?? '-1'}`, - }, - })(forwardRef(WithWritableReportOrNotFound)); + return forwardRef(WithWritableReportOrNotFound); } export type {WithWritableReportOrNotFoundProps};