[Audit][Implementation] Refactor ReportActionItem subscriptions

src/pages/home/report/ReportActionItem.tsx

@@ -98,9 +98,6 @@ type ReportActionItemOnyxProps = {
     /** The user's wallet account */
     userWallet: OnyxEntry<OnyxTypes.UserWallet>;
 
-    /** All the report actions belonging to the report's parent */
-    parentReportActions: OnyxEntry<OnyxTypes.ReportActions>;
-
     /** All policy report fields */
     policyReportFields: OnyxEntry<OnyxTypes.PolicyReportFields>;
 
@@ -112,6 +109,9 @@ type ReportActionItemProps = {
     /** Report for this action */
     report: OnyxTypes.Report;
 
+    /** Report action belonging to the report's parent */
+    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
+
     /** All the data of the action item */
     action: OnyxTypes.ReportAction;
 
@@ -151,7 +151,7 @@ function ReportActionItem({
     index,
     iouReport,
     isMostRecentIOUReportAction,
-    parentReportActions,
+    parentReportAction,
     preferredSkinTone = CONST.EMOJI_DEFAULT_SKIN_TONE,
     shouldDisplayNewMarker,
     userWallet,
@@ -665,7 +665,6 @@ function ReportActionItem({
     };
 
     if (action.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED) {
-        const parentReportAction = parentReportActions?.[report.parentReportActionID ?? ''] ?? null;
         if (ReportActionsUtils.isTransactionThread(parentReportAction)) {
             const isReversedTransaction = ReportActionsUtils.isReversedTransaction(parentReportAction);
             if (ReportActionsUtils.isDeletedParentAction(parentReportAction) || isReversedTransaction) {
@@ -898,14 +897,10 @@ export default withOnyx<ReportActionItemProps, ReportActionItemOnyxProps>({
     userWallet: {
         key: ONYXKEYS.USER_WALLET,
     },
-    parentReportActions: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report.parentReportID ?? 0}`,
-        canEvict: false,
-    },
 })(
     memo(ReportActionItem, (prevProps, nextProps) => {
-        const prevParentReportAction = prevProps.parentReportActions?.[prevProps.report.parentReportActionID ?? ''];
-        const nextParentReportAction = nextProps.parentReportActions?.[nextProps.report.parentReportActionID ?? ''];
+        const prevParentReportAction = prevProps.parentReportAction;
+        const nextParentReportAction = nextProps.parentReportAction;
         return (
             prevProps.displayAsGroup === nextProps.displayAsGroup &&
             prevProps.isMostRecentIOUReportAction === nextProps.isMostRecentIOUReportAction &&

src/pages/home/report/ReportActionItemParentAction.tsx

@@ -1,6 +1,5 @@
 import React, {useEffect, useRef, useState} from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -16,12 +15,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import AnimatedEmptyStateBackground from './AnimatedEmptyStateBackground';
 import ReportActionItem from './ReportActionItem';
 
-type ReportActionItemParentActionOnyxProps = {
-    /** The current report is displayed */
-    report: OnyxEntry<OnyxTypes.Report>;
-};
-
-type ReportActionItemParentActionProps = ReportActionItemParentActionOnyxProps & {
+type ReportActionItemParentActionProps = {
     /** Flag to show, hide the thread divider line */
     shouldHideThreadDividerLine?: boolean;
 
@@ -31,9 +25,15 @@ type ReportActionItemParentActionProps = ReportActionItemParentActionOnyxProps &
     /** The id of the report */
     // eslint-disable-next-line react/no-unused-prop-types
     reportID: string;
+
+    /** The current report is displayed */
+    report: OnyxEntry<OnyxTypes.Report>;
+
+    /** Report actions belonging to the report's parent */
+    parentReportAction: OnyxEntry<OnyxTypes.ReportAction>;
 };
 
-function ReportActionItemParentAction({report, index = 0, shouldHideThreadDividerLine = false}: ReportActionItemParentActionProps) {
+function ReportActionItemParentAction({report, parentReportAction, index = 0, shouldHideThreadDividerLine = false}: ReportActionItemParentActionProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -84,6 +84,7 @@ function ReportActionItemParentAction({report, index = 0, shouldHideThreadDivide
                 >
                     <ReportActionItem
                         onPress={() => Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(ancestor.report.reportID))}
+                        parentReportAction={parentReportAction}
                         report={ancestor.report}
                         action={ancestor.reportAction}
                         displayAsGroup={false}
@@ -100,8 +101,4 @@ function ReportActionItemParentAction({report, index = 0, shouldHideThreadDivide
 
 ReportActionItemParentAction.displayName = 'ReportActionItemParentAction';
 
-export default withOnyx<ReportActionItemParentActionProps, ReportActionItemParentActionOnyxProps>({
-    report: {
-        key: ({reportID}) => `${ONYXKEYS.COLLECTION.REPORT}${reportID}`,
-    },
-})(ReportActionItemParentAction);
+export default ReportActionItemParentAction;

src/pages/home/report/ReportActionsListItemRenderer.tsx

@@ -119,12 +119,15 @@ function ReportActionsListItemRenderer({
     return shouldDisplayParentAction ? (
         <ReportActionItemParentAction
             shouldHideThreadDividerLine={shouldDisplayParentAction && shouldHideThreadDividerLine}
+            parentReportAction={parentReportAction}
             reportID={report.reportID}
+            report={report}
             index={index}
         />
     ) : (
         <ReportActionItem
             shouldHideThreadDividerLine={shouldHideThreadDividerLine}
+            parentReportAction={parentReportAction}
             report={report}
             action={action}
             linkedReportActionID={linkedReportActionID}