Merge pull request #49238 from nkdengineer/fix/49106

Migrate withReportAndPrivateNotesOrNotFound from withOnyx to useOnyx
Expensify · Oct 22, 2024 · 65b739d · 65b739d
2 parents 7654693 + 021c725
commit 65b739d
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 45 deletions.
diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts
@@ -4112,11 +4112,11 @@ function navigateBackAfterDeleteTransaction(backRoute: Route | undefined, isFrom
 /**
  * Go back to the previous page from the edit private page of a given report
  */
-function goBackFromPrivateNotes(report: OnyxEntry<Report>, session: OnyxEntry<Session>, backTo?: string) {
-    if (isEmpty(report) || isEmpty(session) || !session.accountID) {
+function goBackFromPrivateNotes(report: OnyxEntry<Report>, accountID?: number, backTo?: string) {
+    if (isEmpty(report) || !accountID) {
         return;
     }
-    const currentUserPrivateNote = report.privateNotes?.[session.accountID]?.note ?? '';
+    const currentUserPrivateNote = report.privateNotes?.[accountID]?.note ?? '';
     if (isEmpty(currentUserPrivateNote)) {
         const participantAccountIDs = getParticipantsAccountIDsForDisplay(report);
 

diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx
@@ -4,8 +4,7 @@ import {Str} from 'expensify-common';
 import lodashDebounce from 'lodash/debounce';
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 import {Keyboard} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
@@ -31,25 +30,20 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import INPUT_IDS from '@src/types/form/PrivateNotesForm';
-import type {PersonalDetailsList, Report} from '@src/types/onyx';
+import type {Report} from '@src/types/onyx';
 import type {Note} from '@src/types/onyx/Report';
 
-type PrivateNotesEditPageOnyxProps = {
-    /** All of the personal details for everyone */
-    personalDetailsList: OnyxEntry<PersonalDetailsList>;
-};
-
 type PrivateNotesEditPageProps = WithReportAndPrivateNotesOrNotFoundProps &
-    PrivateNotesEditPageOnyxProps &
     StackScreenProps<PrivateNotesNavigatorParamList, typeof SCREENS.PRIVATE_NOTES.EDIT> & {
         /** The report currently being looked at */
         report: Report;
     };
 
-function PrivateNotesEditPage({route, personalDetailsList, report, session}: PrivateNotesEditPageProps) {
+function PrivateNotesEditPage({route, report, accountID}: PrivateNotesEditPageProps) {
     const backTo = route.params.backTo;
     const styles = useThemeStyles();
     const {translate} = useLocalize();
+    const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 
     // We need to edit the note in markdown format, but display it in HTML format
     const [privateNote, setPrivateNote] = useState(
@@ -117,7 +111,7 @@ function PrivateNotesEditPage({route, personalDetailsList, report, session}: Pri
         >
             <HeaderWithBackButton
                 title={translate('privateNotes.title')}
-                onBackButtonPress={() => ReportUtils.goBackFromPrivateNotes(report, session, backTo)}
+                onBackButtonPress={() => ReportUtils.goBackFromPrivateNotes(report, accountID, backTo)}
                 shouldShowBackButton
                 onCloseButtonPress={() => Navigation.dismissModal()}
             />
@@ -178,10 +172,4 @@ function PrivateNotesEditPage({route, personalDetailsList, report, session}: Pri
 
 PrivateNotesEditPage.displayName = 'PrivateNotesEditPage';
 
-export default withReportAndPrivateNotesOrNotFound('privateNotes.title')(
-    withOnyx<PrivateNotesEditPageProps, PrivateNotesEditPageOnyxProps>({
-        personalDetailsList: {
-            key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-        },
-    })(PrivateNotesEditPage),
-);
+export default withReportAndPrivateNotesOrNotFound('privateNotes.title')(PrivateNotesEditPage);
diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.tsx b/src/pages/PrivateNotes/PrivateNotesListPage.tsx
@@ -36,7 +36,7 @@ type NoteListItem = {
     accountID: string;
 };
 
-function PrivateNotesListPage({report, session}: PrivateNotesListPageProps) {
+function PrivateNotesListPage({report, accountID: sessionAccountID}: PrivateNotesListPageProps) {
     const route = useRoute<RouteProp<PrivateNotesNavigatorParamList, typeof SCREENS.PRIVATE_NOTES.LIST>>();
     const backTo = route.params.backTo;
     const [personalDetailsList] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
@@ -76,14 +76,14 @@ function PrivateNotesListPage({report, session}: PrivateNotesListPageProps) {
             return {
                 reportID: report.reportID,
                 accountID,
-                title: Number(session?.accountID) === Number(accountID) ? translate('privateNotes.myNote') : personalDetailsList?.[accountID]?.login ?? '',
+                title: Number(sessionAccountID) === Number(accountID) ? translate('privateNotes.myNote') : personalDetailsList?.[accountID]?.login ?? '',
                 action: () => Navigation.navigate(ROUTES.PRIVATE_NOTES_EDIT.getRoute(report.reportID, accountID, backTo)),
                 brickRoadIndicator: privateNoteBrickRoadIndicator(Number(accountID)),
                 note: privateNote?.note ?? '',
-                disabled: Number(session?.accountID) !== Number(accountID),
+                disabled: Number(sessionAccountID) !== Number(accountID),
             };
         });
-    }, [report, personalDetailsList, session, translate, backTo]);
+    }, [report, personalDetailsList, sessionAccountID, translate, backTo]);
 
     return (
         <ScreenWrapper

diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx
@@ -1,7 +1,6 @@
 import React, {useEffect, useMemo} from 'react';
 import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
-import type {OnyxEntry} from 'react-native-onyx';
-import {useOnyx, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import usePrevious from '@hooks/usePrevious';
@@ -12,31 +11,30 @@ 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 {WithReportOrNotFoundProps} from './withReportOrNotFound';
 import withReportOrNotFound from './withReportOrNotFound';
 
 type WithReportAndPrivateNotesOrNotFoundOnyxProps = {
-    /** Session of currently logged in user */
-    session: OnyxEntry<OnyxTypes.Session>;
+    /** ID of the current user */
+    accountID?: number;
 };
 
-type WithReportAndPrivateNotesOrNotFoundProps = WithReportAndPrivateNotesOrNotFoundOnyxProps & WithReportOrNotFoundProps;
+type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps & WithReportAndPrivateNotesOrNotFoundOnyxProps;
 
 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<TProps, keyof WithReportAndPrivateNotesOrNotFoundOnyxProps> & RefAttributes<TRef>> => {
         // eslint-disable-next-line rulesdir/no-negated-variables
-        function WithReportAndPrivateNotesOrNotFound(props: TProps, ref: ForwardedRef<TRef>) {
+        function WithReportAndPrivateNotesOrNotFound(props: Omit<TProps, keyof WithReportAndPrivateNotesOrNotFoundOnyxProps>, ref: ForwardedRef<TRef>) {
             const {translate} = useLocalize();
             const {isOffline} = useNetwork();
-            const {route, report, session} = props;
+            const [session] = useOnyx(ONYXKEYS.SESSION);
+            const {route, report} = props;
             const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report?.reportID ?? -1}`);
             const accountID = ('accountID' in route.params && route.params.accountID) || '';
-            const isPrivateNotesFetchTriggered = report.isLoadingPrivateNotes !== undefined;
+            const isPrivateNotesFetchTriggered = report?.isLoadingPrivateNotes !== undefined;
             const prevIsOffline = usePrevious(isOffline);
             const isReconnecting = prevIsOffline && !isOffline;
             const isOtherUserNote = !!accountID && Number(session?.accountID) !== Number(accountID);
@@ -49,9 +47,9 @@ export default function (pageTitle: TranslationPaths) {
                     return;
                 }
 
-                Report.getReportPrivateNote(report.reportID);
+                Report.getReportPrivateNote(report?.reportID);
                 // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- do not add report.isLoadingPrivateNotes to dependencies
-            }, [report.reportID, isOffline, isPrivateNotesFetchTriggered, isReconnecting]);
+            }, [report?.reportID, isOffline, isPrivateNotesFetchTriggered, isReconnecting]);
 
             const shouldShowFullScreenLoadingIndicator = !isPrivateNotesFetchFinished;
 
@@ -82,21 +80,16 @@ export default function (pageTitle: TranslationPaths) {
             return (
                 <WrappedComponent
                     // eslint-disable-next-line react/jsx-props-no-spreading
-                    {...props}
+                    {...(props as TProps)}
                     ref={ref}
+                    accountID={session?.accountID}
                 />
             );
         }
 
         WithReportAndPrivateNotesOrNotFound.displayName = `withReportAndPrivateNotesOrNotFound(${getComponentDisplayName(WrappedComponent)})`;
 
-        return withReportOrNotFound()(
-            withOnyx<TProps & RefAttributes<TRef>, WithReportAndPrivateNotesOrNotFoundOnyxProps>({
-                session: {
-                    key: ONYXKEYS.SESSION,
-                },
-            })(WithReportAndPrivateNotesOrNotFound),
-        );
+        return withReportOrNotFound()(WithReportAndPrivateNotesOrNotFound);
     };
 }