From f5bf126ac503195f28684a36cd92ca58395ce9d6 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Fri, 12 Jan 2024 01:54:46 +0530 Subject: [PATCH 01/11] WIP-WorkspacePageWithSections migrated to tsx --- .../BlockingViews/FullPageNotFoundView.tsx | 2 +- src/components/ScrollViewWithContext.tsx | 8 +- ...tions.js => WorkspacePageWithSections.tsx} | 115 ++++++++---------- src/pages/workspace/withPolicy.tsx | 2 +- 4 files changed, 56 insertions(+), 71 deletions(-) rename src/pages/workspace/{WorkspacePageWithSections.js => WorkspacePageWithSections.tsx} (63%) diff --git a/src/components/BlockingViews/FullPageNotFoundView.tsx b/src/components/BlockingViews/FullPageNotFoundView.tsx index 5993e60861f5..cb7d978ca265 100644 --- a/src/components/BlockingViews/FullPageNotFoundView.tsx +++ b/src/components/BlockingViews/FullPageNotFoundView.tsx @@ -36,7 +36,7 @@ type FullPageNotFoundViewProps = { onBackButtonPress: () => void; /** Function to call when pressing the navigation link */ - onLinkPress: () => void; + onLinkPress?: () => void; }; // eslint-disable-next-line rulesdir/no-negated-variables diff --git a/src/components/ScrollViewWithContext.tsx b/src/components/ScrollViewWithContext.tsx index 478a0555e89e..9561d05d4a1a 100644 --- a/src/components/ScrollViewWithContext.tsx +++ b/src/components/ScrollViewWithContext.tsx @@ -1,6 +1,6 @@ import type {ForwardedRef} from 'react'; import React, {useMemo, useRef, useState} from 'react'; -import type {NativeScrollEvent, NativeSyntheticEvent} from 'react-native'; +import type {NativeScrollEvent, NativeSyntheticEvent, ScrollViewProps} from 'react-native'; import {ScrollView} from 'react-native'; const MIN_SMOOTH_SCROLL_EVENT_THROTTLE = 16; @@ -16,10 +16,10 @@ const ScrollContext = React.createContext({ }); type ScrollViewWithContextProps = { - onScroll: (event: NativeSyntheticEvent) => void; + onScroll?: (event: NativeSyntheticEvent) => void; children?: React.ReactNode; - scrollEventThrottle: number; -} & Partial; + scrollEventThrottle?: number; +} & Partial; /* * is a wrapper around that provides a ref to the . diff --git a/src/pages/workspace/WorkspacePageWithSections.js b/src/pages/workspace/WorkspacePageWithSections.tsx similarity index 63% rename from src/pages/workspace/WorkspacePageWithSections.js rename to src/pages/workspace/WorkspacePageWithSections.tsx index a51f7861cba5..a55eb2c19b90 100644 --- a/src/pages/workspace/WorkspacePageWithSections.js +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -1,9 +1,6 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; -import React, {useEffect, useRef} from 'react'; +import React, {ComponentType, ReactNode, useEffect, useRef} from 'react'; import {View} from 'react-native'; -import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; +import {OnyxEntry, withOnyx} from 'react-native-onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -11,76 +8,59 @@ import ScreenWrapper from '@components/ScreenWrapper'; import ScrollViewWithContext from '@components/ScrollViewWithContext'; import useNetwork from '@hooks/useNetwork'; import useThemeStyles from '@hooks/useThemeStyles'; -import compose from '@libs/compose'; import BankAccount from '@libs/models/BankAccount'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; -import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes'; -import userPropTypes from '@pages/settings/userPropTypes'; import * as BankAccounts from '@userActions/BankAccounts'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES from '@src/ROUTES'; +import ROUTES, {Route} from '@src/ROUTES'; +import type {Policy, ReimbursementAccount} from '@src/types/onyx'; +import type UserOnyx from '@src/types/onyx/User'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import type {PolicyRoute, WithPolicyOnyxProps} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; -const propTypes = { - shouldSkipVBBACall: PropTypes.bool, - - /** The text to display in the header */ - headerText: PropTypes.string.isRequired, - - /** The route object passed to this page from the navigator */ - route: PropTypes.shape({ - /** Each parameter passed via the URL */ - params: PropTypes.shape({ - /** The policyID that is being configured */ - policyID: PropTypes.string.isRequired, - }).isRequired, - }).isRequired, - +type WorkspacePageWithSectionsOnyxProps = { /** From Onyx */ /** Bank account attached to free plan */ - reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes, + reimbursementAccount: OnyxEntry; /** User Data from Onyx */ - user: userPropTypes, + user: OnyxEntry; +}; + +type WorkspacePageWithSectionsProps = WorkspacePageWithSectionsOnyxProps & { + shouldSkipVBBACall: boolean; + + /** The text to display in the header */ + headerText: string; + + /** The route object passed to this page from the navigator */ + route: PolicyRoute; /** Main content of the page */ - children: PropTypes.func, + children: (hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => ReactNode; /** Content to be added as fixed footer */ - footer: PropTypes.element, + footer: ReactNode; /** The guides call task ID to associate with the workspace page being shown */ - guidesCallTaskID: PropTypes.string, + guidesCallTaskID: string; /** The route where we navigate when the user press the back button */ - backButtonRoute: PropTypes.string, - - /** Policy values needed in the component */ - policy: PropTypes.shape({ - name: PropTypes.string, - }).isRequired, + backButtonRoute: Route; /** Option to use the default scroll view */ - shouldUseScrollView: PropTypes.bool, + shouldUseScrollView: boolean; /** Option to show the loading page while the API is calling */ - shouldShowLoading: PropTypes.bool, -}; + shouldShowLoading: boolean; -const defaultProps = { - children: () => {}, - user: {}, - reimbursementAccount: ReimbursementAccountProps.reimbursementAccountDefaultProps, - footer: null, - guidesCallTaskID: '', - shouldUseScrollView: false, - shouldSkipVBBACall: false, - backButtonRoute: '', - shouldShowLoading: true, + /** Policy values needed in the component */ + policy: OnyxEntry; }; -function fetchData(skipVBBACal) { +function fetchData(skipVBBACal?: boolean) { if (skipVBBACal) { return; } @@ -101,17 +81,17 @@ function WorkspacePageWithSections({ shouldSkipVBBACall, user, shouldShowLoading, -}) { +}: WorkspacePageWithSectionsProps) { const styles = useThemeStyles(); useNetwork({onReconnect: () => fetchData(shouldSkipVBBACall)}); - const isLoading = lodashGet(reimbursementAccount, 'isLoading', true); - const achState = lodashGet(reimbursementAccount, 'achData.state', ''); + const isLoading = reimbursementAccount?.isLoading ?? true; + const achState = reimbursementAccount?.achData?.state ?? ''; + const isUsingECard = user?.isUsingExpensifyCard ?? false; + const policyID = route.params.policyID; + const policyName = policy?.name; const hasVBA = achState === BankAccount.STATE.OPEN; - const isUsingECard = lodashGet(user, 'isUsingExpensifyCard', false); - const policyID = lodashGet(route, 'params.policyID'); - const policyName = lodashGet(policy, 'name'); - const content = children(hasVBA, policyID, isUsingECard); + const content = children && children(hasVBA, policyID, isUsingECard); const firstRender = useRef(true); useEffect(() => { @@ -123,6 +103,14 @@ function WorkspacePageWithSections({ fetchData(shouldSkipVBBACall); }, [shouldSkipVBBACall]); + const shouldShow = () => { + if (isEmptyObject(policy)) { + return true; + } + + return !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy); + }; + return ( Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} - shouldShow={_.isEmpty(policy) || !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy)} - subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'} + shouldShow={shouldShow()} + subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'} > ({ user: { key: ONYXKEYS.USER, }, reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, - }), - withPolicyAndFullscreenLoading, -)(WorkspacePageWithSections); + })(WorkspacePageWithSections) as any, +); diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx index ec38b61fb0dc..6ac1712278fb 100644 --- a/src/pages/workspace/withPolicy.tsx +++ b/src/pages/workspace/withPolicy.tsx @@ -131,4 +131,4 @@ export default function (WrappedComponent: } export {policyPropTypes, policyDefaultProps}; -export type {WithPolicyOnyxProps, WithPolicyProps}; +export type {WithPolicyOnyxProps, WithPolicyProps, PolicyRoute}; From a1409c138c431958b8da4962f03b5a53661135c6 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Wed, 17 Jan 2024 16:22:21 +0530 Subject: [PATCH 02/11] feat: extract WithPolicyAndFullscreenLoadingProps and intersectioned it with WorkspacePageWithSectionsProps --- src/components/ScrollViewWithContext.tsx | 2 +- .../workspace/WorkspacePageWithSections.tsx | 58 ++++++++++--------- .../invoices/WorkspaceInvoicesPage.tsx | 7 ++- .../withPolicyAndFullscreenLoading.tsx | 2 + 4 files changed, 39 insertions(+), 30 deletions(-) diff --git a/src/components/ScrollViewWithContext.tsx b/src/components/ScrollViewWithContext.tsx index 9561d05d4a1a..4d465ed64a74 100644 --- a/src/components/ScrollViewWithContext.tsx +++ b/src/components/ScrollViewWithContext.tsx @@ -54,7 +54,7 @@ function ScrollViewWithContextWithRef({onScroll, scrollEventThrottle, children, {...restProps} ref={scrollViewRef} onScroll={setContextScrollPosition} - scrollEventThrottle={scrollEventThrottle || MIN_SMOOTH_SCROLL_EVENT_THROTTLE} + scrollEventThrottle={scrollEventThrottle ?? MIN_SMOOTH_SCROLL_EVENT_THROTTLE} > {children} diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index a55eb2c19b90..607a92068783 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -1,6 +1,8 @@ -import React, {ComponentType, ReactNode, useEffect, useRef} from 'react'; +import React, {useEffect, useRef} from 'react'; +import type {ReactNode} from 'react'; import {View} from 'react-native'; -import {OnyxEntry, withOnyx} from 'react-native-onyx'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx/lib/types'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; @@ -13,12 +15,14 @@ import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as BankAccounts from '@userActions/BankAccounts'; import ONYXKEYS from '@src/ONYXKEYS'; -import ROUTES, {Route} from '@src/ROUTES'; +import ROUTES from '@src/ROUTES'; +import type {Route} from '@src/ROUTES'; import type {Policy, ReimbursementAccount} from '@src/types/onyx'; import type UserOnyx from '@src/types/onyx/User'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import type {PolicyRoute, WithPolicyOnyxProps} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; +import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; +import type { PolicyRoute } from './withPolicy'; type WorkspacePageWithSectionsOnyxProps = { /** From Onyx */ @@ -29,36 +33,38 @@ type WorkspacePageWithSectionsOnyxProps = { user: OnyxEntry; }; -type WorkspacePageWithSectionsProps = WorkspacePageWithSectionsOnyxProps & { - shouldSkipVBBACall: boolean; - /** The text to display in the header */ - headerText: string; +type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps & + WorkspacePageWithSectionsOnyxProps & { + shouldSkipVBBACall: boolean; - /** The route object passed to this page from the navigator */ - route: PolicyRoute; + /** The text to display in the header */ + headerText: string; - /** Main content of the page */ - children: (hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => ReactNode; + /** The route object passed to this page from the navigator */ + route: PolicyRoute; - /** Content to be added as fixed footer */ - footer: ReactNode; + /** Main content of the page */ + children: (hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => ReactNode; - /** The guides call task ID to associate with the workspace page being shown */ - guidesCallTaskID: string; + /** Content to be added as fixed footer */ + footer: ReactNode; - /** The route where we navigate when the user press the back button */ - backButtonRoute: Route; + /** The guides call task ID to associate with the workspace page being shown */ + guidesCallTaskID: string; - /** Option to use the default scroll view */ - shouldUseScrollView: boolean; + /** The route where we navigate when the user press the back button */ + backButtonRoute: Route; - /** Option to show the loading page while the API is calling */ - shouldShowLoading: boolean; + /** Option to use the default scroll view */ + shouldUseScrollView: boolean; - /** Policy values needed in the component */ - policy: OnyxEntry; -}; + /** Option to show the loading page while the API is calling */ + shouldShowLoading: boolean; + + /** Policy values needed in the component */ + policy: OnyxEntry; + }; function fetchData(skipVBBACal?: boolean) { if (skipVBBACal) { @@ -162,5 +168,5 @@ export default withPolicyAndFullscreenLoading( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, - })(WorkspacePageWithSections) as any, + })(WorkspacePageWithSections), ); diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx index 2126409231b8..3f2d9c0f766a 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx @@ -20,10 +20,11 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) { route={route} guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES} > - {(hasVBA: boolean, policyID: string) => ( + + {(hasVBA?: boolean, policyID?: string) => ( <> - {!hasVBA && } - {hasVBA && } + {!hasVBA && policyID && } + {hasVBA && policyID && } )} diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx index 892facb92823..93e10cc1760c 100644 --- a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx +++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx @@ -63,3 +63,5 @@ export default function withPolicyAndFullscreenLoading Date: Thu, 18 Jan 2024 18:32:22 +0530 Subject: [PATCH 03/11] fix: route prop type updated --- src/pages/workspace/WorkspacePageWithSections.tsx | 15 +++++++-------- .../workspace/invoices/WorkspaceInvoicesPage.tsx | 11 +++++------ 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index 607a92068783..bcadf4704a36 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -20,9 +20,9 @@ import type {Route} from '@src/ROUTES'; import type {Policy, ReimbursementAccount} from '@src/types/onyx'; import type UserOnyx from '@src/types/onyx/User'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import type {PolicyRoute} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; -import type { PolicyRoute } from './withPolicy'; type WorkspacePageWithSectionsOnyxProps = { /** From Onyx */ @@ -33,10 +33,9 @@ type WorkspacePageWithSectionsOnyxProps = { user: OnyxEntry; }; - type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps & WorkspacePageWithSectionsOnyxProps & { - shouldSkipVBBACall: boolean; + shouldSkipVBBACall?: boolean; /** The text to display in the header */ headerText: string; @@ -48,19 +47,19 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps & children: (hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => ReactNode; /** Content to be added as fixed footer */ - footer: ReactNode; + footer?: ReactNode; /** The guides call task ID to associate with the workspace page being shown */ guidesCallTaskID: string; /** The route where we navigate when the user press the back button */ - backButtonRoute: Route; + backButtonRoute?: Route; /** Option to use the default scroll view */ - shouldUseScrollView: boolean; + shouldUseScrollView?: boolean; /** Option to show the loading page while the API is calling */ - shouldShowLoading: boolean; + shouldShowLoading?: boolean; /** Policy values needed in the component */ policy: OnyxEntry; @@ -134,7 +133,7 @@ function WorkspacePageWithSections({ subtitle={policyName} shouldShowGetAssistanceButton guidesCallTaskID={guidesCallTaskID} - onBackButtonPress={() => Navigation.goBack(backButtonRoute || ROUTES.WORKSPACE_INITIAL.getRoute(policyID))} + onBackButtonPress={() => Navigation.goBack(backButtonRoute ?? ROUTES.WORKSPACE_INITIAL.getRoute(policyID))} /> {(isLoading || firstRender.current) && shouldShowLoading ? ( diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx index 3f2d9c0f766a..d9083039fb38 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx @@ -1,14 +1,14 @@ -import type {StackScreenProps} from '@react-navigation/stack'; import React from 'react'; import useLocalize from '@hooks/useLocalize'; -import type {SettingsNavigatorParamList} from '@libs/Navigation/types'; +import type {PolicyRoute} from '@pages/workspace/withPolicy'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; import CONST from '@src/CONST'; -import type SCREENS from '@src/SCREENS'; import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView'; import WorkspaceInvoicesVBAView from './WorkspaceInvoicesVBAView'; -type WorkspaceInvoicesPageProps = StackScreenProps; +type WorkspaceInvoicesPageProps = { + route: PolicyRoute; +}; function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) { const {translate} = useLocalize(); @@ -17,10 +17,9 @@ function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) { - {(hasVBA?: boolean, policyID?: string) => ( <> {!hasVBA && policyID && } From 08b57c05ed25e9cd5c1c302d68bb65babbbb6b6a Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Mon, 22 Jan 2024 15:06:41 +0530 Subject: [PATCH 04/11] fix: used shared type from types/onyx --- src/components/TestToolMenu.tsx | 3 +-- src/pages/workspace/WorkspacePageWithSections.tsx | 5 ++--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 7c0b3a6e33e1..0b2d96754f1f 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -9,8 +9,7 @@ import * as Session from '@userActions/Session'; import * as User from '@userActions/User'; import CONFIG from '@src/CONFIG'; import ONYXKEYS from '@src/ONYXKEYS'; -import type NetworkOnyx from '@src/types/onyx/Network'; -import type UserOnyx from '@src/types/onyx/User'; +import type {Network as NetworkOnyx, User as UserOnyx} from '@src/types/onyx'; import Button from './Button'; import {withNetwork} from './OnyxProvider'; import Switch from './Switch'; diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index bcadf4704a36..1154718620e1 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -17,8 +17,7 @@ import * as BankAccounts from '@userActions/BankAccounts'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Route} from '@src/ROUTES'; -import type {Policy, ReimbursementAccount} from '@src/types/onyx'; -import type UserOnyx from '@src/types/onyx/User'; +import type {Policy, ReimbursementAccount, User} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import type {PolicyRoute} from './withPolicy'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; @@ -30,7 +29,7 @@ type WorkspacePageWithSectionsOnyxProps = { reimbursementAccount: OnyxEntry; /** User Data from Onyx */ - user: OnyxEntry; + user: OnyxEntry; }; type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps & From 93656c3168121f87eccce82885841a558e075872 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Mon, 22 Jan 2024 17:43:37 +0530 Subject: [PATCH 05/11] feat: added default values and extracted USER_DEFAULT to CONST.ts --- src/CONST.ts | 2 ++ src/components/TestToolMenu.tsx | 5 ++--- .../workspace/WorkspacePageWithSections.tsx | 19 ++++++++++--------- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 0b10e5767328..2db0b36f4f8a 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3132,6 +3132,8 @@ const CONST = { }, MINI_CONTEXT_MENU_MAX_ITEMS: 4, + + USER_DEFAULT: {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false}, } as const; export default CONST; diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index 0b2d96754f1f..b3d600767272 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -8,6 +8,7 @@ import * as Network from '@userActions/Network'; import * as Session from '@userActions/Session'; import * as User from '@userActions/User'; import CONFIG from '@src/CONFIG'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Network as NetworkOnyx, User as UserOnyx} from '@src/types/onyx'; import Button from './Button'; @@ -26,9 +27,7 @@ type TestToolMenuProps = TestToolMenuOnyxProps & { network: OnyxEntry; }; -const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false}; - -function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { +function TestToolMenu({user = CONST.USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); const styles = useThemeStyles(); diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index 1154718620e1..0e8437f1a21f 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -14,6 +14,7 @@ import BankAccount from '@libs/models/BankAccount'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as BankAccounts from '@userActions/BankAccounts'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Route} from '@src/ROUTES'; @@ -73,18 +74,18 @@ function fetchData(skipVBBACal?: boolean) { } function WorkspacePageWithSections({ - backButtonRoute, - children, - footer, - guidesCallTaskID, + backButtonRoute = '', + children = () => null, + footer = null, + guidesCallTaskID = '', headerText, policy, - reimbursementAccount, + reimbursementAccount = {}, route, - shouldUseScrollView, - shouldSkipVBBACall, - user, - shouldShowLoading, + shouldUseScrollView = false, + shouldSkipVBBACall = false, + user = CONST.USER_DEFAULT, + shouldShowLoading = true, }: WorkspacePageWithSectionsProps) { const styles = useThemeStyles(); useNetwork({onReconnect: () => fetchData(shouldSkipVBBACall)}); From bd9298dd15c5b02783b3ecc4e5d190bd6856edb3 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Mon, 22 Jan 2024 17:52:08 +0530 Subject: [PATCH 06/11] feat: memoized shouldShow --- src/pages/workspace/WorkspacePageWithSections.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index 0e8437f1a21f..796c1c7f1cb8 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -1,4 +1,4 @@ -import React, {useEffect, useRef} from 'react'; +import React, {useEffect, useMemo, useRef} from 'react'; import type {ReactNode} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; @@ -108,13 +108,14 @@ function WorkspacePageWithSections({ fetchData(shouldSkipVBBACall); }, [shouldSkipVBBACall]); - const shouldShow = () => { + + const shouldShow = useMemo(() => { if (isEmptyObject(policy)) { return true; } return !PolicyUtils.isPolicyAdmin(policy) || PolicyUtils.isPendingDeletePolicy(policy); - }; + }, [policy]); return ( Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} - shouldShow={shouldShow()} + shouldShow={shouldShow} subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'} > Date: Mon, 22 Jan 2024 17:53:05 +0530 Subject: [PATCH 07/11] fix: removed optional children condition --- src/pages/workspace/WorkspacePageWithSections.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index 796c1c7f1cb8..dd58a883723e 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -96,7 +96,7 @@ function WorkspacePageWithSections({ const policyID = route.params.policyID; const policyName = policy?.name; const hasVBA = achState === BankAccount.STATE.OPEN; - const content = children && children(hasVBA, policyID, isUsingECard); + const content = children(hasVBA, policyID, isUsingECard); const firstRender = useRef(true); useEffect(() => { From b5602b213f3a2d905c679149bc1c702e10840114 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Mon, 22 Jan 2024 19:05:37 +0530 Subject: [PATCH 08/11] fix: replaced PolicyRoute usage with RouteProp policyID --- src/pages/workspace/WorkspacePageWithSections.tsx | 7 +++---- src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx | 5 +++-- src/pages/workspace/withPolicy.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index dd58a883723e..054f4911c7d2 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -1,3 +1,4 @@ +import type {RouteProp} from '@react-navigation/native'; import React, {useEffect, useMemo, useRef} from 'react'; import type {ReactNode} from 'react'; import {View} from 'react-native'; @@ -20,9 +21,8 @@ import ROUTES from '@src/ROUTES'; import type {Route} from '@src/ROUTES'; import type {Policy, ReimbursementAccount, User} from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; -import type {PolicyRoute} from './withPolicy'; -import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; +import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; type WorkspacePageWithSectionsOnyxProps = { /** From Onyx */ @@ -41,7 +41,7 @@ type WorkspacePageWithSectionsProps = WithPolicyAndFullscreenLoadingProps & headerText: string; /** The route object passed to this page from the navigator */ - route: PolicyRoute; + route: RouteProp<{params: {policyID: string}}>; /** Main content of the page */ children: (hasVBA?: boolean, policyID?: string, isUsingECard?: boolean) => ReactNode; @@ -108,7 +108,6 @@ function WorkspacePageWithSections({ fetchData(shouldSkipVBBACall); }, [shouldSkipVBBACall]); - const shouldShow = useMemo(() => { if (isEmptyObject(policy)) { return true; diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx index d9083039fb38..79ff76204c69 100644 --- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx +++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.tsx @@ -1,13 +1,14 @@ +import type {RouteProp} from '@react-navigation/native'; import React from 'react'; import useLocalize from '@hooks/useLocalize'; -import type {PolicyRoute} from '@pages/workspace/withPolicy'; import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections'; import CONST from '@src/CONST'; import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView'; import WorkspaceInvoicesVBAView from './WorkspaceInvoicesVBAView'; +/** Defined route object that contains the policyID param, WorkspacePageWithSections is a common component for Workspaces and expect the route prop that includes the policyID */ type WorkspaceInvoicesPageProps = { - route: PolicyRoute; + route: RouteProp<{params: {policyID: string}}>; }; function WorkspaceInvoicesPage({route}: WorkspaceInvoicesPageProps) { diff --git a/src/pages/workspace/withPolicy.tsx b/src/pages/workspace/withPolicy.tsx index 6ac1712278fb..ec38b61fb0dc 100644 --- a/src/pages/workspace/withPolicy.tsx +++ b/src/pages/workspace/withPolicy.tsx @@ -131,4 +131,4 @@ export default function (WrappedComponent: } export {policyPropTypes, policyDefaultProps}; -export type {WithPolicyOnyxProps, WithPolicyProps, PolicyRoute}; +export type {WithPolicyOnyxProps, WithPolicyProps}; From a292d268ee0360a763e164884bbf9b052deeb227 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Tue, 23 Jan 2024 13:00:06 +0530 Subject: [PATCH 09/11] revert USER_DEFAULT from CONST --- src/CONST.ts | 1 - src/components/TestToolMenu.tsx | 4 ++-- src/pages/workspace/WorkspacePageWithSections.tsx | 2 +- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/CONST.ts b/src/CONST.ts index 9305f9d950cd..639d34808ba8 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -3132,7 +3132,6 @@ const CONST = { MINI_CONTEXT_MENU_MAX_ITEMS: 4, - USER_DEFAULT: {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false}, REPORT_FIELD_TITLE_FIELD_ID: 'text_title', } as const; diff --git a/src/components/TestToolMenu.tsx b/src/components/TestToolMenu.tsx index b3d600767272..410bd5081e25 100644 --- a/src/components/TestToolMenu.tsx +++ b/src/components/TestToolMenu.tsx @@ -8,7 +8,6 @@ import * as Network from '@userActions/Network'; import * as Session from '@userActions/Session'; import * as User from '@userActions/User'; import CONFIG from '@src/CONFIG'; -import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {Network as NetworkOnyx, User as UserOnyx} from '@src/types/onyx'; import Button from './Button'; @@ -26,8 +25,9 @@ type TestToolMenuProps = TestToolMenuOnyxProps & { /** Network object in Onyx */ network: OnyxEntry; }; +const USER_DEFAULT: UserOnyx = {shouldUseStagingServer: undefined, isSubscribedToNewsletter: false, validated: false, isFromPublicDomain: false, isUsingExpensifyCard: false}; -function TestToolMenu({user = CONST.USER_DEFAULT, network}: TestToolMenuProps) { +function TestToolMenu({user = USER_DEFAULT, network}: TestToolMenuProps) { const shouldUseStagingServer = user?.shouldUseStagingServer ?? ApiUtils.isUsingStagingApi(); const styles = useThemeStyles(); diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index 054f4911c7d2..edef2bb74834 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -84,7 +84,7 @@ function WorkspacePageWithSections({ route, shouldUseScrollView = false, shouldSkipVBBACall = false, - user = CONST.USER_DEFAULT, + user = null, shouldShowLoading = true, }: WorkspacePageWithSectionsProps) { const styles = useThemeStyles(); From 88f0d0dd883e5def81fd8343bb22b3df9827a576 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Tue, 23 Jan 2024 14:15:19 +0530 Subject: [PATCH 10/11] fix: revert user value set to null --- src/pages/workspace/WorkspacePageWithSections.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index edef2bb74834..d0f291f19cec 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -84,7 +84,7 @@ function WorkspacePageWithSections({ route, shouldUseScrollView = false, shouldSkipVBBACall = false, - user = null, + user, shouldShowLoading = true, }: WorkspacePageWithSectionsProps) { const styles = useThemeStyles(); From ee29a019ea3699ed41bc4288a1e619117164ab90 Mon Sep 17 00:00:00 2001 From: Jayesh Mangwani Date: Tue, 23 Jan 2024 16:15:34 +0530 Subject: [PATCH 11/11] removed unnecessary import --- src/pages/workspace/WorkspacePageWithSections.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/workspace/WorkspacePageWithSections.tsx b/src/pages/workspace/WorkspacePageWithSections.tsx index d0f291f19cec..8817f813a990 100644 --- a/src/pages/workspace/WorkspacePageWithSections.tsx +++ b/src/pages/workspace/WorkspacePageWithSections.tsx @@ -15,7 +15,6 @@ import BankAccount from '@libs/models/BankAccount'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as BankAccounts from '@userActions/BankAccounts'; -import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type {Route} from '@src/ROUTES';