Merge pull request #54702 from etCoderDysto/remove-withCurrentReportID-usage

fix: Remove withCurrentReportID HOC

Author: luacmartins

src/App.tsx

@@ -29,11 +29,11 @@ import {FullScreenContextProvider} from './components/VideoPlayerContexts/FullSc
 import {PlaybackContextProvider} from './components/VideoPlayerContexts/PlaybackContext';
 import {VideoPopoverMenuContextProvider} from './components/VideoPlayerContexts/VideoPopoverMenuContext';
 import {VolumeContextProvider} from './components/VideoPlayerContexts/VolumeContext';
-import {CurrentReportIDContextProvider} from './components/withCurrentReportID';
 import {EnvironmentProvider} from './components/withEnvironment';
 import {KeyboardStateProvider} from './components/withKeyboardState';
 import CONFIG from './CONFIG';
 import Expensify from './Expensify';
+import {CurrentReportIDContextProvider} from './hooks/useCurrentReportID';
 import useDefaultDragAndDrop from './hooks/useDefaultDragAndDrop';
 import {ReportIDsContextProvider} from './hooks/useReportIDs';
 import OnyxUpdateManager from './libs/actions/OnyxUpdateManager';

src/components/withCurrentReportID.tsx

@@ -1,7 +1,63 @@
-import {useContext} from 'react';
-import type {CurrentReportIDContextValue} from '@components/withCurrentReportID';
-import {CurrentReportIDContext} from '@components/withCurrentReportID';
+import type {NavigationState} from '@react-navigation/native';
+import React, {createContext, useCallback, useContext, useMemo, useState} from 'react';
+import Navigation from '@libs/Navigation/Navigation';
+
+type CurrentReportIDContextValue = {
+    updateCurrentReportID: (state: NavigationState) => void;
+    currentReportID: string | undefined;
+};
+
+type CurrentReportIDContextProviderProps = {
+    /** Actual content wrapped by this component */
+    children: React.ReactNode;
+};
+
+const CurrentReportIDContext = createContext<CurrentReportIDContextValue | null>(null);
+
+function CurrentReportIDContextProvider(props: CurrentReportIDContextProviderProps) {
+    const [currentReportID, setCurrentReportID] = useState<string | undefined>('');
+
+    /**
+     * This function is used to update the currentReportID
+     * @param state root navigation state
+     */
+    const updateCurrentReportID = useCallback(
+        (state: NavigationState) => {
+            const reportID = Navigation.getTopmostReportId(state);
+
+            /*
+             * Make sure we don't make the reportID undefined when switching between the chat list and settings tab.
+             * This helps prevent unnecessary re-renders.
+             */
+            const params = state?.routes?.[state.index]?.params;
+            if (params && 'screen' in params && typeof params.screen === 'string' && params.screen.indexOf('Settings_') !== -1) {
+                return;
+            }
+            setCurrentReportID(reportID);
+        },
+        [setCurrentReportID],
+    );
+
+    /**
+     * The context this component exposes to child components
+     * @returns currentReportID to share between central pane and LHN
+     */
+    const contextValue = useMemo(
+        (): CurrentReportIDContextValue => ({
+            updateCurrentReportID,
+            currentReportID,
+        }),
+        [updateCurrentReportID, currentReportID],
+    );
+
+    return <CurrentReportIDContext.Provider value={contextValue}>{props.children}</CurrentReportIDContext.Provider>;
+}
+
+CurrentReportIDContextProvider.displayName = 'CurrentReportIDContextProvider';
 
 export default function useCurrentReportID(): CurrentReportIDContextValue | null {
     return useContext(CurrentReportIDContext);
 }
+
+export {CurrentReportIDContextProvider};
+export type {CurrentReportIDContextValue};

src/hooks/useCurrentReportID.tsx

@@ -70,7 +70,7 @@ function BottomTabBar({selectedTab}: BottomTabBarProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const {activeWorkspaceID} = useActiveWorkspace();
-    const {currentReportID} = useCurrentReportID() ?? {currentReportID: null};
+    const {currentReportID = null} = useCurrentReportID() ?? {};
     const [user] = useOnyx(ONYXKEYS.USER);
     const [betas] = useOnyx(ONYXKEYS.BETAS);
     const [priorityMode] = useOnyx(ONYXKEYS.NVP_PRIORITY_MODE);

src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/BottomTabBar.tsx

@@ -16,10 +16,10 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
-import type {CurrentReportIDContextValue} from '@components/withCurrentReportID';
-import withCurrentReportID from '@components/withCurrentReportID';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useAppFocusEvent from '@hooks/useAppFocusEvent';
+import type {CurrentReportIDContextValue} from '@hooks/useCurrentReportID';
+import useCurrentReportID from '@hooks/useCurrentReportID';
 import useDeepCompareRef from '@hooks/useDeepCompareRef';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
@@ -97,7 +97,7 @@ function getParentReportAction(parentReportActions: OnyxEntry<OnyxTypes.ReportAc
     return parentReportActions[parentReportActionID ?? '0'];
 }
 
-function ReportScreen({route, currentReportID = '', navigation}: ReportScreenProps) {
+function ReportScreen({route, navigation}: ReportScreenProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const reportIDFromRoute = getReportID(route);
@@ -112,6 +112,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
     const {isOffline} = useNetwork();
     const {shouldUseNarrowLayout, isInNarrowPaneModal} = useResponsiveLayout();
     const {activeWorkspaceID} = useActiveWorkspace();
+    const currentReportIDValue = useCurrentReportID();
 
     const [modal] = useOnyx(ONYXKEYS.MODAL);
     const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportIDFromRoute}`, {initialValue: false});
@@ -277,7 +278,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
     const lastReportAction = [...combinedReportActions, parentReportAction].find((action) => ReportUtils.canEditReportAction(action) && !ReportActionsUtils.isMoneyRequestAction(action));
     const isSingleTransactionView = ReportUtils.isMoneyRequest(report) || ReportUtils.isTrackExpenseReport(report);
     const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${report?.policyID ?? '-1'}`];
-    const isTopMostReportId = currentReportID === reportIDFromRoute;
+    const isTopMostReportId = currentReportIDValue?.currentReportID === reportIDFromRoute;
     const didSubscribeToReportLeavingEvents = useRef(false);
     const [showSoftInputOnFocus, setShowSoftInputOnFocus] = useState(false);
 
@@ -870,4 +871,4 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
 }
 
 ReportScreen.displayName = 'ReportScreen';
-export default withCurrentReportID(memo(ReportScreen, (prevProps, nextProps) => prevProps.currentReportID === nextProps.currentReportID && lodashIsEqual(prevProps.route, nextProps.route)));
+export default memo(ReportScreen, (prevProps, nextProps) => lodashIsEqual(prevProps.route, nextProps.route));

src/pages/home/ReportScreen.tsx

@@ -6,7 +6,7 @@ import Onyx from 'react-native-onyx';
 import ComposeProviders from '@components/ComposeProviders';
 import {LocaleContextProvider} from '@components/LocaleContextProvider';
 import OnyxProvider from '@components/OnyxProvider';
-import {CurrentReportIDContextProvider} from '@components/withCurrentReportID';
+import {CurrentReportIDContextProvider} from '@hooks/useCurrentReportID';
 import * as useResponsiveLayoutModule from '@hooks/useResponsiveLayout';
 import type ResponsiveLayoutResult from '@hooks/useResponsiveLayout/types';
 import * as Localize from '@libs/Localize';

tests/ui/WorkspaceCategoriesTest.tsx

@@ -6,8 +6,8 @@ import React from 'react';
 import ComposeProviders from '@components/ComposeProviders';
 import {LocaleContextProvider} from '@components/LocaleContextProvider';
 import OnyxProvider from '@components/OnyxProvider';
-import {CurrentReportIDContextProvider} from '@components/withCurrentReportID';
 import {EnvironmentProvider} from '@components/withEnvironment';
+import {CurrentReportIDContextProvider} from '@hooks/useCurrentReportID';
 import {ReportIDsContextProvider} from '@hooks/useReportIDs';
 import DateUtils from '@libs/DateUtils';
 import * as ReportUtils from '@libs/ReportUtils';