[TS migration] Migrate 'withReportAndPrivateNotesOrNotFound.js' HOC to TypeScript

src/libs/actions/Report.ts

@@ -2566,7 +2566,7 @@ const updatePrivateNotes = (reportID: string, accountID: number, note: string) =
 };
 
 /** Fetches all the private notes for a given report */
-function getReportPrivateNote(reportID: string) {
+function getReportPrivateNote(reportID: string | undefined) {
     if (Session.isAnonymousUser()) {
         return;
     }

src/pages/PrivateNotes/PrivateNotesEditPage.tsx

@@ -22,6 +22,7 @@ import Navigation from '@libs/Navigation/Navigation';
 import type {PrivateNotesNavigatorParamList} from '@libs/Navigation/types';
 import * as ReportUtils from '@libs/ReportUtils';
 import updateMultilineInputRange from '@libs/updateMultilineInputRange';
+import type {WithReportAndPrivateNotesOrNotFoundProps} from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import * as ReportActions from '@userActions/Report';
 import CONST from '@src/CONST';
@@ -36,7 +37,8 @@ type PrivateNotesEditPageOnyxProps = {
     personalDetailsList: OnyxCollection<PersonalDetails>;
 };
 
-type PrivateNotesEditPageProps = PrivateNotesEditPageOnyxProps &
+type PrivateNotesEditPageProps = WithReportAndPrivateNotesOrNotFoundProps &
+    PrivateNotesEditPageOnyxProps &
     StackScreenProps<PrivateNotesNavigatorParamList, typeof SCREENS.PRIVATE_NOTES.EDIT> & {
         /** The report currently being looked at */
         report: Report;

src/pages/PrivateNotes/PrivateNotesListPage.tsx

@@ -1,7 +1,7 @@
 import React, {useMemo} from 'react';
 import {ScrollView} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
-import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
+import type {OnyxCollection} from 'react-native-onyx';
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
@@ -10,24 +10,23 @@ import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Navigation from '@libs/Navigation/Navigation';
+import type {WithReportAndPrivateNotesOrNotFoundProps} from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import withReportAndPrivateNotesOrNotFound from '@pages/home/report/withReportAndPrivateNotesOrNotFound';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {PersonalDetails, Report, Session} from '@src/types/onyx';
+import type {PersonalDetails, Report} from '@src/types/onyx';
 
 type PrivateNotesListPageOnyxProps = {
     /** All of the personal details for everyone */
     personalDetailsList: OnyxCollection<PersonalDetails>;
-
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<Session>;
 };
 
-type PrivateNotesListPageProps = PrivateNotesListPageOnyxProps & {
-    /** The report currently being looked at */
-    report: Report;
-};
+type PrivateNotesListPageProps = WithReportAndPrivateNotesOrNotFoundProps &
+    PrivateNotesListPageOnyxProps & {
+        /** The report currently being looked at */
+        report: Report;
+    };
 
 type NoteListItem = {
     title: string;
@@ -101,8 +100,5 @@ export default withReportAndPrivateNotesOrNotFound('privateNotes.title')(
         personalDetailsList: {
             key: ONYXKEYS.PERSONAL_DETAILS_LIST,
         },
-        session: {
-            key: ONYXKEYS.SESSION,
-        },
     })(PrivateNotesListPage),
 );

src/pages/ReportDescriptionPage.tsx

@@ -1,22 +1,14 @@
-import type {RouteProp} from '@react-navigation/native';
+import type {StackScreenProps} from '@react-navigation/stack';
 import React from 'react';
-import type {OnyxCollection} from 'react-native-onyx';
 import * as ReportUtils from '@libs/ReportUtils';
-import type * as OnyxTypes from '@src/types/onyx';
+import type {ReportDescriptionNavigatorParamList} from '@navigation/types';
+import type SCREENS from '@src/SCREENS';
+import type {WithReportOrNotFoundProps} from './home/report/withReportOrNotFound';
 import withReportOrNotFound from './home/report/withReportOrNotFound';
 import RoomDescriptionPage from './RoomDescriptionPage';
 import TaskDescriptionPage from './tasks/TaskDescriptionPage';
 
-type ReportDescriptionPageProps = {
-    /** The report currently being looked at */
-    report: OnyxTypes.Report;
-
-    /** Policy for the current report */
-    policies: OnyxCollection<OnyxTypes.Policy>;
-
-    /** Route params */
-    route: RouteProp<{params: {reportID: string}}>;
-};
+type ReportDescriptionPageProps = WithReportOrNotFoundProps & StackScreenProps<ReportDescriptionNavigatorParamList, typeof SCREENS.REPORT_DESCRIPTION_ROOT>;
 
 function ReportDescriptionPage(props: ReportDescriptionPageProps) {
     const isTask = ReportUtils.isTaskReport(props.report);

src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx

@@ -0,0 +1,102 @@
+import React, {useEffect, useMemo} from 'react';
+import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
+import type {OnyxEntry} from 'react-native-onyx';
+import {withOnyx} from 'react-native-onyx';
+import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
+import usePrevious from '@hooks/usePrevious';
+import * as Report from '@libs/actions/Report';
+import getComponentDisplayName from '@libs/getComponentDisplayName';
+import * as ReportUtils from '@libs/ReportUtils';
+import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
+import LoadingPage from '@pages/LoadingPage';
+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 withReportOrNotFound from './withReportOrNotFound';
+
+type WithReportAndPrivateNotesOrNotFoundOnyxProps = {
+    /** Session of currently logged in user */
+    session: OnyxEntry<OnyxTypes.Session>;
+};
+
+type WithReportAndPrivateNotesOrNotFoundProps = WithReportAndPrivateNotesOrNotFoundOnyxProps & WithReportOrNotFoundProps;
+
+export default function (pageTitle: TranslationPaths) {
+    // eslint-disable-next-line rulesdir/no-negated-variables
+    return <TProps extends WithReportAndPrivateNotesOrNotFoundProps, TRef>(
+        WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+    ): React.ComponentType<Omit<Omit<TProps, keyof WithReportAndPrivateNotesOrNotFoundOnyxProps> & RefAttributes<TRef>, keyof WithReportOrNotFoundOnyxProps>> => {
+        // eslint-disable-next-line rulesdir/no-negated-variables
+        function WithReportAndPrivateNotesOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
+            const {translate} = useLocalize();
+            const {isOffline} = useNetwork();
+            const {route, report, session} = props;
+            const accountID = ('accountID' in route.params && route.params.accountID) || '';
+            const isPrivateNotesFetchTriggered = report.isLoadingPrivateNotes !== undefined;
+            const prevIsOffline = usePrevious(isOffline);
+            const isReconnecting = prevIsOffline && !isOffline;
+            const isOtherUserNote = !!accountID && Number(session?.accountID) !== Number(accountID);
+            const isPrivateNotesFetchFinished = isPrivateNotesFetchTriggered && !report.isLoadingPrivateNotes;
+            const isPrivateNotesEmpty = accountID ? !report?.privateNotes?.[Number(accountID)]?.note : isEmptyObject(report?.privateNotes);
+
+            useEffect(() => {
+                // Do not fetch private notes if isLoadingPrivateNotes is already defined, or if network is offline.
+                if ((isPrivateNotesFetchTriggered && !isReconnecting) || isOffline) {
+                    return;
+                }
+
+                Report.getReportPrivateNote(report.reportID);
+                // eslint-disable-next-line react-hooks/exhaustive-deps -- do not add report.isLoadingPrivateNotes to dependencies
+            }, [report.reportID, isOffline, isPrivateNotesFetchTriggered, isReconnecting]);
+
+            const shouldShowFullScreenLoadingIndicator = !isPrivateNotesFetchFinished;
+
+            // eslint-disable-next-line rulesdir/no-negated-variables
+            const shouldShowNotFoundPage = useMemo(() => {
+                // Show not found view if the report is archived, or if the note is not of current user.
+                if (ReportUtils.isArchivedRoom(report) || isOtherUserNote) {
+                    return true;
+                }
+
+                // Don't show not found view if the notes are still loading, or if the notes are non-empty.
+                if (shouldShowFullScreenLoadingIndicator || !isPrivateNotesEmpty || isReconnecting) {
+                    return false;
+                }
+
+                // As notes being empty and not loading is a valid case, show not found view only in offline mode.
+                return isOffline;
+            }, [report, isOtherUserNote, shouldShowFullScreenLoadingIndicator, isPrivateNotesEmpty, isReconnecting, isOffline]);
+
+            if (shouldShowFullScreenLoadingIndicator) {
+                return <LoadingPage title={translate(pageTitle)} />;
+            }
+
+            if (shouldShowNotFoundPage) {
+                return <NotFoundPage />;
+            }
+
+            return (
+                <WrappedComponent
+                    // eslint-disable-next-line react/jsx-props-no-spreading
+                    {...props}
+                    ref={ref}
+                />
+            );
+        }
+
+        WithReportAndPrivateNotesOrNotFound.displayName = `withReportAndPrivateNotesOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
+
+        return withReportOrNotFound()(
+            withOnyx<TProps & RefAttributes<TRef>, WithReportAndPrivateNotesOrNotFoundOnyxProps>({
+                session: {
+                    key: ONYXKEYS.SESSION,
+                },
+            })(WithReportAndPrivateNotesOrNotFound),
+        );
+    };
+}
+
+export type {WithReportAndPrivateNotesOrNotFoundProps};

src/pages/home/report/withReportOrNotFound.tsx

@@ -7,9 +7,11 @@ import {withOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import * as ReportUtils from '@libs/ReportUtils';
+import type {PrivateNotesNavigatorParamList, ReportDescriptionNavigatorParamList} from '@navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
 import * as Report from '@userActions/Report';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
@@ -31,7 +33,7 @@ type WithReportOrNotFoundOnyxProps = {
 };
 
 type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & {
-    route: RouteProp<{params: {reportID: string}}>;
+    route: RouteProp<PrivateNotesNavigatorParamList, typeof SCREENS.PRIVATE_NOTES.EDIT> | RouteProp<ReportDescriptionNavigatorParamList, typeof SCREENS.REPORT_DESCRIPTION_ROOT>;
 
     /** The report currently being looked at */
     report: OnyxTypes.Report;
@@ -117,4 +119,4 @@ export default function (
     };
 }
 
-export type {WithReportOrNotFoundProps};
+export type {WithReportOrNotFoundProps, WithReportOrNotFoundOnyxProps};