revert withOnyx changes

Expensify · Oct 7, 2024 · 183b8f5 · 183b8f5
1 parent a6445bd
commit 183b8f5
Showing 1 changed file with 48 additions and 19 deletions.
diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx
@@ -5,7 +5,7 @@ import {InteractionManager, View} from 'react-native';
 // eslint-disable-next-line no-restricted-imports
 import type {GestureResponderEvent, Text as RNText, View as ViewType} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {useOnyx} from 'react-native-onyx';
+import {useOnyx, withOnyx} from 'react-native-onyx';
 import type {ContextMenuItemHandle} from '@components/ContextMenuItem';
 import ContextMenuItem from '@components/ContextMenuItem';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
@@ -23,14 +23,25 @@ import shouldEnableContextMenuEnterShortcut from '@libs/shouldEnableContextMenuE
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReportAction} from '@src/types/onyx';
+import type {Beta, ReportAction, ReportActions, Transaction} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type {ContextMenuAction, ContextMenuActionPayload} from './ContextMenuActions';
 import ContextMenuActions from './ContextMenuActions';
 import type {ContextMenuAnchor, ContextMenuType} from './ReportActionContextMenu';
 import {hideContextMenu, showContextMenu} from './ReportActionContextMenu';
 
-type BaseReportActionContextMenuProps = {
+type BaseReportActionContextMenuOnyxProps = {
+    /** Beta features list */
+    betas: OnyxEntry<Beta[]>;
+
+    /** All of the actions of the report */
+    reportActions: OnyxEntry<ReportActions>;
+
+    /** The transaction linked to the report action this context menu is attached to. */
+    transaction: OnyxEntry<Transaction>;
+};
+
+type BaseReportActionContextMenuProps = BaseReportActionContextMenuOnyxProps & {
     /** The ID of the report this report action is attached to. */
     reportID: string;
 
@@ -103,8 +114,10 @@ function BaseReportActionContextMenu({
     selection = '',
     draftMessage = '',
     reportActionID,
+    transaction,
     reportID,
-    originalReportID,
+    betas,
+    reportActions,
     checkIfContextMenuActive,
     disabledActions = [],
     setIsEmojiPickerActive,
@@ -119,18 +132,13 @@ function BaseReportActionContextMenu({
     const {isProduction} = useEnvironment();
     const threedotRef = useRef<View>(null);
 
-    const [betas] = useOnyx(`${ONYXKEYS.BETAS}`);
-    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`, {canEvict: false});
-
     const reportAction: OnyxEntry<ReportAction> = useMemo(() => {
         if (isEmptyObject(reportActions) || reportActionID === '0' || reportActionID === '-1') {
             return;
         }
         return reportActions[reportActionID];
     }, [reportActions, reportActionID]);
 
-    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${(reportAction && ReportActionsUtils.getLinkedTransactionID(reportAction)) ?? -1}`);
-
     const sourceID = ReportUtils.getSourceIDFromReportAction(reportAction);
 
     const [download] = useOnyx(`${ONYXKEYS.COLLECTION.DOWNLOAD}${sourceID}`);
@@ -172,6 +180,8 @@ function BaseReportActionContextMenu({
     const areHoldRequirementsMet =
         !isInvoiceReport && isMoneyRequestOrReport && !ReportUtils.isArchivedRoom(transactionThreadReportID ? childReport : parentReport, parentReportNameValuePairs);
 
+    const originalReportID = useMemo(() => ReportUtils.getOriginalReportID(reportID, reportAction), [reportID, reportAction]);
+
     const shouldEnableArrowNavigation = !isMini && (isVisible || shouldKeepOpen);
     let filteredContextMenuActions = ContextMenuActions.filter(
         (contextAction) =>
@@ -349,16 +359,35 @@ function BaseReportActionContextMenu({
     );
 }
 
-export default memo(BaseReportActionContextMenu, (prevProps, nextProps) => {
-    const {reportActionID: prevReportActionID, ...prevPropsWithoutReportActions} = prevProps;
-    const {reportActionID: nextReportActionID, ...nextPropsWithoutReportActions} = nextProps;
-
-    // We only want to re-render when the report action that is attached to is changed
-    if (prevReportActionID !== nextReportActionID) {
-        return false;
-    }
+export default withOnyx<BaseReportActionContextMenuProps, BaseReportActionContextMenuOnyxProps>({
+    betas: {
+        key: ONYXKEYS.BETAS,
+    },
+    reportActions: {
+        key: ({originalReportID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${originalReportID}`,
+        canEvict: false,
+    },
+    transaction: {
+        key: ({reportActions, reportActionID}) => {
+            const reportAction = reportActions?.[reportActionID];
+            return `${ONYXKEYS.COLLECTION.TRANSACTION}${(reportAction && ReportActionsUtils.getLinkedTransactionID(reportAction)) ?? -1}`;
+        },
+    },
+})(
+    memo(BaseReportActionContextMenu, (prevProps, nextProps) => {
+        const {reportActions: prevReportActions, ...prevPropsWithoutReportActions} = prevProps;
+        const {reportActions: nextReportActions, ...nextPropsWithoutReportActions} = nextProps;
+
+        const prevReportAction = prevReportActions?.[prevProps.reportActionID] ?? '';
+        const nextReportAction = nextReportActions?.[nextProps.reportActionID] ?? '';
+
+        // We only want to re-render when the report action that is attached to is changed
+        if (prevReportAction !== nextReportAction) {
+            return false;
+        }
 
-    return lodashIsEqual(prevPropsWithoutReportActions, nextPropsWithoutReportActions);
-});
+        return lodashIsEqual(prevPropsWithoutReportActions, nextPropsWithoutReportActions);
+    }),
+);
 
 export type {BaseReportActionContextMenuProps};