Migrate withWritableReportOrNotFound from withOnyx to useOnyx

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<Report>;
 
-    /** Whether the reports are loading. When false it means they are ready to be used. */
-    isLoadingApp: OnyxEntry<boolean>;
-
     /** The draft report corresponding to the reportID in the route params */
     reportDraft: OnyxEntry<Report>;
 };
@@ -54,13 +51,18 @@ export default function <TProps extends WithWritableReportOrNotFoundProps<MoneyR
     shouldIncludeDeprecatedIOUType = false,
 ): React.ComponentType<Omit<TProps & RefAttributes<TRef>, keyof WithWritableReportOrNotFoundOnyxProps>> {
     // eslint-disable-next-line rulesdir/no-negated-variables
-    function WithWritableReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
-        const {report = {reportID: ''}, route, isLoadingApp = true, reportDraft} = props;
+    function WithWritableReportOrNotFound(props: Omit<TProps, keyof WithWritableReportOrNotFoundOnyxProps>, ref: ForwardedRef<TRef>) {
+        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,25 +83,17 @@ export default function <TProps extends WithWritableReportOrNotFoundProps<MoneyR
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...(props as TProps)}
+                report={report}
+                reportDraft={reportDraft}
                 ref={ref}
             />
         );
     }
 
     WithWritableReportOrNotFound.displayName = `withWritableReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
-    return withOnyx<TProps & RefAttributes<TRef>, 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};