Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix "Add custom segment or record" image appears briefly after adding first segment #48297

Merged
merged 3 commits into from
Sep 9, 2024
Merged

Fix "Add custom segment or record" image appears briefly after adding first segment #48297

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e56d529
Replace `withOnyx` with `useOnyx`
CyberAndrii Aug 29, 2024
84ed1a8
Delay navigation to run after interactions
CyberAndrii Aug 31, 2024
7810fdc
Check if NetSuite options is not null
CyberAndrii Aug 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions ...counting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomListPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(() => {
CyberAndrii marked this conversation as resolved.
Show resolved Hide resolved
Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_FIELD_MAPPING.getRoute(policyID, CONST.NETSUITE_CONFIG.IMPORT_CUSTOM_FIELDS.CUSTOM_LISTS));
});
}, [policyID]);

const {
Expand Down
6 changes: 4 additions & 2 deletions ...nting/netsuite/import/NetSuiteImportCustomFieldNew/NetSuiteImportAddCustomSegmentPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@CyberAndrii Why was this logic added here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#48297 (comment). Delays the navigation until optimistic onyx data is applied and the page is re-rendered

Navigation.goBack(ROUTES.POLICY_ACCOUNTING_NETSUITE_IMPORT_CUSTOM_FIELD_MAPPING.getRoute(policyID, CONST.NETSUITE_CONFIG.IMPORT_CUSTOM_FIELDS.CUSTOM_SEGMENTS));
});
}, [policyID]);

const {
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/accounting/netsuite/import/NetSuiteImportPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]);

Expand Down
29 changes: 13 additions & 16 deletions src/pages/workspace/withPolicy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand All @@ -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};
Expand Down
19 changes: 7 additions & 12 deletions src/pages/workspace/withPolicyAndFullscreenLoading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 />;
}
Expand All @@ -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}
Expand All @@ -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};
Loading