Merge pull request Expensify#66148 from mohammadjafarinejad/fix/65961

roryabraham · web-flow · commit bde1509fece7 · 2025-07-24T13:56:21.000-07:00
Fix/65961 - Remove remaining withOnyx HOCs from the project | Batch 1
diff --git a/src/components/AnonymousReportFooter.tsx b/src/components/AnonymousReportFooter.tsx
@@ -1,34 +1,30 @@
 import React from 'react';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import usePolicy from '@hooks/usePolicy';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as Session from '@userActions/Session';
-import ONYXKEYS from '@src/ONYXKEYS';
-import type {Policy, Report} from '@src/types/onyx';
+import {signOutAndRedirectToSignIn} from '@userActions/Session';
+import type {Report} from '@src/types/onyx';
 import AvatarWithDisplayName from './AvatarWithDisplayName';
 import Button from './Button';
 import ExpensifyWordmark from './ExpensifyWordmark';
 import Text from './Text';
 
-type AnonymousReportFooterPropsWithOnyx = {
-    /** The policy which the user has access to and which the report is tied to */
-    policy: OnyxEntry<Policy>;
-};
-
-type AnonymousReportFooterProps = AnonymousReportFooterPropsWithOnyx & {
+type AnonymousReportFooterProps = {
     /** The report currently being looked at */
     report: OnyxEntry<Report>;
 
     /** Whether the small screen size layout should be used */
     isSmallSizeLayout?: boolean;
 };
 
-function AnonymousReportFooter({isSmallSizeLayout = false, report, policy}: AnonymousReportFooterProps) {
+function AnonymousReportFooter({isSmallSizeLayout = false, report}: AnonymousReportFooterProps) {
     const styles = useThemeStyles();
     const {translate} = useLocalize();
 
+    const policy = usePolicy(report?.policyID);
+
     return (
         <View style={styles.anonymousRoomFooter(isSmallSizeLayout)}>
             <View style={[styles.flexRow, styles.flexShrink1]}>
@@ -50,7 +46,7 @@ function AnonymousReportFooter({isSmallSizeLayout = false, report, policy}: Anon
                     <Button
                         success
                         text={translate('common.signIn')}
-                        onPress={() => Session.signOutAndRedirectToSignIn()}
+                        onPress={signOutAndRedirectToSignIn as () => void}
                     />
                 </View>
             </View>
@@ -60,8 +56,4 @@ function AnonymousReportFooter({isSmallSizeLayout = false, report, policy}: Anon
 
 AnonymousReportFooter.displayName = 'AnonymousReportFooter';
 
-export default withOnyx<AnonymousReportFooterProps, AnonymousReportFooterPropsWithOnyx>({
-    policy: {
-        key: ({report}) => `${ONYXKEYS.COLLECTION.POLICY}${report?.policyID}`,
-    },
-})(AnonymousReportFooter);
+export default AnonymousReportFooter;
diff --git a/src/components/CardPreview.tsx b/src/components/CardPreview.tsx
@@ -1,26 +1,19 @@
 import React from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
 import ExpensifyCardImage from '@assets/images/expensify-card.svg';
+import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import variables from '@styles/variables';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {PrivatePersonalDetails, Session} from '@src/types/onyx';
 import ImageSVG from './ImageSVG';
 import Text from './Text';
 
-type CardPreviewOnyxProps = {
-    /** User's private personal details */
-    privatePersonalDetails: OnyxEntry<PrivatePersonalDetails>;
-    /** Session info for the currently logged in user. */
-    session: OnyxEntry<Session>;
-};
+function CardPreview() {
+    const styles = useThemeStyles();
 
-type CardPreviewProps = CardPreviewOnyxProps;
+    const [privatePersonalDetails] = useOnyx(ONYXKEYS.PRIVATE_PERSONAL_DETAILS, {canBeMissing: true});
+    const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true});
 
-function CardPreview({privatePersonalDetails, session}: CardPreviewProps) {
-    const styles = useThemeStyles();
     const {legalFirstName, legalLastName} = privatePersonalDetails ?? {};
     const cardHolder = legalFirstName && legalLastName ? `${legalFirstName} ${legalLastName}` : (session?.email ?? '');
 
@@ -46,11 +39,4 @@ function CardPreview({privatePersonalDetails, session}: CardPreviewProps) {
 
 CardPreview.displayName = 'CardPreview';
 
-export default withOnyx<CardPreviewProps, CardPreviewOnyxProps>({
-    privatePersonalDetails: {
-        key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
-    },
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(CardPreview);
+export default CardPreview;
diff --git a/src/components/ConfirmedRoute.tsx b/src/components/ConfirmedRoute.tsx
@@ -1,16 +1,16 @@
 import React, {useCallback, useEffect} from 'react';
 import type {ReactNode} from 'react';
-import {withOnyx} from 'react-native-onyx';
 import type {OnyxEntry} from 'react-native-onyx';
 import useNetwork from '@hooks/useNetwork';
+import useOnyx from '@hooks/useOnyx';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as TransactionUtils from '@libs/TransactionUtils';
-import * as MapboxToken from '@userActions/MapboxToken';
+import {getWaypointIndex} from '@libs/TransactionUtils';
+import {init as initMapboxToken, stop as stopMapboxToken} from '@userActions/MapboxToken';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {MapboxAccessToken, Transaction} from '@src/types/onyx';
+import type {Transaction} from '@src/types/onyx';
 import type {WaypointCollection} from '@src/types/onyx/Transaction';
 import type IconAsset from '@src/types/utils/IconAsset';
 import DistanceMapView from './DistanceMapView';
@@ -19,12 +19,7 @@ import ImageSVG from './ImageSVG';
 import type {WayPoint} from './MapView/MapViewTypes';
 import PendingMapView from './MapView/PendingMapView';
 
-type ConfirmedRoutePropsOnyxProps = {
-    /** Data about Mapbox token for calling Mapbox API */
-    mapboxAccessToken: OnyxEntry<MapboxAccessToken>;
-};
-
-type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
+type ConfirmedRouteProps = {
     /** Transaction that stores the distance expense data */
     transaction: OnyxEntry<Transaction>;
 
@@ -42,7 +37,7 @@ type ConfirmedRouteProps = ConfirmedRoutePropsOnyxProps & {
     interactive?: boolean;
 };
 
-function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHaveBorderRadius = true, requireRouteToDisplayMap = false, interactive}: ConfirmedRouteProps) {
+function ConfirmedRoute({transaction, isSmallerIcon, shouldHaveBorderRadius = true, requireRouteToDisplayMap = false, interactive}: ConfirmedRouteProps) {
     const {isOffline} = useNetwork();
     const {route0: route} = transaction?.routes ?? {};
     const waypoints = transaction?.comment?.waypoints ?? {};
@@ -51,6 +46,8 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHa
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
 
+    const [mapboxAccessToken] = useOnyx(ONYXKEYS.MAPBOX_ACCESS_TOKEN, {canBeMissing: true});
+
     const getMarkerComponent = useCallback(
         (icon: IconAsset): ReactNode => (
             <ImageSVG
@@ -74,7 +71,7 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHa
                         return;
                     }
 
-                    const index = TransactionUtils.getWaypointIndex(key);
+                    const index = getWaypointIndex(key);
                     let MarkerComponent: IconAsset;
                     if (index === 0) {
                         MarkerComponent = Expensicons.DotIndicatorUnfilled;
@@ -98,8 +95,8 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHa
     const waypointMarkers = getWaypointMarkers(waypoints);
 
     useEffect(() => {
-        MapboxToken.init();
-        return MapboxToken.stop;
+        initMapboxToken();
+        return stopMapboxToken;
     }, []);
 
     const shouldDisplayMap = !requireRouteToDisplayMap || !!coordinates.length;
@@ -128,10 +125,6 @@ function ConfirmedRoute({mapboxAccessToken, transaction, isSmallerIcon, shouldHa
     );
 }
 
-export default withOnyx<ConfirmedRouteProps, ConfirmedRoutePropsOnyxProps>({
-    mapboxAccessToken: {
-        key: ONYXKEYS.MAPBOX_ACCESS_TOKEN,
-    },
-})(ConfirmedRoute);
-
 ConfirmedRoute.displayName = 'ConfirmedRoute';
+
+export default ConfirmedRoute;
diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx
@@ -4,26 +4,26 @@ import type {CSSProperties} from 'react';
 import React, {memo, useCallback, useEffect, useState} from 'react';
 import {PDFPreviewer} from 'react-fast-pdf';
 import {View} from 'react-native';
-import {withOnyx} from 'react-native-onyx';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import usePrevious from '@hooks/usePrevious';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import variables from '@styles/variables';
-import * as CanvasSize from '@userActions/CanvasSize';
+import {retrieveMaxCanvasArea, retrieveMaxCanvasHeight, retrieveMaxCanvasWidth} from '@userActions/CanvasSize';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import PDFPasswordForm from './PDFPasswordForm';
-import type {PDFViewOnyxProps, PDFViewProps} from './types';
+import type {PDFViewProps} from './types';
 
 const LOADING_THUMBNAIL_HEIGHT = 250;
 const LOADING_THUMBNAIL_WIDTH = 250;
 
-function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, maxCanvasArea, maxCanvasHeight, maxCanvasWidth, style, isUsedAsChatAttachment, onLoadError}: PDFViewProps) {
+function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, style, isUsedAsChatAttachment, onLoadError}: PDFViewProps) {
     const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -32,6 +32,10 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max
     const prevWindowHeight = usePrevious(windowHeight);
     const {translate} = useLocalize();
 
+    const [maxCanvasArea] = useOnyx(ONYXKEYS.MAX_CANVAS_AREA, {canBeMissing: true});
+    const [maxCanvasHeight] = useOnyx(ONYXKEYS.MAX_CANVAS_HEIGHT, {canBeMissing: true});
+    const [maxCanvasWidth] = useOnyx(ONYXKEYS.MAX_CANVAS_WIDTH, {canBeMissing: true});
+
     /**
      * On small screens notify parent that the keyboard has opened or closed.
      *
@@ -53,15 +57,15 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max
      */
     const retrieveCanvasLimits = () => {
         if (!maxCanvasArea) {
-            CanvasSize.retrieveMaxCanvasArea();
+            retrieveMaxCanvasArea();
         }
 
         if (!maxCanvasHeight) {
-            CanvasSize.retrieveMaxCanvasHeight();
+            retrieveMaxCanvasHeight();
         }
 
         if (!maxCanvasWidth) {
-            CanvasSize.retrieveMaxCanvasWidth();
+            retrieveMaxCanvasWidth();
         }
     };
 
@@ -142,14 +146,4 @@ function PDFView({onToggleKeyboard, fileName, onPress, isFocused, sourceURL, max
     );
 }
 
-export default withOnyx<PDFViewProps, PDFViewOnyxProps>({
-    maxCanvasArea: {
-        key: ONYXKEYS.MAX_CANVAS_AREA,
-    },
-    maxCanvasHeight: {
-        key: ONYXKEYS.MAX_CANVAS_HEIGHT,
-    },
-    maxCanvasWidth: {
-        key: ONYXKEYS.MAX_CANVAS_WIDTH,
-    },
-})(memo(PDFView));
+export default memo(PDFView);
diff --git a/src/components/PDFView/types.ts b/src/components/PDFView/types.ts
@@ -1,7 +1,6 @@
 import type {GestureResponderEvent, StyleProp, ViewStyle} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 
-type PDFViewBaseProps = {
+type PDFViewProps = {
     /** URL to full-sized image */
     sourceURL: string;
 
@@ -33,21 +32,8 @@ type PDFViewBaseProps = {
     isUsedAsChatAttachment?: boolean;
 };
 
-type PDFViewOnyxProps = {
-    // Maximum canvas area to render the PDF preview
-    maxCanvasArea: OnyxEntry<number>;
-
-    // Maximum canvas height to render the PDF preview
-    maxCanvasHeight: OnyxEntry<number>;
-
-    // Maximum canvas width to render the PDF preview
-    maxCanvasWidth: OnyxEntry<number>;
-};
-
-type PDFViewProps = PDFViewBaseProps & PDFViewOnyxProps;
-
-type PDFViewNativeProps = PDFViewBaseProps & {
+type PDFViewNativeProps = PDFViewProps & {
     onPress?: (page: number, x: number, y: number) => void;
 };
 
-export type {PDFViewNativeProps, PDFViewProps, PDFViewOnyxProps};
+export type {PDFViewNativeProps, PDFViewProps};
