From 76062d9cf2b9c98fb454bf9da28683fc69adcdb9 Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:52:33 +0530 Subject: [PATCH 1/5] show loading indicator when IS_LOADING_APP is true --- src/pages/workspace/WorkspacesListPage.tsx | 39 +++++++++++++--------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 7980616c08e3..c10ec3df3073 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -6,6 +6,7 @@ import Button from '@components/Button'; import ConfirmModal from '@components/ConfirmModal'; import FeatureList from '@components/FeatureList'; import type {FeatureListItem} from '@components/FeatureList'; +import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import * as Illustrations from '@components/Icon/Illustrations'; @@ -113,6 +114,8 @@ function WorkspacesListPage() { const [reimbursementAccount] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT); const [session] = useOnyx(ONYXKEYS.SESSION); + const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); + const shouldShowLoadingIndicator = isLoadingApp && !isOffline; const {activeWorkspaceID, setActiveWorkspaceID} = useActiveWorkspace(); @@ -418,22 +421,26 @@ function WorkspacesListPage() { onBackButtonPress={() => Navigation.goBack()} icon={Illustrations.BigRocket} /> - - - interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())} - illustration={LottieAnimations.WorkspacePlanet} - // We use this style to vertically center the illustration, as the original illustration is not centered - illustrationStyle={styles.emptyWorkspaceIllustrationStyle} - titleStyles={styles.textHeadlineH1} - /> - - + {shouldShowLoadingIndicator ? ( + + ) : ( + + + interceptAnonymousUser(() => App.createWorkspaceWithPolicyDraftAndNavigateToIt())} + illustration={LottieAnimations.WorkspacePlanet} + // We use this style to vertically center the illustration, as the original illustration is not centered + illustrationStyle={styles.emptyWorkspaceIllustrationStyle} + titleStyles={styles.textHeadlineH1} + /> + + + )} ); } From 7084fbdd08957efb6aca4353c153be90ed24d41b Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Tue, 17 Dec 2024 14:54:33 +0530 Subject: [PATCH 2/5] show loading indicator when IS_LOADING_APP is true --- src/pages/WorkspaceSwitcherPage/index.tsx | 44 +++++++++++++---------- 1 file changed, 26 insertions(+), 18 deletions(-) diff --git a/src/pages/WorkspaceSwitcherPage/index.tsx b/src/pages/WorkspaceSwitcherPage/index.tsx index 87ba17b6504d..c3d329cd736f 100644 --- a/src/pages/WorkspaceSwitcherPage/index.tsx +++ b/src/pages/WorkspaceSwitcherPage/index.tsx @@ -1,6 +1,7 @@ import {useIsFocused} from '@react-navigation/native'; import React, {useCallback, useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; +import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; import ScreenWrapper from '@components/ScreenWrapper'; @@ -11,6 +12,7 @@ import useActiveWorkspace from '@hooks/useActiveWorkspace'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; import * as PolicyUtils from '@libs/PolicyUtils'; import {sortWorkspacesBySelected} from '@libs/PolicyUtils'; @@ -33,6 +35,7 @@ const WorkspaceCardCreateAWorkspaceInstance = ; function WorkspaceSwitcherPage() { const {isOffline} = useNetwork(); + const styles = useThemeStyles(); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const {translate} = useLocalize(); const {activeWorkspaceID, setActiveWorkspaceID} = useActiveWorkspace(); @@ -42,9 +45,10 @@ function WorkspaceSwitcherPage() { const [reportActions] = useOnyx(ONYXKEYS.COLLECTION.REPORT_ACTIONS); const [policies, fetchStatus] = useOnyx(ONYXKEYS.COLLECTION.POLICY); const [currentUserLogin] = useOnyx(ONYXKEYS.SESSION, {selector: (session) => session?.email}); - + const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP); const brickRoadsForPolicies = useMemo(() => getWorkspacesBrickRoads(reports, policies, reportActions), [reports, policies, reportActions]); const unreadStatusesForPolicies = useMemo(() => getWorkspacesUnreadStatuses(reports), [reports]); + const shouldShowLoadingIndicator = isLoadingApp && !isOffline; const getIndicatorTypeForPolicy = useCallback( (policyId?: string) => { @@ -154,23 +158,27 @@ function WorkspaceSwitcherPage() { title={translate('workspace.switcher.headerTitle')} onBackButtonPress={Navigation.goBack} /> - - ListItem={UserListItem} - sections={sections} - onSelectRow={(option) => selectPolicy(option.policyID)} - textInputLabel={usersWorkspaces.length >= CONST.STANDARD_LIST_ITEM_LIMIT ? translate('common.search') : undefined} - textInputValue={searchTerm} - onChangeText={setSearchTerm} - headerMessage={headerMessage} - listEmptyContent={WorkspaceCardCreateAWorkspaceInstance} - shouldShowListEmptyContent={shouldShowCreateWorkspace} - initiallyFocusedOptionKey={activeWorkspaceID ?? CONST.WORKSPACE_SWITCHER.NAME} - showLoadingPlaceholder={fetchStatus.status === 'loading' || !didScreenTransitionEnd} - showConfirmButton={!!activeWorkspaceID} - shouldUseDefaultTheme - confirmButtonText={translate('workspace.common.clearFilter')} - onConfirm={() => selectPolicy(undefined)} - /> + {shouldShowLoadingIndicator ? ( + + ) : ( + + ListItem={UserListItem} + sections={sections} + onSelectRow={(option) => selectPolicy(option.policyID)} + textInputLabel={usersWorkspaces.length >= CONST.STANDARD_LIST_ITEM_LIMIT ? translate('common.search') : undefined} + textInputValue={searchTerm} + onChangeText={setSearchTerm} + headerMessage={headerMessage} + listEmptyContent={WorkspaceCardCreateAWorkspaceInstance} + shouldShowListEmptyContent={shouldShowCreateWorkspace} + initiallyFocusedOptionKey={activeWorkspaceID ?? CONST.WORKSPACE_SWITCHER.NAME} + showLoadingPlaceholder={fetchStatus.status === 'loading' || !didScreenTransitionEnd} + showConfirmButton={!!activeWorkspaceID} + shouldUseDefaultTheme + confirmButtonText={translate('workspace.common.clearFilter')} + onConfirm={() => selectPolicy(undefined)} + /> + )} )} From 0d70cbf4f039e14a986857e24e33be68c704f70e Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Mon, 23 Dec 2024 06:08:47 +0000 Subject: [PATCH 3/5] fix eslint Signed-off-by: GitHub --- src/libs/API/parameters/LeavePolicyParams.ts | 2 +- src/libs/PolicyUtils.ts | 2 +- src/libs/ReportUtils.ts | 2 +- src/libs/actions/Policy/Policy.ts | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 6 +++--- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/libs/API/parameters/LeavePolicyParams.ts b/src/libs/API/parameters/LeavePolicyParams.ts index ad728f06e6ee..d3e9237fd155 100644 --- a/src/libs/API/parameters/LeavePolicyParams.ts +++ b/src/libs/API/parameters/LeavePolicyParams.ts @@ -1,5 +1,5 @@ type LeavePolicyParams = { - policyID: string; + policyID?: string; email: string; }; diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts index 4982e8660dec..f44f5605b5d8 100644 --- a/src/libs/PolicyUtils.ts +++ b/src/libs/PolicyUtils.ts @@ -1093,7 +1093,7 @@ function getCurrentTaxID(policy: OnyxEntry, taxID: string): string | und return Object.keys(policy?.taxRates?.taxes ?? {}).find((taxIDKey) => policy?.taxRates?.taxes?.[taxIDKey].previousTaxCode === taxID || taxIDKey === taxID); } -function getWorkspaceAccountID(policyID: string) { +function getWorkspaceAccountID(policyID: string | undefined) { const policy = getPolicy(policyID); if (!policy) { diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index c20ec7386b0a..a228e4cb3855 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -7381,7 +7381,7 @@ function getWorkspaceChats(policyID: string, accountIDs: number[], reports: Onyx * * @param policyID - the workspace ID to get all associated reports */ -function getAllWorkspaceReports(policyID: string): Array> { +function getAllWorkspaceReports(policyID: string | undefined): Array> { return Object.values(allReports ?? {}).filter((report) => (report?.policyID ?? '-1') === policyID); } diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts index f855ea477856..a9026aedd131 100644 --- a/src/libs/actions/Policy/Policy.ts +++ b/src/libs/actions/Policy/Policy.ts @@ -725,7 +725,7 @@ function clearWorkspaceReimbursementErrors(policyID: string) { Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {errorFields: {reimbursementChoice: null}}); } -function leaveWorkspace(policyID: string) { +function leaveWorkspace(policyID: string | undefined) { const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`]; const workspaceChats = ReportUtils.getAllWorkspaceReports(policyID); diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 2edcc2d54b1a..4bb590bb5932 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -125,7 +125,7 @@ function WorkspacesListPage() { const isLessThanMediumScreen = isMediumScreenWidth || shouldUseNarrowLayout; // We need this to update translation for deleting a workspace when it has third party card feeds or expensify card assigned. - const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyIDToDelete ?? '-1'); + const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyIDToDelete); const [cardFeeds] = useOnyx(`${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${workspaceAccountID}`); const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`); const policyToDelete = PolicyUtils.getPolicy(policyIDToDelete); @@ -183,7 +183,7 @@ function WorkspacesListPage() { setIsSupportalActionRestrictedModalOpen(true); return; } - setPolicyIDToDelete(item.policyID ?? '-1'); + setPolicyIDToDelete(item.policyID); setPolicyNameToDelete(item.title); setIsDeleteModalOpen(true); }, @@ -195,7 +195,7 @@ function WorkspacesListPage() { threeDotsMenuItems.push({ icon: Expensicons.Exit, text: translate('common.leave'), - onSelected: Session.checkIfActionIsAllowed(() => Policy.leaveWorkspace(item.policyID ?? '-1')), + onSelected: Session.checkIfActionIsAllowed(() => Policy.leaveWorkspace(item.policyID)), }); } From 7cf77283deda98385b318072a4837462c75640eb Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Mon, 23 Dec 2024 18:06:10 +0000 Subject: [PATCH 4/5] revert esLint fixes Signed-off-by: GitHub --- src/libs/API/parameters/LeavePolicyParams.ts | 2 +- src/libs/PolicyUtils.ts | 2 +- src/libs/ReportUtils.ts | 4 ++-- src/libs/actions/Policy/Policy.ts | 2 +- src/pages/workspace/WorkspacesListPage.tsx | 4 ++-- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/libs/API/parameters/LeavePolicyParams.ts b/src/libs/API/parameters/LeavePolicyParams.ts index d3e9237fd155..ad728f06e6ee 100644 --- a/src/libs/API/parameters/LeavePolicyParams.ts +++ b/src/libs/API/parameters/LeavePolicyParams.ts @@ -1,5 +1,5 @@ type LeavePolicyParams = { - policyID?: string; + policyID: string; email: string; }; diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts index f44f5605b5d8..4982e8660dec 100644 --- a/src/libs/PolicyUtils.ts +++ b/src/libs/PolicyUtils.ts @@ -1093,7 +1093,7 @@ function getCurrentTaxID(policy: OnyxEntry, taxID: string): string | und return Object.keys(policy?.taxRates?.taxes ?? {}).find((taxIDKey) => policy?.taxRates?.taxes?.[taxIDKey].previousTaxCode === taxID || taxIDKey === taxID); } -function getWorkspaceAccountID(policyID: string | undefined) { +function getWorkspaceAccountID(policyID: string) { const policy = getPolicy(policyID); if (!policy) { diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index a228e4cb3855..17c2b6eda1af 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -7381,7 +7381,7 @@ function getWorkspaceChats(policyID: string, accountIDs: number[], reports: Onyx * * @param policyID - the workspace ID to get all associated reports */ -function getAllWorkspaceReports(policyID: string | undefined): Array> { +function getAllWorkspaceReports(policyID: string): Array> { return Object.values(allReports ?? {}).filter((report) => (report?.policyID ?? '-1') === policyID); } @@ -8391,7 +8391,7 @@ function getFieldViolationTranslation(reportField: PolicyReportField, violation? switch (violation) { case 'fieldRequired': - return Localize.translateLocal('reportViolations.fieldRequired', {fieldName: reportField.name}); + return Localize.translateLocal('reportViolations.fieldRequired', {fieldName: getAllWorkspaceReportsreportField.name}); default: return ''; } diff --git a/src/libs/actions/Policy/Policy.ts b/src/libs/actions/Policy/Policy.ts index a9026aedd131..f855ea477856 100644 --- a/src/libs/actions/Policy/Policy.ts +++ b/src/libs/actions/Policy/Policy.ts @@ -725,7 +725,7 @@ function clearWorkspaceReimbursementErrors(policyID: string) { Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {errorFields: {reimbursementChoice: null}}); } -function leaveWorkspace(policyID: string | undefined) { +function leaveWorkspace(policyID: string) { const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`]; const workspaceChats = ReportUtils.getAllWorkspaceReports(policyID); diff --git a/src/pages/workspace/WorkspacesListPage.tsx b/src/pages/workspace/WorkspacesListPage.tsx index 4bb590bb5932..95271db27f88 100755 --- a/src/pages/workspace/WorkspacesListPage.tsx +++ b/src/pages/workspace/WorkspacesListPage.tsx @@ -183,7 +183,7 @@ function WorkspacesListPage() { setIsSupportalActionRestrictedModalOpen(true); return; } - setPolicyIDToDelete(item.policyID); + setPolicyIDToDelete(item.policyID ?? '-1'); setPolicyNameToDelete(item.title); setIsDeleteModalOpen(true); }, @@ -195,7 +195,7 @@ function WorkspacesListPage() { threeDotsMenuItems.push({ icon: Expensicons.Exit, text: translate('common.leave'), - onSelected: Session.checkIfActionIsAllowed(() => Policy.leaveWorkspace(item.policyID)), + onSelected: Session.checkIfActionIsAllowed(() => Policy.leaveWorkspace(item.policyID ?? '-1')), }); } From 20c1550c5c855a4f77c17f4f3f92e06efcf8bdce Mon Sep 17 00:00:00 2001 From: Rutika Pawar <183392827+twilight2294@users.noreply.github.com> Date: Mon, 23 Dec 2024 23:38:57 +0530 Subject: [PATCH 5/5] Update ReportUtils.ts --- src/libs/ReportUtils.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 31631ae46da0..e9c017db43ce 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -8389,7 +8389,7 @@ function getFieldViolationTranslation(reportField: PolicyReportField, violation? switch (violation) { case 'fieldRequired': - return Localize.translateLocal('reportViolations.fieldRequired', {fieldName: getAllWorkspaceReportsreportField.name}); + return Localize.translateLocal('reportViolations.fieldRequired', {fieldName: reportField.name}); default: return ''; }