Add debug option to LHN context menu

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, withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {ContextMenuItemHandle} from '@components/ContextMenuItem';
 import ContextMenuItem from '@components/ContextMenuItem';
 import FocusTrapForModal from '@components/FocusTrap/FocusTrapForModal';
@@ -23,25 +23,14 @@ import shouldEnableContextMenuEnterShortcut from '@libs/shouldEnableContextMenuE
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Beta, ReportAction, ReportActions, Transaction} from '@src/types/onyx';
+import type {ReportAction} 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 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 & {
+type BaseReportActionContextMenuProps = {
     /** The ID of the report this report action is attached to. */
     reportID: string;
 
@@ -114,10 +103,7 @@ function BaseReportActionContextMenu({
     selection = '',
     draftMessage = '',
     reportActionID,
-    transaction,
     reportID,
-    betas,
-    reportActions,
     checkIfContextMenuActive,
     disabledActions = [],
     setIsEmojiPickerActive,
@@ -131,6 +117,13 @@ function BaseReportActionContextMenu({
     const {isOffline} = useNetwork();
     const {isProduction} = useEnvironment();
     const threedotRef = useRef<View>(null);
+    const [betas] = useOnyx(ONYXKEYS.BETAS);
+    const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {
+        canEvict: false,
+    });
+    const transactionID = ReportActionsUtils.getLinkedTransactionID(reportActionID, reportID);
+    const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
+    const [user] = useOnyx(ONYXKEYS.USER);
 
     const reportAction: OnyxEntry<ReportAction> = useMemo(() => {
         if (isEmptyObject(reportActions) || reportActionID === '0' || reportActionID === '-1') {
@@ -185,22 +178,23 @@ function BaseReportActionContextMenu({
     let filteredContextMenuActions = ContextMenuActions.filter(
         (contextAction) =>
             !disabledActions.includes(contextAction) &&
-            contextAction.shouldShow(
+            contextAction.shouldShow({
                 type,
                 reportAction,
                 isArchivedRoom,
                 betas,
-                anchor,
+                menuTarget: anchor,
                 isChronosReport,
                 reportID,
                 isPinnedChat,
                 isUnreadChat,
-                !!isOffline,
+                isOffline: !!isOffline,
                 isMini,
                 isProduction,
                 moneyRequestAction,
                 areHoldRequirementsMet,
-            ),
+                user,
+            }),
     );
 
     if (isMini) {
@@ -358,35 +352,6 @@ function BaseReportActionContextMenu({
     );
 }
 
-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);
-    }),
-);
+export default memo(BaseReportActionContextMenu, lodashIsEqual);
 
 export type {BaseReportActionContextMenuProps};