From 07b78ce966e3469e114f9c71353be13e2628fd38 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Tue, 17 Sep 2024 15:30:28 +0300 Subject: [PATCH 01/23] Use useOnyx for report --- .../home/report/withReportAndReportActionOrNotFound.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index b8bb25d39c86..3b5012dc05d3 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -3,7 +3,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useCallback, useEffect} from 'react'; import type {OnyxCollection, OnyxEntry, WithOnyxState} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import getComponentDisplayName from '@libs/getComponentDisplayName'; @@ -49,6 +49,7 @@ export default function >, ): ComponentType, keyof OnyxProps>> { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); const getReportAction = useCallback(() => { let reportAction: OnyxEntry = props.reportActions?.[`${props.route.params.reportActionID}`]; @@ -67,7 +68,7 @@ export default function { - if (!shouldUseNarrowLayout || (!isEmptyObject(props.report) && !isEmptyObject(reportAction))) { + if (!shouldUseNarrowLayout || (!isEmptyObject(report) && !isEmptyObject(reportAction))) { return; } Report.openReport(props.route.params.reportID); @@ -75,9 +76,9 @@ export default function Date: Tue, 17 Sep 2024 15:55:08 +0300 Subject: [PATCH 02/23] fetch parentReport with useOnyx --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 3b5012dc05d3..3ead8b8f0556 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -50,6 +50,7 @@ export default function , keyof OnyxProps>> { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); + const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`); const getReportAction = useCallback(() => { let reportAction: OnyxEntry = props.reportActions?.[`${props.route.params.reportActionID}`]; From 8398950bc6f36dd1f7c8a06d7062e4e1bd7b1e9f Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Tue, 17 Sep 2024 16:04:27 +0300 Subject: [PATCH 03/23] fetch reportMetadata and use it in WithReportOrNotFound --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 3ead8b8f0556..b20ad4a81a56 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -51,6 +51,7 @@ export default function ) { const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`); + const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${props.route.params.reportID}`); const getReportAction = useCallback(() => { let reportAction: OnyxEntry = props.reportActions?.[`${props.route.params.reportActionID}`]; @@ -78,7 +79,7 @@ export default function Date: Tue, 17 Sep 2024 16:08:41 +0300 Subject: [PATCH 04/23] fetch isLoadingReportData --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index b20ad4a81a56..44b55a86875f 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -52,6 +52,7 @@ export default function { let reportAction: OnyxEntry = props.reportActions?.[`${props.route.params.reportActionID}`]; @@ -78,7 +79,7 @@ export default function Date: Tue, 17 Sep 2024 16:13:07 +0300 Subject: [PATCH 05/23] fetch betas --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 44b55a86875f..fe4bdb627478 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -53,6 +53,7 @@ export default function { let reportAction: OnyxEntry = props.reportActions?.[`${props.route.params.reportActionID}`]; @@ -81,7 +82,7 @@ export default function Date: Tue, 17 Sep 2024 16:25:11 +0300 Subject: [PATCH 06/23] fetch policies using useOnyx --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index fe4bdb627478..829f32621dbd 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -54,6 +54,7 @@ export default function { let reportAction: OnyxEntry = props.reportActions?.[`${props.route.params.reportActionID}`]; @@ -82,7 +83,7 @@ export default function Date: Tue, 17 Sep 2024 16:42:49 +0300 Subject: [PATCH 07/23] fetch reportAction --- .../home/report/withReportAndReportActionOrNotFound.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 829f32621dbd..1f12038a2afe 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -55,8 +55,9 @@ export default function { - let reportAction: OnyxEntry = props.reportActions?.[`${props.route.params.reportActionID}`]; + let reportAction: OnyxEntry = reportActions?.[`${props.route.params.reportActionID}`]; // Handle threads if needed if (!reportAction?.reportActionID) { @@ -64,7 +65,7 @@ export default function Date: Tue, 17 Sep 2024 17:09:47 +0300 Subject: [PATCH 08/23] fetch parentReportAction --- .../withReportAndReportActionOrNotFound.tsx | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 1f12038a2afe..a55ca0b43639 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -56,16 +56,26 @@ export default function ): NonNullable> | null => { + const parentReportActionID = props?.report?.parentReportActionID; + if (!parentReportActionID) { + return null; + } + return parentReportActions?.[parentReportActionID] ?? null; + }, + canEvict: false, + }); const getReportAction = useCallback(() => { let reportAction: OnyxEntry = reportActions?.[`${props.route.params.reportActionID}`]; // Handle threads if needed if (!reportAction?.reportActionID) { - reportAction = props?.parentReportAction ?? undefined; + reportAction = parentReportAction ?? undefined; } return reportAction; - }, [reportActions, props.route.params.reportActionID, props.parentReportAction]); + }, [reportActions, props.route.params.reportActionID, parentReportAction]); const reportAction = getReportAction(); @@ -94,7 +104,7 @@ export default function ; } From 1649082476e30c79d0ee057a457905d4a3049d74 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Tue, 17 Sep 2024 17:15:55 +0300 Subject: [PATCH 09/23] Change props.report with report --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index a55ca0b43639..53e32dee0e5c 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -58,7 +58,7 @@ export default function ): NonNullable> | null => { - const parentReportActionID = props?.report?.parentReportActionID; + const parentReportActionID = report?.parentReportActionID; if (!parentReportActionID) { return null; } From dc936ba6023578594cccfd483f57d2a925966e03 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Wed, 18 Sep 2024 11:48:40 +0300 Subject: [PATCH 10/23] remove withOnyx usage --- .../withReportAndReportActionOrNotFound.tsx | 38 +------------------ 1 file changed, 2 insertions(+), 36 deletions(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 53e32dee0e5c..ec6efc71b55d 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -111,7 +111,7 @@ export default function ); @@ -119,41 +119,7 @@ export default function , OnyxProps>({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, - }, - parentReport: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`, - }, - 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, - }, - reportActions: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`, - canEvict: false, - }, - parentReportAction: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`, - selector: (parentReportActions: OnyxEntry, props?: WithOnyxState): NonNullable> | null => { - const parentReportActionID = props?.report?.parentReportActionID; - if (!parentReportActionID) { - return null; - } - return parentReportActions?.[parentReportActionID] ?? null; - }, - canEvict: false, - }, - })(React.forwardRef(WithReportOrNotFound)); + return React.forwardRef(WithReportOrNotFound); } export type {WithReportAndReportActionOrNotFoundProps}; From cc065e8345f62e702c97f18a81634288274e6635 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Thu, 19 Sep 2024 14:31:38 +0300 Subject: [PATCH 11/23] fix lint and typecheck --- .../home/report/withReportAndReportActionOrNotFound.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index ec6efc71b55d..fcf7af4b42be 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -2,8 +2,8 @@ import type {StackScreenProps} from '@react-navigation/stack'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useCallback, useEffect} from 'react'; -import type {OnyxCollection, OnyxEntry, WithOnyxState} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import getComponentDisplayName from '@libs/getComponentDisplayName'; @@ -47,7 +47,7 @@ type WithReportAndReportActionOrNotFoundProps = OnyxProps & export default function ( WrappedComponent: ComponentType>, -): ComponentType, keyof OnyxProps>> { +): ComponentType> { function WithReportOrNotFound(props: TProps, ref: ForwardedRef) { const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${props.route.params.reportID}`); const [parentReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${report ? report.parentReportID : '-1'}`); From ddb8c9e5d4aa7d9d6300c1c66d05e40a4c8a551b Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Sat, 21 Sep 2024 20:52:19 +0300 Subject: [PATCH 12/23] pass only props used by other components --- .../home/report/withReportAndReportActionOrNotFound.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index fcf7af4b42be..89cc507b3bf0 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -111,7 +111,11 @@ export default function ); From aa98328a10ec30b7fc8b7398389f5af09afe9ef0 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Sat, 21 Sep 2024 21:15:56 +0300 Subject: [PATCH 13/23] Remove OnyxProps, and add type for props passed to FlagComment --- src/pages/FlagCommentPage.tsx | 6 ++++ .../withReportAndReportActionOrNotFound.tsx | 34 +++---------------- 2 files changed, 11 insertions(+), 29 deletions(-) diff --git a/src/pages/FlagCommentPage.tsx b/src/pages/FlagCommentPage.tsx index c54edae479d1..b24ba4af3776 100644 --- a/src/pages/FlagCommentPage.tsx +++ b/src/pages/FlagCommentPage.tsx @@ -25,6 +25,12 @@ import withReportAndReportActionOrNotFound from './home/report/withReportAndRepo import type {WithReportAndReportActionOrNotFoundProps} from './home/report/withReportAndReportActionOrNotFound'; type FlagCommentPageWithOnyxProps = { + /** The report currently being looked at */ + report: OnyxEntry; + /** The parent report if the current report is a thread and it has a parent */ + parentReport: OnyxEntry; + /** Array of report actions for this report */ + reportActions: OnyxEntry; /** The report action from the parent report */ parentReportAction: OnyxEntry; }; diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 89cc507b3bf0..285a8b6c8b9e 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -2,7 +2,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; import React, {useCallback, useEffect} from 'react'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; @@ -16,34 +16,10 @@ import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type OnyxProps = { - /** The report currently being looked at */ - report: OnyxEntry; - - /** The parent report if the current report is a thread and it has a parent */ - parentReport: OnyxEntry; - - /** The report metadata */ - reportMetadata: OnyxEntry; - - /** Array of report actions for this report */ - reportActions: OnyxEntry; - - /** The report's parentReportAction */ - parentReportAction: NonNullable> | null; - - /** 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 WithReportAndReportActionOrNotFoundProps = OnyxProps & - StackScreenProps; +type WithReportAndReportActionOrNotFoundProps = StackScreenProps< + FlagCommentNavigatorParamList & SplitDetailsNavigatorParamList, + typeof SCREENS.FLAG_COMMENT_ROOT | typeof SCREENS.SPLIT_DETAILS.ROOT +>; export default function ( WrappedComponent: ComponentType>, From 0329631e896ea8963abec3f9ae1dc48cdeb4eca7 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Sat, 21 Sep 2024 22:19:33 +0300 Subject: [PATCH 14/23] change reportAction with linkedReportAction and pass it to wrapped compoent --- .../withReportAndReportActionOrNotFound.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 285a8b6c8b9e..c342e2ba5acc 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -1,7 +1,7 @@ /* eslint-disable rulesdir/no-negated-variables */ import type {StackScreenProps} from '@react-navigation/stack'; import type {ComponentType, ForwardedRef, RefAttributes} from 'react'; -import React, {useCallback, useEffect} from 'react'; +import React, {useEffect, useMemo} from 'react'; import type {OnyxEntry} from 'react-native-onyx'; import {useOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; @@ -42,7 +42,7 @@ export default function { + const linkedReportAction = useMemo(() => { let reportAction: OnyxEntry = reportActions?.[`${props.route.params.reportActionID}`]; // Handle threads if needed @@ -53,14 +53,12 @@ export default function { - if (!shouldUseNarrowLayout || (!isEmptyObject(report) && !isEmptyObject(reportAction))) { + if (!shouldUseNarrowLayout || (!isEmptyObject(report) && !isEmptyObject(linkedReportAction))) { return; } Report.openReport(props.route.params.reportID); @@ -69,7 +67,7 @@ export default function ; } @@ -91,6 +89,7 @@ export default function From 5a630908a290f3fd8d8dcf5e0c93bb8bbd1fb512 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Sat, 21 Sep 2024 22:36:57 +0300 Subject: [PATCH 15/23] fix type issue for withReport --- .../report/withReportAndReportActionOrNotFound.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index c342e2ba5acc..14e544a50743 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -19,7 +19,19 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; type WithReportAndReportActionOrNotFoundProps = StackScreenProps< FlagCommentNavigatorParamList & SplitDetailsNavigatorParamList, typeof SCREENS.FLAG_COMMENT_ROOT | typeof SCREENS.SPLIT_DETAILS.ROOT ->; +> & { + /** The report currently being looked at */ + report: OnyxTypes.Report; + + /** The reportAction from the current route */ + reportAction: OnyxTypes.ReportAction; + + /** The parent report if the current report is a thread and it has a parent */ + parentReport: OnyxEntry; + + /** The report's parentReportAction */ + parentReportAction: NonNullable> | null; +}; export default function ( WrappedComponent: ComponentType>, From 5ca151b28a493966a21b5ecf29aafc5002d361c3 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Sat, 21 Sep 2024 22:42:26 +0300 Subject: [PATCH 16/23] use reportAction in FlagCommentPage --- src/pages/FlagCommentPage.tsx | 37 ++++------------------------------- 1 file changed, 4 insertions(+), 33 deletions(-) diff --git a/src/pages/FlagCommentPage.tsx b/src/pages/FlagCommentPage.tsx index b24ba4af3776..42d6661c7305 100644 --- a/src/pages/FlagCommentPage.tsx +++ b/src/pages/FlagCommentPage.tsx @@ -1,7 +1,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useCallback} from 'react'; +import React from 'react'; import {View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg'; import type {ValueOf} from 'type-fest'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -20,24 +19,12 @@ import * as Report from '@userActions/Report'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import type SCREENS from '@src/SCREENS'; -import type * as OnyxTypes from '@src/types/onyx'; import withReportAndReportActionOrNotFound from './home/report/withReportAndReportActionOrNotFound'; import type {WithReportAndReportActionOrNotFoundProps} from './home/report/withReportAndReportActionOrNotFound'; -type FlagCommentPageWithOnyxProps = { - /** The report currently being looked at */ - report: OnyxEntry; - /** The parent report if the current report is a thread and it has a parent */ - parentReport: OnyxEntry; - /** Array of report actions for this report */ - reportActions: OnyxEntry; - /** The report action from the parent report */ - parentReportAction: OnyxEntry; -}; - type FlagCommentPageNavigationProps = StackScreenProps; -type FlagCommentPageProps = WithReportAndReportActionOrNotFoundProps & FlagCommentPageNavigationProps & FlagCommentPageWithOnyxProps; +type FlagCommentPageProps = WithReportAndReportActionOrNotFoundProps & FlagCommentPageNavigationProps; type Severity = ValueOf; @@ -59,7 +46,7 @@ function getReportID(route: FlagCommentPageNavigationProps['route']) { return route.params.reportID.toString(); } -function FlagCommentPage({parentReportAction, route, report, parentReport, reportActions}: FlagCommentPageProps) { +function FlagCommentPage({parentReportAction, route, report, parentReport, reportAction}: FlagCommentPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -114,24 +101,8 @@ function FlagCommentPage({parentReportAction, route, report, parentReport, repor }, ]; - const getActionToFlag = useCallback((): OnyxTypes.ReportAction | null => { - let reportAction = reportActions?.[`${route.params.reportActionID.toString()}`]; - - // Handle threads if needed - if (reportAction?.reportActionID === undefined && parentReportAction) { - reportAction = parentReportAction; - } - - if (!reportAction) { - return null; - } - - return reportAction; - }, [reportActions, route.params.reportActionID, parentReportAction]); - const flagComment = (severity: Severity) => { let reportID: string | undefined = getReportID(route); - const reportAction = getActionToFlag(); // Handle threads if needed if (ReportUtils.isChatThread(report) && reportAction?.reportActionID === parentReportAction?.reportActionID) { @@ -164,7 +135,7 @@ function FlagCommentPage({parentReportAction, route, report, parentReport, repor testID={FlagCommentPage.displayName} > {({safeAreaPaddingBottomStyle}) => ( - + Date: Mon, 23 Sep 2024 20:25:06 +0300 Subject: [PATCH 17/23] apply suggested changes and remove useOnyx --- src/pages/iou/SplitBillDetailsPage.tsx | 86 +++++--------------------- 1 file changed, 15 insertions(+), 71 deletions(-) diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx index efefc8ccc9ea..95a539f8cd49 100644 --- a/src/pages/iou/SplitBillDetailsPage.tsx +++ b/src/pages/iou/SplitBillDetailsPage.tsx @@ -1,9 +1,7 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import type {ComponentType} from 'react'; -import React, {useCallback, useMemo, useState} from 'react'; +import React, {useCallback, useState} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import Icon from '@components/Icon'; @@ -26,46 +24,25 @@ import * as IOU from '@userActions/IOU'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type SCREENS from '@src/SCREENS'; -import type {PersonalDetailsList, Report, ReportAction, Session, Transaction} from '@src/types/onyx'; import type {Participant} from '@src/types/onyx/IOU'; -import type {ReportActions} from '@src/types/onyx/ReportAction'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -type SplitBillDetailsPageTransactionOnyxProps = { - /** The current transaction */ - transaction: OnyxEntry; +type SplitBillDetailsPageProps = WithReportAndReportActionOrNotFoundProps & StackScreenProps; - /** The draft transaction that holds data to be persisited on the current transaction */ - draftTransaction: OnyxEntry; -}; - -type SplitBillDetailsPageOnyxPropsWithoutTransaction = { - /** The personal details of the person who is logged in */ - personalDetails: OnyxEntry; - - /** The active report */ - report: OnyxEntry; - - /** Array of report actions for this report */ - reportActions: OnyxEntry; - - /** Session info for the currently logged in user. */ - session: OnyxEntry; -}; - -type SplitBillDetailsPageOnyxProps = SplitBillDetailsPageTransactionOnyxProps & SplitBillDetailsPageOnyxPropsWithoutTransaction; - -type SplitBillDetailsPageProps = WithReportAndReportActionOrNotFoundProps & - SplitBillDetailsPageOnyxProps & - StackScreenProps; - -function SplitBillDetailsPage({personalDetails, report, route, reportActions, transaction, draftTransaction, session}: SplitBillDetailsPageProps) { +function SplitBillDetailsPage({report, reportAction}: SplitBillDetailsPageProps) { const styles = useThemeStyles(); - const reportID = report?.reportID ?? '-1'; const {translate} = useLocalize(); const theme = useTheme(); - const reportAction = useMemo(() => reportActions?.[route.params.reportActionID] ?? ({} as ReportAction), [reportActions, route.params.reportActionID]); - const participantAccountIDs = ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction)?.participantAccountIDs ?? [] : []; + + const reportID = report?.reportID ?? '-1'; + const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined; + const IOUTransactionID = originalMessage?.IOUTransactionID ?? '-1'; + const participantAccountIDs = originalMessage?.participantAccountIDs ?? []; + + const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID}`); + const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${IOUTransactionID}`); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + const [session] = useOnyx(ONYXKEYS.SESSION); // In case this is workspace split expense, we manually add the workspace as the second participant of the split expense // because we don't save any accountID in the report action's originalMessage other than the payee's accountID @@ -162,37 +139,4 @@ function SplitBillDetailsPage({personalDetails, report, route, reportActions, tr SplitBillDetailsPage.displayName = 'SplitBillDetailsPage'; -const WrappedComponent = withOnyx({ - transaction: { - key: ({route, reportActions}) => { - const reportAction = reportActions?.[route.params.reportActionID]; - const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined; - const IOUTransactionID = reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && originalMessage?.IOUTransactionID ? originalMessage.IOUTransactionID : 0; - return `${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID}`; - }, - }, - draftTransaction: { - key: ({route, reportActions}) => { - const reportAction = reportActions?.[route.params.reportActionID]; - const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined; - const IOUTransactionID = reportAction?.actionName === CONST.REPORT.ACTIONS.TYPE.IOU && originalMessage?.IOUTransactionID ? originalMessage.IOUTransactionID : 0; - return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${IOUTransactionID}`; - }, - }, -})(withReportAndReportActionOrNotFound(SplitBillDetailsPage) as ComponentType); - -export default withOnyx, SplitBillDetailsPageOnyxPropsWithoutTransaction>({ - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, - }, - reportActions: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`, - canEvict: false, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - session: { - key: ONYXKEYS.SESSION, - }, -})(WrappedComponent); +export default withReportAndReportActionOrNotFound(SplitBillDetailsPage); From 26f1d07e57b4d6afecc4dee6b9efb0e119488182 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Mon, 23 Sep 2024 20:31:03 +0300 Subject: [PATCH 18/23] simplify selector for parentReportActions --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index 14e544a50743..cbb7d2e46127 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -44,8 +44,8 @@ export default function ): NonNullable> | null => { + const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : '-1'}`, { + selector: (parentReportActions) => { const parentReportActionID = report?.parentReportActionID; if (!parentReportActionID) { return null; From 0398b3f58cb445b8de2db133806fc30fc79c7db7 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Fri, 27 Sep 2024 21:31:59 +0300 Subject: [PATCH 19/23] Don't pass reportActions to wrapped component --- src/pages/home/report/withReportAndReportActionOrNotFound.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index cbb7d2e46127..f291d71c75e8 100644 --- a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx +++ b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx @@ -100,7 +100,6 @@ export default function Date: Fri, 27 Sep 2024 22:16:54 +0300 Subject: [PATCH 20/23] fix type error caused from conflict --- src/pages/iou/SplitBillDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx index b17ef770df70..b515abb005de 100644 --- a/src/pages/iou/SplitBillDetailsPage.tsx +++ b/src/pages/iou/SplitBillDetailsPage.tsx @@ -30,7 +30,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject'; type SplitBillDetailsPageProps = WithReportAndReportActionOrNotFoundProps & StackScreenProps; -function SplitBillDetailsPage({report, reportAction}: SplitBillDetailsPageProps) { +function SplitBillDetailsPage({route, report, reportAction}: SplitBillDetailsPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); const theme = useTheme(); From 93dd702374a0c77eeac4435cb683430a6de3dbec Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Thu, 3 Oct 2024 18:16:50 +0300 Subject: [PATCH 21/23] Use logical or to get IOUTransactionID safely --- src/pages/iou/SplitBillDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx index b515abb005de..d79c09fe83d3 100644 --- a/src/pages/iou/SplitBillDetailsPage.tsx +++ b/src/pages/iou/SplitBillDetailsPage.tsx @@ -37,7 +37,7 @@ function SplitBillDetailsPage({route, report, reportAction}: SplitBillDetailsPag const reportID = report?.reportID ?? '-1'; const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined; - const IOUTransactionID = originalMessage?.IOUTransactionID ?? '-1'; + const IOUTransactionID = originalMessage?.IOUTransactionID || '-1'; const participantAccountIDs = originalMessage?.participantAccountIDs ?? []; const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID}`); From b656710346f10238eacdd7135b4e012484e94448 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Thu, 3 Oct 2024 18:28:05 +0300 Subject: [PATCH 22/23] fix typo on COLLECTION.SPLIT_TRANSACTION_DRAFT --- src/pages/iou/SplitBillDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx index d79c09fe83d3..7d730d59a683 100644 --- a/src/pages/iou/SplitBillDetailsPage.tsx +++ b/src/pages/iou/SplitBillDetailsPage.tsx @@ -41,7 +41,7 @@ function SplitBillDetailsPage({route, report, reportAction}: SplitBillDetailsPag const participantAccountIDs = originalMessage?.participantAccountIDs ?? []; const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID}`); - const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${IOUTransactionID}`); + const [draftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${IOUTransactionID}`); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [session] = useOnyx(ONYXKEYS.SESSION); From 94f75b5daab435f920d8a81d9f8c4b310962b919 Mon Sep 17 00:00:00 2001 From: Dysto coder Date: Sat, 5 Oct 2024 00:01:20 +0300 Subject: [PATCH 23/23] use ternay operator instead of or --- src/pages/iou/SplitBillDetailsPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/iou/SplitBillDetailsPage.tsx b/src/pages/iou/SplitBillDetailsPage.tsx index 7d730d59a683..a1a4838105be 100644 --- a/src/pages/iou/SplitBillDetailsPage.tsx +++ b/src/pages/iou/SplitBillDetailsPage.tsx @@ -37,7 +37,7 @@ function SplitBillDetailsPage({route, report, reportAction}: SplitBillDetailsPag const reportID = report?.reportID ?? '-1'; const originalMessage = reportAction && ReportActionsUtils.isMoneyRequestAction(reportAction) ? ReportActionsUtils.getOriginalMessage(reportAction) : undefined; - const IOUTransactionID = originalMessage?.IOUTransactionID || '-1'; + const IOUTransactionID = originalMessage?.IOUTransactionID ? originalMessage.IOUTransactionID : '-1'; const participantAccountIDs = originalMessage?.participantAccountIDs ?? []; const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${IOUTransactionID}`);