From 9c0f5650818ee9275943e9e26cdcc8ab26895c8c Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 28 Feb 2024 15:31:41 -0700 Subject: [PATCH 1/9] call method --- .../parameters/OpenPolicyCategoriesPageParams.ts | 5 +++++ src/libs/API/parameters/index.ts | 1 + src/libs/API/types.ts | 2 ++ src/libs/actions/Policy.ts | 15 +++++++++++++++ .../categories/WorkspaceCategoriesPage.tsx | 8 +++++++- 5 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 src/libs/API/parameters/OpenPolicyCategoriesPageParams.ts diff --git a/src/libs/API/parameters/OpenPolicyCategoriesPageParams.ts b/src/libs/API/parameters/OpenPolicyCategoriesPageParams.ts new file mode 100644 index 000000000000..375962d2b1a1 --- /dev/null +++ b/src/libs/API/parameters/OpenPolicyCategoriesPageParams.ts @@ -0,0 +1,5 @@ +type OpenPolicyCategoriesPageParams = { + policyID: string; +}; + +export default OpenPolicyCategoriesPageParams; diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts index fc24b97ff1f3..575b071ae842 100644 --- a/src/libs/API/parameters/index.ts +++ b/src/libs/API/parameters/index.ts @@ -113,6 +113,7 @@ export type {default as OpenWorkspaceViewParams} from './OpenWorkspaceViewParams export type {default as OpenWorkspaceReimburseViewParams} from './OpenWorkspaceReimburseViewParams'; export type {default as OpenWorkspaceInvitePageParams} from './OpenWorkspaceInvitePageParams'; export type {default as OpenWorkspaceMembersPageParams} from './OpenWorkspaceMembersPageParams'; +export type {default as OpenPolicyCategoriesPageParams} from './OpenPolicyCategoriesPageParams'; export type {default as OpenDraftWorkspaceRequestParams} from './OpenDraftWorkspaceRequestParams'; export type {default as UpdateWorkspaceCustomUnitAndRateParams} from './UpdateWorkspaceCustomUnitAndRateParams'; export type {default as CreateWorkspaceFromIOUPaymentParams} from './CreateWorkspaceFromIOUPaymentParams'; diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index c6fd1154fbf1..cae89660cfa2 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -331,6 +331,7 @@ const READ_COMMANDS = { OPEN_WORKSPACE_REIMBURSE_VIEW: 'OpenWorkspaceReimburseView', OPEN_WORKSPACE: 'OpenWorkspace', OPEN_WORKSPACE_MEMBERS_PAGE: 'OpenWorkspaceMembersPage', + OPEN_POLICY_CATEGORIES_PAGE: 'OpenPolicyCategoriesPage', OPEN_WORKSPACE_INVITE_PAGE: 'OpenWorkspaceInvitePage', OPEN_DRAFT_WORKSPACE_REQUEST: 'OpenDraftWorkspaceRequest', } as const; @@ -364,6 +365,7 @@ type ReadCommandParameters = { [READ_COMMANDS.OPEN_WORKSPACE_REIMBURSE_VIEW]: Parameters.OpenWorkspaceReimburseViewParams; [READ_COMMANDS.OPEN_WORKSPACE]: Parameters.OpenWorkspaceParams; [READ_COMMANDS.OPEN_WORKSPACE_MEMBERS_PAGE]: Parameters.OpenWorkspaceMembersPageParams; + [READ_COMMANDS.OPEN_POLICY_CATEGORIES_PAGE]: Parameters.OpenPolicyCategoriesPageParams; [READ_COMMANDS.OPEN_WORKSPACE_INVITE_PAGE]: Parameters.OpenWorkspaceInvitePageParams; [READ_COMMANDS.OPEN_DRAFT_WORKSPACE_REQUEST]: Parameters.OpenDraftWorkspaceRequestParams; }; diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts index e1da946e81d8..f37247496626 100644 --- a/src/libs/actions/Policy.ts +++ b/src/libs/actions/Policy.ts @@ -18,6 +18,7 @@ import type { OpenDraftWorkspaceRequestParams, OpenWorkspaceInvitePageParams, OpenWorkspaceMembersPageParams, + OpenPolicyCategoriesPageParams, OpenWorkspaceParams, OpenWorkspaceReimburseViewParams, SetWorkspaceApprovalModeParams, @@ -1673,6 +1674,19 @@ function openWorkspaceMembersPage(policyID: string, clientMemberEmails: string[] API.read(READ_COMMANDS.OPEN_WORKSPACE_MEMBERS_PAGE, params); } +function openPolicyCategoriesPage(policyID: string) { + if (!policyID) { + Log.warn('openPolicyCategoriesPage invalid params', {policyID}); + return; + } + + const params: OpenPolicyCategoriesPageParams = { + policyID, + }; + + API.read(READ_COMMANDS.OPEN_POLICY_CATEGORIES_PAGE, params); +} + function openWorkspaceInvitePage(policyID: string, clientMemberEmails: string[]) { if (!policyID || !clientMemberEmails) { Log.warn('openWorkspaceInvitePage invalid params', {policyID, clientMemberEmails}); @@ -2264,6 +2278,7 @@ export { generatePolicyID, createWorkspace, openWorkspaceMembersPage, + openPolicyCategoriesPage, openWorkspaceInvitePage, openWorkspace, removeWorkspace, diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 721341073d72..b047d052599b 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -1,5 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useMemo, useState} from 'react'; +import React, {useMemo, useState, useEffect} from 'react'; import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; @@ -25,6 +25,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; +import * as Policy from '@userActions/Policy'; type PolicyForList = { value: string; @@ -48,6 +49,11 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP const {translate} = useLocalize(); const [selectedCategories, setSelectedCategories] = useState>({}); + useEffect(() => { + Policy.openPolicyCategoriesPage(route.params.policyID); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + const categoryList = useMemo( () => Object.values(policyCategories ?? {}).map((value) => ({ From fedb40d517798ac9af285af79a971494082a0b67 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 28 Feb 2024 15:51:22 -0700 Subject: [PATCH 2/9] add loading indicator --- src/pages/workspace/categories/WorkspaceCategoriesPage.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index b047d052599b..90aab254d3a1 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -26,6 +26,7 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import * as Policy from '@userActions/Policy'; +import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; type PolicyForList = { value: string; @@ -111,6 +112,10 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP ); + if (policyCategories === undefined) { + return ; + } + return ( From f3faf1893c922437f14e6e323840b3a143343723 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 28 Feb 2024 16:04:04 -0700 Subject: [PATCH 3/9] use ActivityIndicator --- src/libs/actions/Policy.ts | 2 +- .../categories/WorkspaceCategoriesPage.tsx | 20 ++++++++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/libs/actions/Policy.ts b/src/libs/actions/Policy.ts index f37247496626..96ecfa63a634 100644 --- a/src/libs/actions/Policy.ts +++ b/src/libs/actions/Policy.ts @@ -16,9 +16,9 @@ import type { DeleteWorkspaceAvatarParams, DeleteWorkspaceParams, OpenDraftWorkspaceRequestParams, + OpenPolicyCategoriesPageParams, OpenWorkspaceInvitePageParams, OpenWorkspaceMembersPageParams, - OpenPolicyCategoriesPageParams, OpenWorkspaceParams, OpenWorkspaceReimburseViewParams, SetWorkspaceApprovalModeParams, diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 90aab254d3a1..4b73b75d62e4 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -1,6 +1,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; -import React, {useMemo, useState, useEffect} from 'react'; -import {View} from 'react-native'; +import React, {useEffect, useMemo, useState} from 'react'; +import {ActivityIndicator, View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import Button from '@components/Button'; @@ -21,12 +21,12 @@ import Navigation from '@libs/Navigation/Navigation'; import type {CentralPaneNavigatorParamList} from '@navigation/types'; import AdminPolicyAccessOrNotFoundWrapper from '@pages/workspace/AdminPolicyAccessOrNotFoundWrapper'; import PaidPolicyAccessOrNotFoundWrapper from '@pages/workspace/PaidPolicyAccessOrNotFoundWrapper'; +import * as Policy from '@userActions/Policy'; +import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; -import * as Policy from '@userActions/Policy'; -import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator'; type PolicyForList = { value: string; @@ -112,10 +112,6 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP ); - if (policyCategories === undefined) { - return ; - } - return ( @@ -136,7 +132,13 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP {translate('workspace.categories.subtitle')} - {categoryList.length ? ( + {policyCategories === undefined ? ( + + ) : categoryList.length ? ( Date: Wed, 28 Feb 2024 16:28:00 -0700 Subject: [PATCH 4/9] fix lint --- .../categories/WorkspaceCategoriesPage.tsx | 62 +++++++++++-------- 1 file changed, 37 insertions(+), 25 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 4b73b75d62e4..06ebc7e3ccb9 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -112,6 +112,42 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP ); + const getComponentToRender = () => { + if (policyCategories === undefined) { + return ( + + ); + } + + if (categoryList.length === 0) { + return ( + + ); + } + + return ( + + ); + }; + return ( @@ -132,31 +168,7 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP {translate('workspace.categories.subtitle')} - {policyCategories === undefined ? ( - - ) : categoryList.length ? ( - - ) : ( - - )} + {getComponentToRender()} From cf27c9321b7bcdfcdc7e199a8d338655a458e668 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Wed, 28 Feb 2024 16:32:47 -0700 Subject: [PATCH 5/9] refactor code --- .../categories/WorkspaceCategoriesPage.tsx | 64 ++++++++----------- 1 file changed, 27 insertions(+), 37 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 06ebc7e3ccb9..77847cb16b49 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -112,42 +112,6 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP ); - const getComponentToRender = () => { - if (policyCategories === undefined) { - return ( - - ); - } - - if (categoryList.length === 0) { - return ( - - ); - } - - return ( - - ); - }; - return ( @@ -168,7 +132,33 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP {translate('workspace.categories.subtitle')} - {getComponentToRender()} + {policyCategories === undefined && ( + + )} + {Boolean(policyCategories) && categoryList.length === 0 && ( + + )} + {Boolean(policyCategories) && Boolean(categoryList.length) && ( + + )} From 5d03fbc1038bd5701a0e6dd61cd37b3e72474a7a Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 1 Mar 2024 13:28:56 -0700 Subject: [PATCH 6/9] add offline behavior --- .../categories/WorkspaceCategoriesPage.tsx | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index decc3ca776f0..1bb4d5b5d84b 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -27,6 +27,7 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; +import useNetwork from '@hooks/useNetwork'; type PolicyForList = { value: string; @@ -50,8 +51,14 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP const {translate} = useLocalize(); const [selectedCategories, setSelectedCategories] = useState>({}); - useEffect(() => { + function fetchCategories() { Policy.openPolicyCategoriesPage(route.params.policyID); + } + + const {isOffline} = useNetwork({onReconnect: fetchCategories}); + + useEffect(() => { + fetchCategories(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -136,21 +143,21 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP {translate('workspace.categories.subtitle')} - {policyCategories === undefined && ( + {!isOffline && policyCategories === undefined && ( )} - {Boolean(policyCategories) && categoryList.length === 0 && ( + {(isOffline || Boolean(policyCategories)) && categoryList.length === 0 && ( )} - {Boolean(policyCategories) && Boolean(categoryList.length) && ( + {(isOffline || Boolean(policyCategories)) && Boolean(categoryList.length) && ( Date: Fri, 1 Mar 2024 13:30:47 -0700 Subject: [PATCH 7/9] fix style --- src/pages/workspace/categories/WorkspaceCategoriesPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 1bb4d5b5d84b..68920761ccde 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -14,6 +14,7 @@ import TableListItem from '@components/SelectionList/TableListItem'; import Text from '@components/Text'; import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection'; import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -27,7 +28,6 @@ import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; -import useNetwork from '@hooks/useNetwork'; type PolicyForList = { value: string; From 54943cb47c2ecd3e6c2776267067f38454b798ae Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Fri, 1 Mar 2024 16:09:10 -0700 Subject: [PATCH 8/9] use const --- .../workspace/categories/WorkspaceCategoriesPage.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index 68920761ccde..cdca609a58cd 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -111,6 +111,8 @@ function WorkspaceCategoriesPage({policyCategories, route}: WorkspaceCategoriesP Navigation.navigate(ROUTES.WORKSPACE_CATEGORY_SETTINGS.getRoute(route.params.policyID, category.text)); }; + const isLoading = !isOffline && policyCategories === undefined; + const settingsButton = (