From e56d5299e14a5b754918479af5ee6d992b7dcf4c Mon Sep 17 00:00:00 2001 From: Andrii Vitiv Date: Thu, 29 Aug 2024 22:36:38 +0300 Subject: [PATCH 1/3] Replace `withOnyx` with `useOnyx` --- src/pages/workspace/withPolicy.tsx | 29 +++++++++---------- .../withPolicyAndFullscreenLoading.tsx | 19 +++++------- 2 files changed, 20 insertions(+), 28 deletions(-) diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx index b6da4dd689e6..b3a502400633 100644 --- 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 (WrappedComponent: ComponentType>): React.ComponentType> { - function WithPolicy(props: TProps, ref: ForwardedRef) { - const routes = useNavigationState((state) => state.routes || []); - const currentRoute = routes?.at(-1); - const policyID = getPolicyIDFromRoute(currentRoute as PolicyRoute); +export default function ( + WrappedComponent: ComponentType>, +): React.ComponentType & RefAttributes> { + function WithPolicy(props: Omit, ref: ForwardedRef) { + 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,7 +85,9 @@ export default function (WrappedComponent: return ( ); @@ -91,14 +95,7 @@ export default function (WrappedComponent: WithPolicy.displayName = `WithPolicy`; - return withOnyx, 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 index 2467136a382b..686e7bd54655 100644 --- 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>, ): ComponentWithPolicyAndFullscreenLoading { function WithPolicyAndFullscreenLoading( - {isLoadingReportData = true, policy = policyDefaultProps.policy, policyDraft = policyDefaultProps.policyDraft, ...rest}: TProps, + {policy = policyDefaultProps.policy, policyDraft = policyDefaultProps.policyDraft, ...rest}: Omit, ref: ForwardedRef, ) { + const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true}); + const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); + if (isLoadingReportData && isEmpty(policy) && isEmpty(policyDraft)) { return ; } @@ -39,6 +42,7 @@ export default function withPolicyAndFullscreenLoading, WithPolicyAndFullscreenLoadingOnyxProps>({ - isLoadingReportData: { - key: ONYXKEYS.IS_LOADING_REPORT_DATA, - }, - personalDetails: { - key: ONYXKEYS.PERSONAL_DETAILS_LIST, - }, - })(forwardRef(WithPolicyAndFullscreenLoading)), - ); + return withPolicy(forwardRef(WithPolicyAndFullscreenLoading)); } export type {WithPolicyAndFullscreenLoadingProps}; From 84ed1a8ae380ff87a8cc45259e7ef8df70c3332b Mon Sep 17 00:00:00 2001 From: Andrii Vitiv Date: Sat, 31 Aug 2024 22:04:04 +0300 Subject: [PATCH 2/3] Delay navigation to run after interactions --- .../NetSuiteImportAddCustomListPage.tsx | 6 ++++-- .../NetSuiteImportAddCustomSegmentPage.tsx | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx index e08cf4dac6c4..7ed94bb497b3 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useMemo, useRef} from 'react'; import type {ForwardedRef} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import ConnectionLayout from '@components/ConnectionLayout'; import FormProvider from '@components/Form/FormProvider'; import type {FormInputErrors, FormOnyxValues} from '@components/Form/types'; @@ -36,7 +36,9 @@ function NetSuiteImportAddCustomListPage({policy}: WithPolicyConnectionsProps) { const customLists = useMemo(() => config?.syncOptions?.customLists ?? [], [config?.syncOptions]); const handleFinishStep = useCallback(() => { - Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_FIELD_MAPPING.getRoute(policyID, CONST.NETSUITE_CONFIG.IMPORT_CUSTOM_FIELDS.CUSTOM_LISTS)); + InteractionManager.runAfterInteractions(() => { + Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_FIELD_MAPPING.getRoute(policyID, CONST.NETSUITE_CONFIG.IMPORT_CUSTOM_FIELDS.CUSTOM_LISTS)); + }); }, [policyID]); const { diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx index 1a24a117ac85..49aee7f96000 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx @@ -1,6 +1,6 @@ import React, {useCallback, useMemo, useRef, useState} from 'react'; import type {ForwardedRef} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import type {ValueOf} from 'type-fest'; import ConnectionLayout from '@components/ConnectionLayout'; import FormProvider from '@components/Form/FormProvider'; @@ -40,7 +40,9 @@ function NetSuiteImportAddCustomSegmentPage({policy}: WithPolicyConnectionsProps const customSegments = useMemo(() => config?.syncOptions?.customSegments ?? [], [config?.syncOptions]); const handleFinishStep = useCallback(() => { - Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_FIELD_MAPPING.getRoute(policyID, CONST.NETSUITE_CONFIG.IMPORT_CUSTOM_FIELDS.CUSTOM_SEGMENTS)); + InteractionManager.runAfterInteractions(() => { + Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_FIELD_MAPPING.getRoute(policyID, CONST.NETSUITE_CONFIG.IMPORT_CUSTOM_FIELDS.CUSTOM_SEGMENTS)); + }); }, [policyID]); const { From 7810fdcff87d6c4d0a0917ce9cc905c6ce7edac9 Mon Sep 17 00:00:00 2001 From: Andrii Vitiv Date: Sat, 31 Aug 2024 22:08:38 +0300 Subject: [PATCH 3/3] Check if NetSuite options is not null --- .../workspace/accounting/netsuite/import/NetSuiteImportPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx index c3d77b656b50..15bc437782b7 100644 --- a/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx +++ b/src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx @@ -23,7 +23,7 @@ function NetSuiteImportPage({policy}: WithPolicyConnectionsProps) { const {canUseNetSuiteUSATax} = usePermissions(); const policyID = policy?.id ?? '-1'; - const config = policy?.connections?.netsuite?.options.config; + const config = policy?.connections?.netsuite?.options?.config; const {subsidiaryList} = policy?.connections?.netsuite?.options?.data ?? {}; const selectedSubsidiary = useMemo(() => (subsidiaryList ?? []).find((subsidiary) => subsidiary.internalID === config?.subsidiaryID), [subsidiaryList, config?.subsidiaryID]);