diff --git a/src/pages/iou/request/step/IOURequestStepDate.tsx b/src/pages/iou/request/step/IOURequestStepDate.tsx index 2fea4c0d52e1..3a221b9a56db 100644 --- a/src/pages/iou/request/step/IOURequestStepDate.tsx +++ b/src/pages/iou/request/step/IOURequestStepDate.tsx @@ -176,8 +176,8 @@ const IOURequestStepDateWithOnyx = withOnyx; + /** 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; }; @@ -49,12 +54,27 @@ export default function , keyof WithWritableReportOrNotFoundOnyxProps>> { // eslint-disable-next-line rulesdir/no-negated-variables function WithWritableReportOrNotFound(props: TProps, ref: ForwardedRef) { - const {report = {reportID: ''}, route} = props; + const {report = {reportID: ''}, route, isLoadingApp = true} = props; 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); + useEffect(() => { + if (Boolean(report?.reportID) || !route.params.reportID) { + return; + } + + ReportActions.openReport(route.params.reportID); + + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + if (isEditing && isLoadingApp) { + return ; + } + if (iouTypeParamIsInvalid || !canUserPerformWriteAction) { return ; } @@ -74,6 +94,9 @@ export default function `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID ?? '0'}`, }, + isLoadingApp: { + key: ONYXKEYS.IS_LOADING_APP, + }, reportDraft: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_DRAFT}${route.params.reportID ?? '0'}`, },