Merge pull request #29768 from JKobrynski/migrateWithReportOrNotFoundToTypeScript

[No QA] [TS Migration] Migrate withReportOrNotFound.js to TypeScript

Author: cristipaval

src/libs/ReportUtils.js

@@ -3203,8 +3203,8 @@ function canSeeDefaultRoom(report, policies, betas) {
 
 /**
  * @param {Object} report
- * @param {Array<Object>} policies
- * @param {Array<String>} betas
+ * @param {Object | null} policies
+ * @param {Array<String> | null} betas
  * @param {Object} allReportActions
  * @returns {Boolean}
  */

src/pages/home/report/withReportOrNotFound.js

@@ -0,0 +1,89 @@
+/* eslint-disable rulesdir/no-negated-variables */
+import React, {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import {OnyxEntry, withOnyx} from 'react-native-onyx';
+import {RouteProp} from '@react-navigation/native';
+import getComponentDisplayName from '../../../libs/getComponentDisplayName';
+import NotFoundPage from '../../ErrorPage/NotFoundPage';
+import ONYXKEYS from '../../../ONYXKEYS';
+import FullscreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
+import * as ReportUtils from '../../../libs/ReportUtils';
+import * as OnyxTypes from '../../../types/onyx';
+
+type OnyxProps = {
+    /** The report currently being looked at */
+    report: OnyxEntry<OnyxTypes.Report>;
+    /** The policies which the user has access to */
+    policies: OnyxEntry<OnyxTypes.Policy>;
+    /** Beta features list */
+    betas: OnyxEntry<OnyxTypes.Beta[]>;
+    /** Indicated whether the report data is loading */
+    isLoadingReportData: OnyxEntry<boolean>;
+};
+
+type ComponentProps = OnyxProps & {
+    route: RouteProp<{params: {reportID: string}}>;
+};
+
+export default function (
+    shouldRequireReportID = true,
+): <TProps extends ComponentProps, TRef>(
+    WrappedComponent: React.ComponentType<TProps & React.RefAttributes<TRef>>,
+) => React.ComponentType<Omit<TProps & React.RefAttributes<TRef>, keyof OnyxProps>> {
+    return function <TProps extends ComponentProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>) {
+        function WithReportOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
+            const contentShown = React.useRef(false);
+
+            const isReportIdInRoute = props.route.params.reportID?.length;
+
+            if (shouldRequireReportID || isReportIdInRoute) {
+                const shouldShowFullScreenLoadingIndicator = props.isLoadingReportData && (!Object.entries(props.report ?? {}).length || !props.report?.reportID);
+
+                const shouldShowNotFoundPage =
+                    !Object.entries(props.report ?? {}).length || !props.report?.reportID || !ReportUtils.canAccessReport(props.report, props.policies, props.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.
+                if (shouldShowNotFoundPage && contentShown.current) {
+                    return null;
+                }
+
+                if (shouldShowFullScreenLoadingIndicator) {
+                    return <FullscreenLoadingIndicator />;
+                }
+
+                if (shouldShowNotFoundPage) {
+                    return <NotFoundPage />;
+                }
+            }
+
+            if (!contentShown.current) {
+                contentShown.current = true;
+            }
+
+            return (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={ref}
+                />
+            );
+        }
+
+        WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
+
+        return withOnyx<TProps & RefAttributes<TRef>, OnyxProps>({
+            report: {
+                key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`,
+            },
+            isLoadingReportData: {
+                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
+            },
+            betas: {
+                key: ONYXKEYS.BETAS,
+            },
+            policies: {
+                key: ONYXKEYS.COLLECTION.POLICY,
+            },
+        })(React.forwardRef(WithReportOrNotFound));
+    };
+}