Replace withOnyx with useOnyx

Expensify · Aug 31, 2024 · e56d529 · e56d529
1 parent 117b961
commit e56d529
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 28 deletions.
diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx
@@ -1,9 +1,8 @@
 import type {RouteProp} from '@react-navigation/native';
-import {useNavigationState} from '@react-navigation/native';
 import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {forwardRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import type {AuthScreensParamList, BottomTabNavigatorParamList, FullScreenNavigatorParamList, ReimbursementAccountNavigatorParamList, SettingsNavigatorParamList} from '@navigation/types';
 import * as Policy from '@userActions/Policy/Policy';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -70,11 +69,14 @@ const policyDefaultProps: WithPolicyOnyxProps = {
 /*
  * HOC for connecting a policy in Onyx corresponding to the policyID in route params
  */
-export default function <TProps extends WithPolicyProps, TRef>(WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>): React.ComponentType<Omit<TProps, keyof WithPolicyOnyxProps>> {
-    function WithPolicy(props: TProps, ref: ForwardedRef<TRef>) {
-        const routes = useNavigationState((state) => state.routes || []);
-        const currentRoute = routes?.at(-1);
-        const policyID = getPolicyIDFromRoute(currentRoute as PolicyRoute);
+export default function <TProps extends WithPolicyProps, TRef>(
+    WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
+): React.ComponentType<Omit<TProps, keyof WithPolicyOnyxProps> & RefAttributes<TRef>> {
+    function WithPolicy(props: Omit<TProps, keyof WithPolicyOnyxProps>, ref: ForwardedRef<TRef>) {
+        const policyID = getPolicyIDFromRoute(props.route as PolicyRoute);
+
+        const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+        const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`);
 
         if (policyID.length > 0) {
             Policy.updateLastAccessedWorkspace(policyID);
@@ -83,22 +85,17 @@ export default function <TProps extends WithPolicyProps, TRef>(WrappedComponent:
         return (
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
-                {...props}
+                {...(props as TProps)}
+                policy={policy}
+                policyDraft={policyDraft}
                 ref={ref}
             />
         );
     }
 
     WithPolicy.displayName = `WithPolicy`;
 
-    return withOnyx<TProps & RefAttributes<TRef>, WithPolicyOnyxProps>({
-        policy: {
-            key: (props) => `${ONYXKEYS.COLLECTION.POLICY}${getPolicyIDFromRoute(props.route)}`,
-        },
-        policyDraft: {
-            key: (props) => `${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${getPolicyIDFromRoute(props.route)}`,
-        },
-    })(forwardRef(WithPolicy));
+    return forwardRef(WithPolicy);
 }
 
 export {policyDefaultProps};

diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx
@@ -2,7 +2,7 @@ import isEmpty from 'lodash/isEmpty';
 import type {ComponentType, ForwardedRef, RefAttributes} from 'react';
 import React, {forwardRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import FullscreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {PersonalDetailsList} from '@src/types/onyx';
@@ -27,9 +27,12 @@ export default function withPolicyAndFullscreenLoading<TProps extends WithPolicy
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): ComponentWithPolicyAndFullscreenLoading<TProps, TRef> {
     function WithPolicyAndFullscreenLoading(
-        {isLoadingReportData = true, policy = policyDefaultProps.policy, policyDraft = policyDefaultProps.policyDraft, ...rest}: TProps,
+        {policy = policyDefaultProps.policy, policyDraft = policyDefaultProps.policyDraft, ...rest}: Omit<TProps, keyof WithPolicyAndFullscreenLoadingOnyxProps>,
         ref: ForwardedRef<TRef>,
     ) {
+        const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
+        const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
+
         if (isLoadingReportData && isEmpty(policy) && isEmpty(policyDraft)) {
             return <FullscreenLoadingIndicator />;
         }
@@ -39,6 +42,7 @@ export default function withPolicyAndFullscreenLoading<TProps extends WithPolicy
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...(rest as TProps)}
                 isLoadingReportData={isLoadingReportData}
+                personalDetails={personalDetails}
                 policy={policy}
                 policyDraft={policyDraft}
                 ref={ref}
@@ -48,16 +52,7 @@ export default function withPolicyAndFullscreenLoading<TProps extends WithPolicy
 
     WithPolicyAndFullscreenLoading.displayName = `WithPolicyAndFullscreenLoading`;
 
-    return withPolicy(
-        withOnyx<TProps & RefAttributes<TRef>, WithPolicyAndFullscreenLoadingOnyxProps>({
-            isLoadingReportData: {
-                key: ONYXKEYS.IS_LOADING_REPORT_DATA,
-            },
-            personalDetails: {
-                key: ONYXKEYS.PERSONAL_DETAILS_LIST,
-            },
-        })(forwardRef(WithPolicyAndFullscreenLoading)),
-    );
+    return withPolicy(forwardRef(WithPolicyAndFullscreenLoading));
 }
 
 export type {WithPolicyAndFullscreenLoadingProps};