From d765861d380b61a04bcf1ddc3711d750297d213f Mon Sep 17 00:00:00 2001 From: "Antony M. Kithinzi" Date: Wed, 18 Sep 2024 18:42:46 +0300 Subject: [PATCH 1/6] Typescript checks... --- 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 e6ba4858ad8b..a46af5caf45c 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -14,7 +14,7 @@ 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 type {WithReportOrNotFoundProps} from './withReportOrNotFound'; import withReportOrNotFound from './withReportOrNotFound'; type WithReportAndPrivateNotesOrNotFoundOnyxProps = { @@ -28,7 +28,7 @@ export default function (pageTitle: TranslationPaths) { // eslint-disable-next-line rulesdir/no-negated-variables return ( WrappedComponent: ComponentType>, - ): React.ComponentType & RefAttributes, keyof WithReportOrNotFoundOnyxProps>> => { + ): React.ComponentType & RefAttributes, keyof WithReportOrNotFoundProps>> => { // eslint-disable-next-line rulesdir/no-negated-variables function WithReportAndPrivateNotesOrNotFound(props: TProps, ref: ForwardedRef) { const {translate} = useLocalize(); From 545508c7ffc22dbd779ead92668c0ad6e7ff9574 Mon Sep 17 00:00:00 2001 From: "Antony M. Kithinzi" Date: Thu, 19 Sep 2024 10:07:12 +0200 Subject: [PATCH 2/6] migrating from withOnyx to useOnyx * migrating from withOnyx to useOnyx * Update withReportAndPrivateNotesOrNotFound.tsx --- .../home/report/withReportOrNotFound.tsx | 47 +++++++------------ 1 file changed, 18 insertions(+), 29 deletions(-) diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index c7cc6961b764..98ba4b2ff936 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -2,8 +2,8 @@ import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect} from 'react'; +import {useOnyx} from 'react-native-onyx'; import type {OnyxCollection, OnyxEntry} 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'; @@ -16,9 +16,6 @@ import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; type WithReportOrNotFoundOnyxProps = { - /** The report currently being looked at */ - report: OnyxEntry; - /** Metadata of the report currently being looked at */ reportMetadata: OnyxEntry; @@ -46,17 +43,20 @@ type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { export default function ( shouldRequireReportID = true, -): ( - WrappedComponent: React.ComponentType>, -) => React.ComponentType, keyof WithReportOrNotFoundOnyxProps>> { +): (WrappedComponent: React.ComponentType>) => React.ComponentType> { return function (WrappedComponent: ComponentType>) { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { + const [betas] = useOnyx(ONYXKEYS.BETAS); + const [policies] = useOnyx(ONYXKEYS.COLLECTION.POLICY); + const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`); + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA); + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); 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 +71,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 +97,11 @@ export default function ( ); @@ -104,24 +109,8 @@ 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); }; } -export type {WithReportOrNotFoundProps, WithReportOrNotFoundOnyxProps}; +export type {WithReportOrNotFoundProps}; From 952e0b041f00ae3a06a1f85ab7fbe4af2cb2bf77 Mon Sep 17 00:00:00 2001 From: "Antony M. Kithinzi" Date: Mon, 30 Sep 2024 17:48:44 +0300 Subject: [PATCH 3/6] Update src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx Co-authored-by: Shubham Agrawal <58412969+shubham1206agra@users.noreply.github.com> --- 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 a46af5caf45c..2271391b65bc 100644 --- a/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx +++ b/src/pages/home/report/withReportAndPrivateNotesOrNotFound.tsx @@ -28,7 +28,7 @@ export default function (pageTitle: TranslationPaths) { // eslint-disable-next-line rulesdir/no-negated-variables return ( WrappedComponent: ComponentType>, - ): React.ComponentType & RefAttributes, keyof WithReportOrNotFoundProps>> => { + ): React.ComponentType & RefAttributes> => { // eslint-disable-next-line rulesdir/no-negated-variables function WithReportAndPrivateNotesOrNotFound(props: TProps, ref: ForwardedRef) { const {translate} = useLocalize(); From 1ea8f4e9da1be050c22a079bdded9ac75b53c983 Mon Sep 17 00:00:00 2001 From: "Antony M. Kithinzi" Date: Mon, 30 Sep 2024 17:59:11 +0300 Subject: [PATCH 4/6] Removing WithReportOrNotFoundOnyxProps --- src/pages/home/report/withReportOrNotFound.tsx | 17 +---------------- 1 file changed, 1 insertion(+), 16 deletions(-) diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index 98ba4b2ff936..65d1103cb937 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -3,7 +3,6 @@ import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as ReportUtils from '@libs/ReportUtils'; @@ -15,21 +14,7 @@ import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type WithReportOrNotFoundOnyxProps = { - /** Metadata of the report currently being looked at */ - reportMetadata: OnyxEntry; - - /** The policies which the user has access to */ - policies: OnyxCollection; - - /** Beta features list */ - betas: OnyxEntry; - - /** Indicated whether the report data is loading */ - isLoadingReportData: OnyxEntry; -}; - -type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { +type WithReportOrNotFoundProps = { route: | RouteProp | RouteProp From 69cd060b4b320d5160dba76d089cc4533fba61c0 Mon Sep 17 00:00:00 2001 From: "Antony M. Kithinzi" Date: Mon, 30 Sep 2024 18:30:10 +0300 Subject: [PATCH 5/6] Update withReportOrNotFound.tsx --- src/pages/home/report/withReportOrNotFound.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index 9fd78979ec23..cddaff1da14b 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -3,6 +3,7 @@ import type {RouteProp} from '@react-navigation/native'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useEffect} from 'react'; import {useOnyx} from 'react-native-onyx'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import * as ReportUtils from '@libs/ReportUtils'; @@ -21,7 +22,21 @@ import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type WithReportOrNotFoundProps = { +type WithReportOrNotFoundOnyxProps = { + /** Metadata of the report currently being looked at */ + reportMetadata: OnyxEntry; + + /** The policies which the user has access to */ + policies: OnyxCollection; + + /** Beta features list */ + betas: OnyxEntry; + + /** Indicated whether the report data is loading */ + isLoadingReportData: OnyxEntry; +}; + +type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { route: | RouteProp | RouteProp From 2d75c3f8b3f24ad853ed47806b2ca5a645f4f13c Mon Sep 17 00:00:00 2001 From: "Antony M. Kithinzi" Date: Mon, 7 Oct 2024 12:23:12 +0200 Subject: [PATCH 6/6] Move WithReportOrNotFoundOnyxProps to WithReportOrNotFoundProps --- .../home/report/withReportOrNotFound.tsx | 28 +++++++++---------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/pages/home/report/withReportOrNotFound.tsx b/src/pages/home/report/withReportOrNotFound.tsx index cddaff1da14b..8c0f4acbbe39 100644 --- a/src/pages/home/report/withReportOrNotFound.tsx +++ b/src/pages/home/report/withReportOrNotFound.tsx @@ -22,21 +22,7 @@ import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type WithReportOrNotFoundOnyxProps = { - /** Metadata of the report currently being looked at */ - reportMetadata: OnyxEntry; - - /** The policies which the user has access to */ - policies: OnyxCollection; - - /** Beta features list */ - betas: OnyxEntry; - - /** Indicated whether the report data is loading */ - isLoadingReportData: OnyxEntry; -}; - -type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { +type WithReportOrNotFoundProps = { route: | RouteProp | RouteProp @@ -50,6 +36,18 @@ type WithReportOrNotFoundProps = WithReportOrNotFoundOnyxProps & { /** The report currently being looked at */ report: OnyxTypes.Report; + + /** Metadata of the report currently being looked at */ + reportMetadata: OnyxEntry; + + /** The policies which the user has access to */ + policies: OnyxCollection; + + /** Beta features list */ + betas: OnyxEntry; + + /** Indicated whether the report data is loading */ + isLoadingReportData: OnyxEntry; }; export default function (