diff --git a/package-lock.json b/package-lock.json index b272c319bd8e..53db95ecf61e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -96,7 +96,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "2.0.1", + "react-native-onyx": "2.0.2", "react-native-pager-view": "6.2.2", "react-native-pdf": "6.7.3", "react-native-performance": "^5.1.0", @@ -45044,9 +45044,9 @@ } }, "node_modules/react-native-onyx": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.1.tgz", - "integrity": "sha512-o6QNvq91qg8hFXIhmHjBqlNXD/YZxBZSRN8Vkq7xD2NYskzxK2mLqhBdhB8yMMwe6Cd8sVUK4vlZax/JU79xYw==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.2.tgz", + "integrity": "sha512-24kcG3ChBXp+uSSCXudFvZTdCnKLRHQRgvTcnh2eA7COtKvbL8ggEJNkglSYmcf5WoDzLgYyWiKvcjcXQnmBvw==", "dependencies": { "ascii-table": "0.0.9", "fast-equals": "^4.0.3", diff --git a/package.json b/package.json index 20a891c6590b..6220c01ae82c 100644 --- a/package.json +++ b/package.json @@ -144,7 +144,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "2.0.1", + "react-native-onyx": "2.0.2", "react-native-pager-view": "6.2.2", "react-native-pdf": "6.7.3", "react-native-performance": "^5.1.0", diff --git a/src/pages/FlagCommentPage.tsx b/src/pages/FlagCommentPage.tsx index 9543c48cff25..00c38dabc4ec 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 {ScrollView, View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import type {SvgProps} from 'react-native-svg'; import type {ValueOf} from 'type-fest'; @@ -19,7 +18,6 @@ import * as ReportUtils from '@libs/ReportUtils'; import * as Report from '@userActions/Report'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; @@ -27,8 +25,8 @@ import withReportAndReportActionOrNotFound from './home/report/withReportAndRepo import type {WithReportAndReportActionOrNotFoundProps} from './home/report/withReportAndReportActionOrNotFound'; type FlagCommentPageWithOnyxProps = { - /** All the report actions from the parent report */ - parentReportActions: OnyxEntry; + /** The report action from the parent report */ + parentReportAction: OnyxEntry; }; type FlagCommentPageNavigationProps = StackScreenProps; @@ -55,7 +53,7 @@ function getReportID(route: FlagCommentPageNavigationProps['route']) { return route.params.reportID.toString(); } -function FlagCommentPage({parentReportActions, route, report, reportActions}: FlagCommentPageProps) { +function FlagCommentPage({parentReportAction, route, report, reportActions}: FlagCommentPageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -114,8 +112,8 @@ function FlagCommentPage({parentReportActions, route, report, reportActions}: Fl let reportAction = reportActions?.[`${route.params.reportActionID.toString()}`]; // Handle threads if needed - if (reportAction?.reportActionID === undefined) { - reportAction = parentReportActions?.[report?.parentReportActionID ?? '']; + if (reportAction?.reportActionID === undefined && parentReportAction) { + reportAction = parentReportAction; } if (!reportAction) { @@ -123,12 +121,11 @@ function FlagCommentPage({parentReportActions, route, report, reportActions}: Fl } return reportAction; - }, [report, reportActions, route.params.reportActionID, parentReportActions]); + }, [reportActions, route.params.reportActionID, parentReportAction]); const flagComment = (severity: Severity) => { let reportID: string | undefined = getReportID(route); const reportAction = getActionToFlag(); - const parentReportAction = parentReportActions?.[report?.parentReportActionID ?? '']; // Handle threads if needed if (ReportUtils.isChatThread(report) && reportAction?.reportActionID === parentReportAction?.reportActionID) { @@ -190,11 +187,4 @@ function FlagCommentPage({parentReportActions, route, report, reportActions}: Fl FlagCommentPage.displayName = 'FlagCommentPage'; -export default withReportAndReportActionOrNotFound( - withOnyx({ - parentReportActions: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report?.parentReportID ?? report?.reportID}`, - canEvict: false, - }, - })(FlagCommentPage), -); +export default withReportAndReportActionOrNotFound(FlagCommentPage); diff --git a/src/pages/home/report/withReportAndReportActionOrNotFound.tsx b/src/pages/home/report/withReportAndReportActionOrNotFound.tsx index f8d52744d8aa..3fe43e96266a 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 {OnyxCollection, OnyxEntry, WithOnyxInstanceState} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import withWindowDimensions from '@components/withWindowDimensions'; @@ -10,7 +10,6 @@ import type {WindowDimensionsProps} from '@components/withWindowDimensions/types import compose from '@libs/compose'; import getComponentDisplayName from '@libs/getComponentDisplayName'; import type {FlagCommentNavigatorParamList} from '@libs/Navigation/types'; -import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import NotFoundPage from '@pages/ErrorPage/NotFoundPage'; import * as Report from '@userActions/Report'; @@ -29,6 +28,9 @@ type OnyxProps = { /** Array of report actions for this report */ reportActions: OnyxEntry; + /** The report's parentReportAction */ + parentReportAction: OnyxEntry; + /** The policies which the user has access to */ policies: OnyxCollection; @@ -50,11 +52,11 @@ export default function ; } @@ -115,6 +119,17 @@ export default function `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${route.params.reportID}`, canEvict: false, }, + parentReportAction: { + key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`, + selector: (parentReportActions: OnyxEntry, props: WithOnyxInstanceState): OnyxEntry => { + const parentReportActionID = props?.report?.parentReportActionID; + if (!parentReportActionID) { + return null; + } + return parentReportActions?.[parentReportActionID] ?? null; + }, + canEvict: false, + }, }), withWindowDimensions, )(React.forwardRef(WithReportOrNotFound));