From 685460b21cadc78631c9da1df3b410a358a6cd11 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Fri, 19 Jan 2024 17:22:48 +0100 Subject: [PATCH 1/6] [TS migration] Migrate 'WorkspaceInitial' page --- ...nitialPage.js => WorkspaceInitialPage.tsx} | 154 +++++++++--------- .../withPolicyAndFullscreenLoading.tsx | 1 + 2 files changed, 75 insertions(+), 80 deletions(-) rename src/pages/workspace/{WorkspaceInitialPage.js => WorkspaceInitialPage.tsx} (76%) diff --git a/src/pages/workspace/WorkspaceInitialPage.js b/src/pages/workspace/WorkspaceInitialPage.tsx similarity index 76% rename from src/pages/workspace/WorkspaceInitialPage.js rename to src/pages/workspace/WorkspaceInitialPage.tsx index 80813c84723..9839c13125e 100644 --- a/src/pages/workspace/WorkspaceInitialPage.js +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -1,13 +1,14 @@ -import lodashGet from 'lodash/get'; -import PropTypes from 'prop-types'; +import type {StackScreenProps} from '@react-navigation/stack'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import _ from 'underscore'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import type {ValueOf} from 'type-fest'; import Avatar from '@components/Avatar'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import ConfirmModal from '@components/ConfirmModal'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import type {ThreeDotsMenuItem} from '@components/HeaderWithBackButton/types'; import * as Expensicons from '@components/Icon/Expensicons'; import MenuItem from '@components/MenuItem'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; @@ -25,66 +26,66 @@ import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; -import * as ReimbursementAccountProps from '@pages/ReimbursementAccount/reimbursementAccountPropTypes'; -import reportPropTypes from '@pages/reportPropTypes'; +import type {SettingsNavigatorParamList} from '@navigation/types'; import * as App from '@userActions/App'; import * as Policy from '@userActions/Policy'; import * as ReimbursementAccount from '@userActions/ReimbursementAccount'; import CONST from '@src/CONST'; +import type {TranslationPaths} from '@src/languages/types'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import {policyDefaultProps, policyPropTypes} from './withPolicy'; +import type SCREENS from '@src/SCREENS'; +import type * as OnyxTypes from '@src/types/onyx'; +import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import type IconAsset from '@src/types/utils/IconAsset'; +import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; -const propTypes = { - ...policyPropTypes, +type WorkspaceMenuItems = { + translationKey: TranslationPaths; + icon: IconAsset; + action: () => void; + brickRoadIndicator?: ValueOf; +}; - /** All reports shared with the user (coming from Onyx) */ - reports: PropTypes.objectOf(reportPropTypes), +type WorkspaceInitialPageOnyxProps = { + /** All reports shared with the user */ + reports: OnyxCollection; /** Bank account attached to free plan */ - reimbursementAccount: ReimbursementAccountProps.reimbursementAccountPropTypes, + reimbursementAccount: OnyxEntry; }; -const defaultProps = { - reports: {}, - ...policyDefaultProps, - reimbursementAccount: {}, -}; +type WorkspaceInitialPageProps = WithPolicyAndFullscreenLoadingProps & WorkspaceInitialPageOnyxProps & StackScreenProps; -/** - * @param {string} policyID - */ -function openEditor(policyID) { +function openEditor(policyID: string) { Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policyID)); } -/** - * @param {string} policyID - */ -function dismissError(policyID) { +function dismissError(policyID: string) { Navigation.goBack(ROUTES.SETTINGS_WORKSPACES); Policy.removeWorkspace(policyID); } -function WorkspaceInitialPage(props) { +function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reportsProp, policyMembers, reimbursementAccount}: WorkspaceInitialPageProps) { const styles = useThemeStyles(); - const policy = props.policyDraft && props.policyDraft.id ? props.policyDraft : props.policy; + const policy = policyDraft?.id ? policyDraft : policyProp; const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false); const [isCurrencyModalOpen, setIsCurrencyModalOpen] = useState(false); - const hasPolicyCreationError = Boolean(policy.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors); + const hasPolicyCreationError = !!(policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD && policy.errors); const waitForNavigate = useWaitForNavigation(); const {singleExecution, isExecuting} = useSingleExecution(); const {translate} = useLocalize(); const {windowWidth} = useWindowDimensions(); - const policyID = useMemo(() => policy.id, [policy]); + const policyID = useMemo(() => policy?.id, [policy]); const [policyReports, adminsRoom, announceRoom] = useMemo(() => { - const reports = []; - let admins; - let announce; - _.each(props.reports, (report) => { + const reports: OnyxTypes.Report[] = []; + let admins: OnyxTypes.Report | undefined; + let announce: OnyxTypes.Report | undefined; + + Object.values(reportsProp ?? {}).forEach((report) => { if (!report || report.policyID !== policyID) { return; } @@ -104,101 +105,97 @@ function WorkspaceInitialPage(props) { announce = report; } }); + return [reports, admins, announce]; - }, [policyID, props.reports]); + }, [policyID, reportsProp]); - /** - * Call the delete policy and hide the modal - */ + /** Call the delete policy and hide the modal */ const confirmDeleteAndHideModal = useCallback(() => { - Policy.deleteWorkspace(policyID, policyReports, policy.name); + Policy.deleteWorkspace(policyID ?? '', policyReports, policy?.name ?? ''); setIsDeleteModalOpen(false); // Pop the deleted workspace page before opening workspace settings. Navigation.goBack(ROUTES.SETTINGS_WORKSPACES); - }, [policyID, policy.name, policyReports]); + }, [policyID, policy?.name, policyReports]); useEffect(() => { - const policyDraftId = lodashGet(props.policyDraft, 'id', null); + const policyDraftId = policyDraft?.id; + if (!policyDraftId) { return; } - App.savePolicyDraftByNewWorkspace(props.policyDraft.id, props.policyDraft.name, '', props.policyDraft.makeMeAdmin); + App.savePolicyDraftByNewWorkspace(policyDraft.id, policyDraft.name, '', policyDraft.makeMeAdmin); // We only care when the component renders the first time // eslint-disable-next-line react-hooks/exhaustive-deps }, []); useEffect(() => { - if (!isCurrencyModalOpen || policy.outputCurrency !== CONST.CURRENCY.USD) { + if (!isCurrencyModalOpen || policy?.outputCurrency !== CONST.CURRENCY.USD) { return; } setIsCurrencyModalOpen(false); - }, [policy.outputCurrency, isCurrencyModalOpen]); + }, [policy?.outputCurrency, isCurrencyModalOpen]); - /** - * Call update workspace currency and hide the modal - */ + /** Call update workspace currency and hide the modal */ const confirmCurrencyChangeAndHideModal = useCallback(() => { - Policy.updateGeneralSettings(policyID, policy.name, CONST.CURRENCY.USD); + Policy.updateGeneralSettings(policyID ?? '', policy?.name ?? '', CONST.CURRENCY.USD); setIsCurrencyModalOpen(false); - ReimbursementAccount.navigateToBankAccountRoute(policyID); - }, [policyID, policy.name]); + ReimbursementAccount.navigateToBankAccountRoute(policyID ?? ''); + }, [policyID, policy?.name]); - const policyName = lodashGet(policy, 'name', ''); - const hasMembersError = PolicyUtils.hasPolicyMemberError(props.policyMembers); - const hasGeneralSettingsError = !_.isEmpty(lodashGet(policy, 'errorFields.generalSettings', {})) || !_.isEmpty(lodashGet(policy, 'errorFields.avatar', {})); - const hasCustomUnitsError = PolicyUtils.hasCustomUnitsError(policy); - const menuItems = [ + const policyName = policy?.name ?? ''; + const hasMembersError = PolicyUtils.hasPolicyMemberError(policyMembers); + const hasGeneralSettingsError = !isEmptyObject(policy?.errorFields?.generalSettings ?? {}) || !isEmptyObject(policy?.errorFields?.avatar ?? {}); + const menuItems: WorkspaceMenuItems[] = [ { translationKey: 'workspace.common.settings', icon: Expensicons.Gear, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy.id)))), - brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '', + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy?.id ?? '')))), + brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, { translationKey: 'workspace.common.card', icon: Expensicons.ExpensifyCard, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_CARD.getRoute(policy.id)))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_CARD.getRoute(policy?.id ?? '')))), }, { translationKey: 'workspace.common.reimburse', icon: Expensicons.Receipt, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_REIMBURSE.getRoute(policy.id)))), - error: hasCustomUnitsError, + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_REIMBURSE.getRoute(policy?.id ?? '')))), }, { translationKey: 'workspace.common.bills', icon: Expensicons.Bill, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_BILLS.getRoute(policy.id)))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_BILLS.getRoute(policy?.id ?? '')))), }, { translationKey: 'workspace.common.invoices', icon: Expensicons.Invoice, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_INVOICES.getRoute(policy.id)))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_INVOICES.getRoute(policy?.id ?? '')))), }, { translationKey: 'workspace.common.travel', icon: Expensicons.Luggage, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_TRAVEL.getRoute(policy.id)))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_TRAVEL.getRoute(policy?.id ?? '')))), }, { translationKey: 'workspace.common.members', icon: Expensicons.Users, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policy.id)))), - brickRoadIndicator: hasMembersError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '', + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policy?.id ?? '')))), + brickRoadIndicator: hasMembersError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, { translationKey: 'workspace.common.bankAccount', icon: Expensicons.Bank, action: () => - policy.outputCurrency === CONST.CURRENCY.USD + policy?.outputCurrency === CONST.CURRENCY.USD ? singleExecution(waitForNavigate(() => ReimbursementAccount.navigateToBankAccountRoute(policy.id, Navigation.getActiveRouteWithoutParams())))() : setIsCurrencyModalOpen(true), - brickRoadIndicator: !_.isEmpty(props.reimbursementAccount.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '', + brickRoadIndicator: !isEmptyObject(reimbursementAccount?.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, ]; - const threeDotsMenuItems = useMemo(() => { + const threeDotsMenuItems: ThreeDotsMenuItem[] = useMemo(() => { const items = [ { icon: Expensicons.Trashcan, @@ -227,7 +224,7 @@ function WorkspaceInitialPage(props) { // eslint-disable-next-line rulesdir/no-negated-variables const shouldShowNotFoundPage = - _.isEmpty(policy) || + isEmptyObject(policy) || !PolicyUtils.isPolicyAdmin(policy) || // We check isPendingDelete for both policy and prevPolicy to prevent the NotFound view from showing right after we delete the workspace (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy)); @@ -241,7 +238,7 @@ function WorkspaceInitialPage(props) { Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} shouldShow={shouldShowNotFoundPage} - subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'} + subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'} > dismissError(policy.id)} - errors={policy.errors} + pendingAction={policy?.pendingAction} + onClose={() => dismissError(policy?.id ?? '')} + errors={policy?.errors} errorRowStyles={[styles.ph5, styles.pv2]} > @@ -269,14 +266,14 @@ function WorkspaceInitialPage(props) { openEditor(policy.id)))} + onPress={singleExecution(waitForNavigate(() => openEditor(policy?.id ?? '')))} accessibilityLabel={translate('workspace.common.settings')} role={CONST.ROLE.BUTTON} > - {!_.isEmpty(policy.name) && ( + {!!policy?.name && ( ( + {menuItems.map((item) => ( ({ reports: { key: ONYXKEYS.COLLECTION.REPORT, }, @@ -364,4 +357,5 @@ export default compose( key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, }), + withPolicyAndFullscreenLoading, )(WorkspaceInitialPage); diff --git a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx index 892facb9282..d3375bb948a 100644 --- a/src/pages/workspace/withPolicyAndFullscreenLoading.tsx +++ b/src/pages/workspace/withPolicyAndFullscreenLoading.tsx @@ -63,3 +63,4 @@ export default function withPolicyAndFullscreenLoading Date: Mon, 22 Jan 2024 16:28:00 +0100 Subject: [PATCH 2/6] Code improvements --- src/pages/workspace/WorkspaceInitialPage.tsx | 42 ++++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 9839c13125e..5e230869c4a 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -22,7 +22,6 @@ import useSingleExecution from '@hooks/useSingleExecution'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import * as ReportUtils from '@libs/ReportUtils'; @@ -41,7 +40,7 @@ import type IconAsset from '@src/types/utils/IconAsset'; import type {WithPolicyAndFullscreenLoadingProps} from './withPolicyAndFullscreenLoading'; import withPolicyAndFullscreenLoading from './withPolicyAndFullscreenLoading'; -type WorkspaceMenuItems = { +type WorkspaceMenuItem = { translationKey: TranslationPaths; icon: IconAsset; action: () => void; @@ -79,7 +78,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports const {translate} = useLocalize(); const {windowWidth} = useWindowDimensions(); - const policyID = useMemo(() => policy?.id, [policy]); + const policyID = useMemo(() => policy?.id ?? '', [policy]); const [policyReports, adminsRoom, announceRoom] = useMemo(() => { const reports: OnyxTypes.Report[] = []; let admins: OnyxTypes.Report | undefined; @@ -111,7 +110,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports /** Call the delete policy and hide the modal */ const confirmDeleteAndHideModal = useCallback(() => { - Policy.deleteWorkspace(policyID ?? '', policyReports, policy?.name ?? ''); + Policy.deleteWorkspace(policyID, policyReports, policy?.name ?? ''); setIsDeleteModalOpen(false); // Pop the deleted workspace page before opening workspace settings. Navigation.goBack(ROUTES.SETTINGS_WORKSPACES); @@ -138,50 +137,50 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports /** Call update workspace currency and hide the modal */ const confirmCurrencyChangeAndHideModal = useCallback(() => { - Policy.updateGeneralSettings(policyID ?? '', policy?.name ?? '', CONST.CURRENCY.USD); + Policy.updateGeneralSettings(policyID, policy?.name ?? '', CONST.CURRENCY.USD); setIsCurrencyModalOpen(false); - ReimbursementAccount.navigateToBankAccountRoute(policyID ?? ''); + ReimbursementAccount.navigateToBankAccountRoute(policyID); }, [policyID, policy?.name]); const policyName = policy?.name ?? ''; const hasMembersError = PolicyUtils.hasPolicyMemberError(policyMembers); const hasGeneralSettingsError = !isEmptyObject(policy?.errorFields?.generalSettings ?? {}) || !isEmptyObject(policy?.errorFields?.avatar ?? {}); - const menuItems: WorkspaceMenuItems[] = [ + const menuItems: WorkspaceMenuItem[] = [ { translationKey: 'workspace.common.settings', icon: Expensicons.Gear, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policy?.id ?? '')))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_SETTINGS.getRoute(policyID)))), brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, { translationKey: 'workspace.common.card', icon: Expensicons.ExpensifyCard, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_CARD.getRoute(policy?.id ?? '')))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_CARD.getRoute(policyID)))), }, { translationKey: 'workspace.common.reimburse', icon: Expensicons.Receipt, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_REIMBURSE.getRoute(policy?.id ?? '')))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_REIMBURSE.getRoute(policyID)))), }, { translationKey: 'workspace.common.bills', icon: Expensicons.Bill, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_BILLS.getRoute(policy?.id ?? '')))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_BILLS.getRoute(policyID)))), }, { translationKey: 'workspace.common.invoices', icon: Expensicons.Invoice, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_INVOICES.getRoute(policy?.id ?? '')))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_INVOICES.getRoute(policyID)))), }, { translationKey: 'workspace.common.travel', icon: Expensicons.Luggage, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_TRAVEL.getRoute(policy?.id ?? '')))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_TRAVEL.getRoute(policyID)))), }, { translationKey: 'workspace.common.members', icon: Expensicons.Users, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policy?.id ?? '')))), + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_MEMBERS.getRoute(policyID)))), brickRoadIndicator: hasMembersError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, { @@ -255,7 +254,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports dismissError(policy?.id ?? '')} + onClose={() => dismissError(policyID)} errors={policy?.errors} errorRowStyles={[styles.ph5, styles.pv2]} > @@ -266,14 +265,16 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports openEditor(policy?.id ?? '')))} + onPress={singleExecution(waitForNavigate(() => openEditor(policyID)))} accessibilityLabel={translate('workspace.common.settings')} role={CONST.ROLE.BUTTON} > ({ reports: { key: ONYXKEYS.COLLECTION.REPORT, @@ -356,6 +357,5 @@ export default compose( reimbursementAccount: { key: ONYXKEYS.REIMBURSEMENT_ACCOUNT, }, - }), - withPolicyAndFullscreenLoading, -)(WorkspaceInitialPage); + })(WorkspaceInitialPage), +); From 118057b886eac8fcf04fa0c9544e5dd16bc885e0 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Thu, 25 Jan 2024 09:46:15 +0100 Subject: [PATCH 3/6] Reuse policyName through the file --- src/pages/workspace/WorkspaceInitialPage.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index 1db94faaef1..4ac77af0bc2 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -83,7 +83,8 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports const {translate} = useLocalize(); const {windowWidth} = useWindowDimensions(); - const policyID = useMemo(() => policy?.id ?? '', [policy]); + const policyID = policy?.id ?? ''; + const policyName = policy?.name ?? ''; const [policyReports, adminsRoom, announceRoom] = useMemo(() => { const reports: OnyxTypes.Report[] = []; let admins: OnyxTypes.Report | undefined; @@ -115,11 +116,11 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports /** Call the delete policy and hide the modal */ const confirmDeleteAndHideModal = useCallback(() => { - Policy.deleteWorkspace(policyID, policyReports.filter(shouldArchiveReport), policy?.name ?? ''); + Policy.deleteWorkspace(policyID, policyReports.filter(shouldArchiveReport), policyName); setIsDeleteModalOpen(false); // Pop the deleted workspace page before opening workspace settings. Navigation.goBack(ROUTES.SETTINGS_WORKSPACES); - }, [policyID, policy?.name, policyReports]); + }, [policyID, policyName, policyReports]); useEffect(() => { const policyDraftId = policyDraft?.id; @@ -142,12 +143,11 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports /** Call update workspace currency and hide the modal */ const confirmCurrencyChangeAndHideModal = useCallback(() => { - Policy.updateGeneralSettings(policyID, policy?.name ?? '', CONST.CURRENCY.USD); + Policy.updateGeneralSettings(policyID, policyName, CONST.CURRENCY.USD); setIsCurrencyModalOpen(false); ReimbursementAccount.navigateToBankAccountRoute(policyID); - }, [policyID, policy?.name]); + }, [policyID, policyName]); - const policyName = policy?.name ?? ''; const hasMembersError = PolicyUtils.hasPolicyMemberError(policyMembers); const hasGeneralSettingsError = !isEmptyObject(policy?.errorFields?.generalSettings ?? {}) || !isEmptyObject(policy?.errorFields?.avatar ?? {}); const menuItems: WorkspaceMenuItem[] = [ @@ -193,7 +193,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports icon: Expensicons.Bank, action: () => policy?.outputCurrency === CONST.CURRENCY.USD - ? singleExecution(waitForNavigate(() => ReimbursementAccount.navigateToBankAccountRoute(policy.id, Navigation.getActiveRouteWithoutParams())))() + ? singleExecution(waitForNavigate(() => ReimbursementAccount.navigateToBankAccountRoute(policyID, Navigation.getActiveRouteWithoutParams())))() : setIsCurrencyModalOpen(true), brickRoadIndicator: !isEmptyObject(reimbursementAccount?.errors) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, @@ -287,12 +287,12 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports /> - {!!policy?.name && ( + {!!policyName && ( openEditor(policy.id)))} + onPress={singleExecution(waitForNavigate(() => openEditor(policyID)))} accessibilityLabel={translate('workspace.common.settings')} role={CONST.ROLE.BUTTON} > @@ -300,7 +300,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports numberOfLines={1} style={[styles.textHeadline, styles.alignSelfCenter, styles.pre]} > - {policy.name} + {policyName} From ece412c4055b3c2bbfa1ac06c9b0819bd9dfcfc7 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Tue, 30 Jan 2024 11:59:29 +0100 Subject: [PATCH 4/6] Fix TS errors in updated code --- src/pages/workspace/WorkspaceInitialPage.tsx | 8 ++++---- src/types/onyx/Policy.ts | 6 ++++++ 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index a6624e32762..79aab976c05 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -210,18 +210,18 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports // Menu options to navigate to the chat report of #admins and #announce room. // For navigation, the chat report ids may be unavailable due to the missing chat reports in Onyx. // In such cases, let us use the available chat report ids from the policy. - if (adminsRoom || policy.chatReportIDAdmins) { + if (!!adminsRoom || policy?.chatReportIDAdmins) { items.push({ icon: Expensicons.Hashtag, text: translate('workspace.common.goToRoom', {roomName: CONST.REPORT.WORKSPACE_CHAT_ROOMS.ADMINS}), - onSelected: () => Navigation.dismissModal(adminsRoom ? adminsRoom.reportID : policy.chatReportIDAdmins.toString()), + onSelected: () => Navigation.dismissModal(adminsRoom ? adminsRoom.reportID : policy?.chatReportIDAdmins?.toString()), }); } - if (announceRoom || policy.chatReportIDAnnounce) { + if (!!announceRoom || policy?.chatReportIDAnnounce) { items.push({ icon: Expensicons.Hashtag, text: translate('workspace.common.goToRoom', {roomName: CONST.REPORT.WORKSPACE_CHAT_ROOMS.ANNOUNCE}), - onSelected: () => Navigation.dismissModal(announceRoom ? announceRoom.reportID : policy.chatReportIDAnnounce.toString()), + onSelected: () => Navigation.dismissModal(announceRoom ? announceRoom.reportID : policy?.chatReportIDAnnounce?.toString()), }); } return items; diff --git a/src/types/onyx/Policy.ts b/src/types/onyx/Policy.ts index eca7e9d1ee0..7029918abb9 100644 --- a/src/types/onyx/Policy.ts +++ b/src/types/onyx/Policy.ts @@ -147,6 +147,12 @@ type Policy = { /** When tax tracking is enabled */ isTaxTrackingEnabled?: boolean; + + /** Admins chat report id */ + chatReportIDAdmins?: string; + + /** Announce chat report id */ + chatReportIDAnnounce?: string; }; export default Policy; From 766f2175eaff92a4fc5b9d791c76d01a1699bee6 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Fri, 2 Feb 2024 13:09:34 +0100 Subject: [PATCH 5/6] Apply TS updates after WorkspaceInitialPage was updated --- src/pages/workspace/WorkspaceInitialPage.tsx | 53 +++++++++----------- 1 file changed, 25 insertions(+), 28 deletions(-) diff --git a/src/pages/workspace/WorkspaceInitialPage.tsx b/src/pages/workspace/WorkspaceInitialPage.tsx index a2ca817bdf2..43610eeb30c 100644 --- a/src/pages/workspace/WorkspaceInitialPage.tsx +++ b/src/pages/workspace/WorkspaceInitialPage.tsx @@ -1,9 +1,8 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import lodashGet from 'lodash/get'; -import React, {useCallback, useEffect, useMemo, useState} from 'react'; +import React, {useCallback, useEffect, useState} from 'react'; import {ScrollView, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import Breadcrumbs from '@components/Breadcrumbs'; @@ -20,7 +19,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; -import type {SettingsNavigatorParamList} from '@navigation/types'; +import type {BottomTabNavigatorParamList} from '@navigation/types'; import * as App from '@userActions/App'; import * as Policy from '@userActions/Policy'; import * as ReimbursementAccount from '@userActions/ReimbursementAccount'; @@ -40,24 +39,22 @@ type WorkspaceMenuItem = { icon: IconAsset; action: () => void; brickRoadIndicator?: ValueOf; + routeName?: ValueOf; }; type WorkspaceInitialPageOnyxProps = { - /** All reports shared with the user */ - reports: OnyxCollection; - /** Bank account attached to free plan */ reimbursementAccount: OnyxEntry; }; -type WorkspaceInitialPageProps = WithPolicyAndFullscreenLoadingProps & WorkspaceInitialPageOnyxProps & StackScreenProps; +type WorkspaceInitialPageProps = WithPolicyAndFullscreenLoadingProps & WorkspaceInitialPageOnyxProps & StackScreenProps; function dismissError(policyID: string) { Navigation.goBack(ROUTES.SETTINGS_WORKSPACES); Policy.removeWorkspace(policyID); } -function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reportsProp, policyMembers, reimbursementAccount}: WorkspaceInitialPageProps) { +function WorkspaceInitialPage({policyDraft, policy: policyProp, policyMembers, reimbursementAccount}: WorkspaceInitialPageProps) { const styles = useThemeStyles(); const policy = policyDraft?.id ? policyDraft : policyProp; const [isCurrencyModalOpen, setIsCurrencyModalOpen] = useState(false); @@ -68,7 +65,8 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports const {translate} = useLocalize(); - const policyID = useMemo(() => policy.id, [policy]); + const policyID = policy?.id ?? ''; + const policyName = policy?.name ?? ''; useEffect(() => { const policyDraftId = policyDraft?.id; @@ -96,14 +94,12 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports ReimbursementAccount.navigateToBankAccountRoute(policyID); }, [policyID, policyName]); - const policyName = lodashGet(policy, 'name', ''); const hasMembersError = PolicyUtils.hasPolicyMemberError(policyMembers); - const hasGeneralSettingsError = !_.isEmpty(lodashGet(policy, 'errorFields.generalSettings', {})) || !_.isEmpty(lodashGet(policy, 'errorFields.avatar', {})); - const hasCustomUnitsError = PolicyUtils.hasCustomUnitsError(policy); + const hasGeneralSettingsError = !isEmptyObject(policy?.errorFields?.generalSettings ?? {}) || !isEmptyObject(policy?.errorFields?.avatar ?? {}); const shouldShowProtectedItems = PolicyUtils.isPolicyAdmin(policy); - const protectedMenuItems = [ + const protectedMenuItems: WorkspaceMenuItem[] = [ { translationKey: 'workspace.common.card', icon: Expensicons.ExpensifyCard, @@ -152,21 +148,22 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports }, ]; - const menuItems = [ + const menuItems: WorkspaceMenuItem[] = [ { translationKey: 'workspace.common.overview', icon: Expensicons.Home, - action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(policy.id)))), - brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : '', + action: singleExecution(waitForNavigate(() => Navigation.navigate(ROUTES.WORKSPACE_OVERVIEW.getRoute(policyID)))), + brickRoadIndicator: hasGeneralSettingsError ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, routeName: SCREENS.WORKSPACE.OVERVIEW, }, - ].concat(shouldShowProtectedItems ? protectedMenuItems : []); + ...(shouldShowProtectedItems ? protectedMenuItems : []), + ]; const prevPolicy = usePrevious(policy); // eslint-disable-next-line rulesdir/no-negated-variables const shouldShowNotFoundPage = - _.isEmpty(policy) || + isEmptyObject(policy) || // We check isPendingDelete for both policy and prevPolicy to prevent the NotFound view from showing right after we delete the workspace (PolicyUtils.isPendingDeletePolicy(policy) && PolicyUtils.isPendingDeletePolicy(prevPolicy)); @@ -180,7 +177,7 @@ function WorkspaceInitialPage({policyDraft, policy: policyProp, reports: reports Navigation.goBack(ROUTES.SETTINGS_WORKSPACES)} shouldShow={shouldShowNotFoundPage} - subtitleKey={_.isEmpty(policy) ? undefined : 'workspace.common.notAuthorized'} + subtitleKey={isEmptyObject(policy) ? undefined : 'workspace.common.notAuthorized'} > dismissError(policy.id)} - errors={policy.errors} + pendingAction={policy?.pendingAction} + onClose={() => dismissError(policyID)} + errors={policy?.errors} errorRowStyles={[styles.ph5, styles.pv2]} > {/* - Ideally we should use MenuList component for MenuItems with singleExecution/Navigation actions. - In this case where user can click on workspace avatar or menu items, we need to have a check for `isExecuting`. So, we are directly mapping menuItems. - */} - {_.map(menuItems, (item) => ( + Ideally we should use MenuList component for MenuItems with singleExecution/Navigation actions. + In this case where user can click on workspace avatar or menu items, we need to have a check for `isExecuting`. So, we are directly mapping menuItems. + */} + {menuItems.map((item) => ( From 0eeb9a39ea64653a94af720baf91f5107d889d41 Mon Sep 17 00:00:00 2001 From: VickyStash Date: Tue, 6 Feb 2024 13:07:29 +0100 Subject: [PATCH 6/6] Re-try performance test