From 4348206f0deb509374f907e05883b0f75f55088c Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 16 Sep 2024 10:43:12 +0700 Subject: [PATCH 1/9] Migrate withReportAndPrivateNotesOrNotFound from withOnyx to useOnyx --- .../PrivateNotes/PrivateNotesEditPage.tsx | 5 ++-- .../PrivateNotes/PrivateNotesListPage.tsx | 5 ++-- .../withReportAndPrivateNotesOrNotFound.tsx | 24 +++++-------------- 3 files changed, 12 insertions(+), 22 deletions(-) diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index 1779fe8e085e..81c5338a101c 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx @@ -5,7 +5,7 @@ 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, withOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -46,9 +46,10 @@ type PrivateNotesEditPageProps = WithReportAndPrivateNotesOrNotFoundProps & report: Report; }; -function PrivateNotesEditPage({route, personalDetailsList, report, session}: PrivateNotesEditPageProps) { +function PrivateNotesEditPage({route, personalDetailsList, report}: PrivateNotesEditPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [session] = useOnyx(ONYXKEYS.SESSION); // We need to edit the note in markdown format, but display it in HTML format const [privateNote, setPrivateNote] = useState( diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.tsx b/src/pages/PrivateNotes/PrivateNotesListPage.tsx index 055bba42c552..8ffad4c3d00f 100644 --- a/src/pages/PrivateNotes/PrivateNotesListPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesListPage.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import {AttachmentContext} from '@components/AttachmentContext'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -39,9 +39,10 @@ type NoteListItem = { accountID: string; }; -function PrivateNotesListPage({report, personalDetailsList, session}: PrivateNotesListPageProps) { +function PrivateNotesListPage({report, personalDetailsList}: PrivateNotesListPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); + const [session] = useOnyx(ONYXKEYS.SESSION); const getAttachmentValue = useCallback((item: NoteListItem) => ({reportID: item.reportID, accountID: Number(item.accountID), type: CONST.ATTACHMENT_TYPE.NOTE}), []); /** diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index e6ba4858ad8b..32bbc8b011b5 100644 --- 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,28 +11,23 @@ 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; -}; - -type WithReportAndPrivateNotesOrNotFoundProps = WithReportAndPrivateNotesOrNotFoundOnyxProps & WithReportOrNotFoundProps; +type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps; export default function (pageTitle: TranslationPaths) { // eslint-disable-next-line rulesdir/no-negated-variables return ( WrappedComponent: ComponentType>, - ): React.ComponentType & RefAttributes, keyof WithReportOrNotFoundOnyxProps>> => { + ): React.ComponentType, keyof WithReportOrNotFoundOnyxProps>>> => { // eslint-disable-next-line rulesdir/no-negated-variables function WithReportAndPrivateNotesOrNotFound(props: TProps, ref: ForwardedRef) { 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; @@ -90,13 +84,7 @@ export default function (pageTitle: TranslationPaths) { WithReportAndPrivateNotesOrNotFound.displayName = `withReportAndPrivateNotesOrNotFound(${getComponentDisplayName(WrappedComponent)})`; - return withReportOrNotFound()( - withOnyx, WithReportAndPrivateNotesOrNotFoundOnyxProps>({ - session: { - key: ONYXKEYS.SESSION, - }, - })(WithReportAndPrivateNotesOrNotFound), - ); + return withReportOrNotFound()(WithReportAndPrivateNotesOrNotFound); }; } From 051ae8507718fcac5b9fbf0efcfed8a81393d1d2 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 16 Sep 2024 14:22:55 +0700 Subject: [PATCH 2/9] fix: add new props HOC --- src/pages/PrivateNotes/PrivateNotesEditPage.tsx | 5 ++--- src/pages/PrivateNotes/PrivateNotesListPage.tsx | 5 ++--- .../home/report/withReportAndPrivateNotesOrNotFound.tsx | 7 ++++++- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index 81c5338a101c..1779fe8e085e 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx @@ -5,7 +5,7 @@ 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 {useOnyx, withOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -46,10 +46,9 @@ type PrivateNotesEditPageProps = WithReportAndPrivateNotesOrNotFoundProps & report: Report; }; -function PrivateNotesEditPage({route, personalDetailsList, report}: PrivateNotesEditPageProps) { +function PrivateNotesEditPage({route, personalDetailsList, report, session}: PrivateNotesEditPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const [session] = useOnyx(ONYXKEYS.SESSION); // We need to edit the note in markdown format, but display it in HTML format const [privateNote, setPrivateNote] = useState( diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.tsx b/src/pages/PrivateNotes/PrivateNotesListPage.tsx index 8ffad4c3d00f..055bba42c552 100644 --- a/src/pages/PrivateNotes/PrivateNotesListPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesListPage.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useMemo} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import {AttachmentContext} from '@components/AttachmentContext'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -39,10 +39,9 @@ type NoteListItem = { accountID: string; }; -function PrivateNotesListPage({report, personalDetailsList}: PrivateNotesListPageProps) { +function PrivateNotesListPage({report, personalDetailsList, session}: PrivateNotesListPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const [session] = useOnyx(ONYXKEYS.SESSION); const getAttachmentValue = useCallback((item: NoteListItem) => ({reportID: item.reportID, accountID: Number(item.accountID), type: CONST.ATTACHMENT_TYPE.NOTE}), []); /** diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index 32bbc8b011b5..8a59ce9eee1c 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -1,6 +1,7 @@ import React, {useEffect, useMemo} from 'react'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import {useOnyx} from 'react-native-onyx'; +import {OnyxEntry} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; @@ -11,11 +12,14 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import LoadingPage from '@pages/LoadingPage'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; +import {Session} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundOnyxProps, WithReportOrNotFoundProps} from './withReportOrNotFound'; import withReportOrNotFound from './withReportOrNotFound'; -type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps; +type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps & { + session: OnyxEntry; +}; export default function (pageTitle: TranslationPaths) { // eslint-disable-next-line rulesdir/no-negated-variables @@ -78,6 +82,7 @@ export default function (pageTitle: TranslationPaths) { // eslint-disable-next-line react/jsx-props-no-spreading {...props} ref={ref} + session={session} /> ); } From f56fecc995384dff504e49fd6e94695a1deff3c3 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 16 Sep 2024 14:54:37 +0700 Subject: [PATCH 3/9] fix lint --- src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index 8a59ce9eee1c..420526fa38b7 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -1,7 +1,7 @@ import React, {useEffect, useMemo} from 'react'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import {useOnyx} from 'react-native-onyx'; -import {OnyxEntry} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePrevious from '@hooks/usePrevious'; @@ -12,7 +12,7 @@ import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import LoadingPage from '@pages/LoadingPage'; import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; -import {Session} from '@src/types/onyx'; +import type {Session} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundOnyxProps, WithReportOrNotFoundProps} from './withReportOrNotFound'; import withReportOrNotFound from './withReportOrNotFound'; From f22c5e86b2e8ced756f8ce36f9b47e76ce771e7e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 26 Sep 2024 17:25:54 +0700 Subject: [PATCH 4/9] migrate: withReportAndPrivateNotesOrNotFound and withReportOrNotFound --- .../withReportAndPrivateNotesOrNotFound.tsx | 18 ++++--- .../home/report/withReportOrNotFound.tsx | 54 ++++++++----------- 2 files changed, 32 insertions(+), 40 deletions(-) diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index 420526fa38b7..a74f04d35dfe 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -17,24 +17,26 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundOnyxProps, WithReportOrNotFoundProps} from './withReportOrNotFound'; import withReportOrNotFound from './withReportOrNotFound'; -type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps & { +type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps; + +type WithReportAndPrivateNotesOrNotFoundOnyxProps = { + /** Session of currently logged in user */ session: OnyxEntry; }; export default function (pageTitle: TranslationPaths) { - // eslint-disable-next-line rulesdir/no-negated-variables return ( - WrappedComponent: ComponentType>, - ): React.ComponentType, keyof WithReportOrNotFoundOnyxProps>>> => { + WrappedComponent: ComponentType>, + ): React.ComponentType> => { // eslint-disable-next-line rulesdir/no-negated-variables - function WithReportAndPrivateNotesOrNotFound(props: TProps, ref: ForwardedRef) { + function WithReportAndPrivateNotesOrNotFound(props: TProps & WithReportOrNotFoundOnyxProps, ref: ForwardedRef) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); 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); @@ -47,9 +49,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; diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index c7cc6961b764..f9afa14959db 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -3,7 +3,7 @@ import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect} from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as ReportUtils from '@libs/ReportUtils'; @@ -32,31 +32,32 @@ type WithReportOrNotFoundOnyxProps = { isLoadingReportData: OnyxEntry; }; -type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { +type WithReportOrNotFoundProps = { route: | RouteProp | RouteProp | RouteProp | RouteProp | RouteProp; - - /** The report currently being looked at */ - report: OnyxTypes.Report; }; -export default function ( - shouldRequireReportID = true, -): ( - WrappedComponent: React.ComponentType>, -) => React.ComponentType, keyof WithReportOrNotFoundOnyxProps>> { - return function (WrappedComponent: ComponentType>) { +export default function (shouldRequireReportID = true) { + return function ( + WrappedComponent: ComponentType>, + ): React.ComponentType> { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); + const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`); + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); + const [betas] = useOnyx(ONYXKEYS.BETAS); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); + const contentShown = React.useRef(false); const isReportIdInRoute = !!props.route.params.reportID?.length; - const isReportLoaded = !isEmptyObject(props.report) && !!props.report?.reportID; + const isReportLoaded = !isEmptyObject(report) && !!report?.reportID; // The `isLoadingInitialReportActions` value will become `false` only after the first OpenReport API call is finished (either succeeded or failed) - const shouldFetchReport = isReportIdInRoute && props.reportMetadata?.isLoadingInitialReportActions !== false; + const shouldFetchReport = isReportIdInRoute && reportMetadata?.isLoadingInitialReportActions !== false; // When accessing certain report-dependant pages (e.g. Task Title) by deeplink, the OpenReport API is not called, // So we need to call OpenReport API here to make sure the report data is loaded if it exists on the Server @@ -71,8 +72,8 @@ export default function ( }, [shouldFetchReport, isReportLoaded, props.route.params.reportID]); if (shouldRequireReportID || isReportIdInRoute) { - const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (props.isLoadingReportData !== false || shouldFetchReport); - const shouldShowNotFoundPage = !isReportLoaded || !ReportUtils.canAccessReport(props.report, props.policies, props.betas); + const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (isLoadingReportData !== false || shouldFetchReport); + const shouldShowNotFoundPage = !isReportLoaded || !ReportUtils.canAccessReport(report, policies, 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. @@ -97,6 +98,11 @@ export default function ( ); @@ -104,23 +110,7 @@ export default function ( WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`; - return withOnyx, WithReportOrNotFoundOnyxProps>({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, - }, - reportMetadata: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`, - }, - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, - betas: { - key: ONYXKEYS.BETAS, - }, - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - }, - })(React.forwardRef(WithReportOrNotFound)); + return React.forwardRef(WithReportOrNotFound); }; } From e11b7aca277f5223fa0719804192ee645ec37045 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 26 Sep 2024 17:57:33 +0700 Subject: [PATCH 5/9] remigrate withReportAndPrivateNotesOrNotFound --- .../withReportAndPrivateNotesOrNotFound.tsx | 10 ++-- .../home/report/withReportOrNotFound.tsx | 56 +++++++++++-------- 2 files changed, 38 insertions(+), 28 deletions(-) diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index a74f04d35dfe..c33f03b14e68 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -17,19 +17,19 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {WithReportOrNotFoundOnyxProps, WithReportOrNotFoundProps} from './withReportOrNotFound'; import withReportOrNotFound from './withReportOrNotFound'; -type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps; - type WithReportAndPrivateNotesOrNotFoundOnyxProps = { /** Session of currently logged in user */ session: OnyxEntry; }; +type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps & WithReportAndPrivateNotesOrNotFoundOnyxProps; + export default function (pageTitle: TranslationPaths) { return ( WrappedComponent: ComponentType>, - ): React.ComponentType> => { + ): React.ComponentType & React.RefAttributes, keyof WithReportOrNotFoundOnyxProps>> => { // eslint-disable-next-line rulesdir/no-negated-variables - function WithReportAndPrivateNotesOrNotFound(props: TProps & WithReportOrNotFoundOnyxProps, ref: ForwardedRef) { + function WithReportAndPrivateNotesOrNotFound(props: Omit, ref: ForwardedRef) { const {translate} = useLocalize(); const {isOffline} = useNetwork(); const [session] = useOnyx(ONYXKEYS.SESSION); @@ -82,8 +82,8 @@ export default function (pageTitle: TranslationPaths) { return ( ); diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index 034a19c010c9..971ffd3f8611 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -3,7 +3,7 @@ import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect} from 'react'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {useOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as ReportUtils from '@libs/ReportUtils'; @@ -39,7 +39,7 @@ type WithReportOrNotFoundOnyxProps = { isLoadingReportData: OnyxEntry; }; -type WithReportOrNotFoundProps = { +type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { route: | RouteProp | RouteProp @@ -50,25 +50,24 @@ type WithReportOrNotFoundProps = { | RouteProp | RouteProp | RouteProp; + + /** The report currently being looked at */ + report: OnyxTypes.Report; }; -export default function (shouldRequireReportID = true) { - return function ( - WrappedComponent: ComponentType>, - ): React.ComponentType> { +export default function ( + shouldRequireReportID = true, +): ( + WrappedComponent: React.ComponentType>, +) => React.ComponentType, keyof WithReportOrNotFoundOnyxProps>> { + return function (WrappedComponent: ComponentType>) { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { - const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); - const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`); - const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); - const [betas] = useOnyx(ONYXKEYS.BETAS); - const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); - const contentShown = React.useRef(false); const isReportIdInRoute = !!props.route.params.reportID?.length; - const isReportLoaded = !isEmptyObject(report) && !!report?.reportID; + const isReportLoaded = !isEmptyObject(props.report) && !!props.report?.reportID; // The `isLoadingInitialReportActions` value will become `false` only after the first OpenReport API call is finished (either succeeded or failed) - const shouldFetchReport = isReportIdInRoute && reportMetadata?.isLoadingInitialReportActions !== false; + const shouldFetchReport = isReportIdInRoute && props.reportMetadata?.isLoadingInitialReportActions !== false; // When accessing certain report-dependant pages (e.g. Task Title) by deeplink, the OpenReport API is not called, // So we need to call OpenReport API here to make sure the report data is loaded if it exists on the Server @@ -83,8 +82,8 @@ export default function (shouldRequireReportID = true) { }, [shouldFetchReport, isReportLoaded, props.route.params.reportID]); if (shouldRequireReportID || isReportIdInRoute) { - const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (isLoadingReportData !== false || shouldFetchReport); - const shouldShowNotFoundPage = !isReportLoaded || !ReportUtils.canAccessReport(report, policies, betas); + const shouldShowFullScreenLoadingIndicator = !isReportLoaded && (props.isLoadingReportData !== false || shouldFetchReport); + const shouldShowNotFoundPage = !isReportLoaded || !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. @@ -109,11 +108,6 @@ export default function (shouldRequireReportID = true) { ); @@ -121,8 +115,24 @@ export default function (shouldRequireReportID = true) { WithReportOrNotFound.displayName = `withReportOrNotFound(${getComponentDisplayName(WrappedComponent)})`; - return React.forwardRef(WithReportOrNotFound); + return withOnyx, WithReportOrNotFoundOnyxProps>({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, + }, + reportMetadata: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${route.params.reportID}`, + }, + isLoadingReportData: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, + betas: { + key: ONYXKEYS.BETAS, + }, + policies: { + key: ONYXKEYS.COLLECTION.POLICY, + }, + })(React.forwardRef(WithReportOrNotFound)); }; } -export type {WithReportOrNotFoundProps, WithReportOrNotFoundOnyxProps}; +export type {WithReportOrNotFoundProps, WithReportOrNotFoundOnyxProps}; \ No newline at end of file From c29f3c85f52280a126f01d6cfd0bce2f56403ea9 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 26 Sep 2024 17:58:25 +0700 Subject: [PATCH 6/9] fix lint --- src/pages/home/report/withReportOrNotFound.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index 971ffd3f8611..7947ab0a04b4 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -135,4 +135,4 @@ export default function ( }; } -export type {WithReportOrNotFoundProps, WithReportOrNotFoundOnyxProps}; \ No newline at end of file +export type {WithReportOrNotFoundProps, WithReportOrNotFoundOnyxProps}; From 885015507070f582ccfba7f0a2bb6da4a342e2e2 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 26 Sep 2024 21:33:22 +0700 Subject: [PATCH 7/9] fix lint --- src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx index c33f03b14e68..410af482a367 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -82,8 +82,8 @@ export default function (pageTitle: TranslationPaths) { return ( ); From 14b7e7ce7235e54fe8de3c9bba40505abac68ee6 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 21 Oct 2024 14:23:31 +0700 Subject: [PATCH 8/9] fix: using accountID --- src/libs/ReportUtils.ts | 6 +++--- src/pages/PrivateNotes/PrivateNotesEditPage.tsx | 4 ++-- src/pages/PrivateNotes/PrivateNotesListPage.tsx | 8 ++++---- .../home/report/withReportAndPrivateNotesOrNotFound.tsx | 8 +++----- 4 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 4bae619d928e..a8ac92e717cd 100644 --- 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, session: OnyxEntry, backTo?: string) { - if (isEmpty(report) || isEmpty(session) || !session.accountID) { +function goBackFromPrivateNotes(report: OnyxEntry, 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 index ac8eb7f862b6..3be994d1cbcf 100644 --- a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx +++ b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx @@ -46,7 +46,7 @@ type PrivateNotesEditPageProps = WithReportAndPrivateNotesOrNotFoundProps & report: Report; }; -function PrivateNotesEditPage({route, personalDetailsList, report, session}: PrivateNotesEditPageProps) { +function PrivateNotesEditPage({route, personalDetailsList, report, accountID}: PrivateNotesEditPageProps) { const backTo = route.params.backTo; const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -117,7 +117,7 @@ function PrivateNotesEditPage({route, personalDetailsList, report, session}: Pri > ReportUtils.goBackFromPrivateNotes(report, session, backTo)} + onBackButtonPress={() => ReportUtils.goBackFromPrivateNotes(report, accountID, backTo)} shouldShowBackButton onCloseButtonPress={() => Navigation.dismissModal()} /> diff --git a/src/pages/PrivateNotes/PrivateNotesListPage.tsx b/src/pages/PrivateNotes/PrivateNotesListPage.tsx index 424cc3e14683..474075d928f8 100644 --- 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>(); 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 ( ; + /** ID of the current user */ + accountID?: number; }; type WithReportAndPrivateNotesOrNotFoundProps = WithReportOrNotFoundProps & WithReportAndPrivateNotesOrNotFoundOnyxProps; @@ -84,7 +82,7 @@ export default function (pageTitle: TranslationPaths) { // eslint-disable-next-line react/jsx-props-no-spreading {...(props as TProps)} ref={ref} - session={session} + accountID={session?.accountID} /> ); } From 021c725441d73c2d3fd8f302f38b34ed9ef353da Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 21 Oct 2024 14:50:11 +0700 Subject: [PATCH 9/9] fix lint --- .../PrivateNotes/PrivateNotesEditPage.tsx | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/src/pages/PrivateNotes/PrivateNotesEditPage.tsx b/src/pages/PrivateNotes/PrivateNotesEditPage.tsx index 3be994d1cbcf..53a52f9cebb5 100644 --- 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; -}; - type PrivateNotesEditPageProps = WithReportAndPrivateNotesOrNotFoundProps & - PrivateNotesEditPageOnyxProps & StackScreenProps & { /** The report currently being looked at */ report: Report; }; -function PrivateNotesEditPage({route, personalDetailsList, report, accountID}: 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( @@ -178,10 +172,4 @@ function PrivateNotesEditPage({route, personalDetailsList, report, accountID}: P PrivateNotesEditPage.displayName = 'PrivateNotesEditPage'; -export default withReportAndPrivateNotesOrNotFound('privateNotes.title')( - withOnyx({ - personalDetailsList: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - })(PrivateNotesEditPage), -); +export default withReportAndPrivateNotesOrNotFound('privateNotes.title')(PrivateNotesEditPage);