From be904bdc9325b927e81c2c142fc6150589784bf0 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 00:37:54 +0530 Subject: [PATCH 01/10] feat: load policy categories only when needed --- src/components/CategoryPicker.tsx | 35 ++++++------------- .../API/parameters/GetPolicyCategories.ts | 5 +++ src/libs/API/parameters/index.ts | 1 + src/libs/API/types.ts | 1 + src/libs/OptionsListUtils.ts | 10 +++--- src/libs/actions/Policy/Category.ts | 15 ++++++++ 6 files changed, 38 insertions(+), 29 deletions(-) create mode 100644 src/libs/API/parameters/GetPolicyCategories.ts diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx index e5c85a8f5f6d..7af81365d805 100644 --- a/src/components/CategoryPicker.tsx +++ b/src/components/CategoryPicker.tsx @@ -1,32 +1,29 @@ import React, {useMemo} from 'react'; -import {withOnyx} from 'react-native-onyx'; -import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import * as OptionsListUtils from '@libs/OptionsListUtils'; +import * as Category from '@userActions/Policy/Category' import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; import SelectionList from './SelectionList'; import RadioListItem from './SelectionList/RadioListItem'; import type {ListItem} from './SelectionList/types'; -type CategoryPickerOnyxProps = { - policyCategories: OnyxEntry; - policyCategoriesDraft: OnyxEntry; - policyRecentlyUsedCategories: OnyxEntry; -}; - -type CategoryPickerProps = CategoryPickerOnyxProps & { - /** It's used by withOnyx HOC */ - // eslint-disable-next-line react/no-unused-prop-types +type CategoryPickerProps = { policyID: string; selectedCategory?: string; onSubmit: (item: ListItem) => void; }; -function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, policyCategoriesDraft, onSubmit}: CategoryPickerProps) { +function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerProps) { + const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`) + const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`) + const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`) + + Category.getPolicyCategories(policyID); + const {translate} = useLocalize(); const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); @@ -90,14 +87,4 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC CategoryPicker.displayName = 'CategoryPicker'; -export default withOnyx({ - policyCategories: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, - }, - policyCategoriesDraft: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`, - }, - policyRecentlyUsedCategories: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`, - }, -})(CategoryPicker); +export default CategoryPicker; diff --git a/src/libs/API/parameters/GetPolicyCategories.ts b/src/libs/API/parameters/GetPolicyCategories.ts new file mode 100644 index 000000000000..d97edc67858c --- /dev/null +++ b/src/libs/API/parameters/GetPolicyCategories.ts @@ -0,0 +1,5 @@ +type GetPolicyCategories = { + policyID: string; +}; + +export default GetPolicyCategories; diff --git a/src/libs/API/parameters/index.ts b/src/libs/API/parameters/index.ts index 9f51cab3f360..6d16c29af0d4 100644 --- a/src/libs/API/parameters/index.ts +++ b/src/libs/API/parameters/index.ts @@ -26,6 +26,7 @@ export type {default as ExpandURLPreviewParams} from './ExpandURLPreviewParams'; export type {default as GetMissingOnyxMessagesParams} from './GetMissingOnyxMessagesParams'; export type {default as GetNewerActionsParams} from './GetNewerActionsParams'; export type {default as GetOlderActionsParams} from './GetOlderActionsParams'; +export type {default as GetPolicyCategoriesParams} from './GetPolicyCategories'; export type {default as GetReportPrivateNoteParams} from './GetReportPrivateNoteParams'; export type {default as GetRouteParams} from './GetRouteParams'; export type {default as GetStatementPDFParams} from './GetStatementPDFParams'; diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index b72b77ae4739..bc4dff64c973 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -859,6 +859,7 @@ const READ_COMMANDS = { BEGIN_SIGNIN: 'BeginSignIn', SIGN_IN_WITH_SHORT_LIVED_AUTH_TOKEN: 'SignInWithShortLivedAuthToken', SIGN_IN_WITH_SUPPORT_AUTH_TOKEN: 'SignInWithSupportAuthToken', + GET_POLICY_CATEGORIES: 'GetPolicyCategories', OPEN_WORKSPACE: 'OpenWorkspace', OPEN_WORKSPACE_MEMBERS_PAGE: 'OpenWorkspaceMembersPage', OPEN_POLICY_CATEGORIES_PAGE: 'OpenPolicyCategoriesPage', diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index 2a25178f26a6..a8d146afe736 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -274,11 +274,11 @@ Onyx.connect({ }, }); -let allPolicyCategories: OnyxCollection = {}; +let allPolicies: OnyxCollection = {}; Onyx.connect({ - key: ONYXKEYS.COLLECTION.POLICY_CATEGORIES, + key: ONYXKEYS.COLLECTION.POLICY, waitForCollectionCallback: true, - callback: (val) => (allPolicyCategories = val), + callback: (val) => (allPolicies = val), }); const lastReportActions: ReportActions = {}; @@ -1975,8 +1975,8 @@ function getOptions( reportOption.isBold = shouldBoldTitleByDefault || shouldUseBoldText(reportOption); if (action === CONST.IOU.ACTION.CATEGORIZE) { - const policyCategories = allPolicyCategories?.[`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${reportOption.policyID}`] ?? {}; - if (getEnabledCategoriesCount(policyCategories) !== 0) { + const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportOption.policyID}`]; + if (policy?.areCategoriesEnabled) { recentReportOptions.push(reportOption); } } else { diff --git a/src/libs/actions/Policy/Category.ts b/src/libs/actions/Policy/Category.ts index c342fe6eedb6..2612986dfd48 100644 --- a/src/libs/actions/Policy/Category.ts +++ b/src/libs/actions/Policy/Category.ts @@ -15,6 +15,7 @@ import type { SetPolicyDistanceRatesDefaultCategoryParams, SetWorkspaceCategoryDescriptionHintParams, UpdatePolicyCategoryGLCodeParams, + GetPolicyCategoriesParams } from '@libs/API/parameters'; import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; import * as ApiUtils from '@libs/ApiUtils'; @@ -187,6 +188,19 @@ function openPolicyCategoriesPage(policyID: string) { API.read(READ_COMMANDS.OPEN_POLICY_CATEGORIES_PAGE, params); } +function getPolicyCategories(policyID: string) { + if (!policyID) { + Log.warn('GetPolicyCategories invalid params', {policyID}); + return; + } + + const params: GetPolicyCategoriesParams = { + policyID, + }; + + API.read(READ_COMMANDS.GET_POLICY_CATEGORIES, params); +} + function buildOptimisticPolicyRecentlyUsedCategories(policyID?: string, category?: string) { if (!policyID || !category) { return []; @@ -1312,6 +1326,7 @@ function setPolicyCategoryTax(policyID: string, categoryName: string, taxID: str } export { + getPolicyCategories, openPolicyCategoriesPage, buildOptimisticPolicyRecentlyUsedCategories, setWorkspaceCategoryEnabled, From 66db43f03df5f25efa909b587cdc2402ca41e98e Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 05:08:33 +0530 Subject: [PATCH 02/10] fix ts error --- src/libs/API/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/libs/API/types.ts b/src/libs/API/types.ts index bc4dff64c973..763b51fec705 100644 --- a/src/libs/API/types.ts +++ b/src/libs/API/types.ts @@ -917,6 +917,7 @@ type ReadCommandParameters = { [READ_COMMANDS.BEGIN_SIGNIN]: Parameters.BeginSignInParams; [READ_COMMANDS.SIGN_IN_WITH_SHORT_LIVED_AUTH_TOKEN]: Parameters.SignInWithShortLivedAuthTokenParams; [READ_COMMANDS.SIGN_IN_WITH_SUPPORT_AUTH_TOKEN]: Parameters.SignInWithSupportAuthTokenParams; + [READ_COMMANDS.GET_POLICY_CATEGORIES]: Parameters.GetPolicyCategoriesParams; [READ_COMMANDS.OPEN_WORKSPACE]: Parameters.OpenWorkspaceParams; [READ_COMMANDS.OPEN_WORKSPACE_MEMBERS_PAGE]: Parameters.OpenWorkspaceMembersPageParams; [READ_COMMANDS.OPEN_POLICY_CATEGORIES_PAGE]: Parameters.OpenPolicyCategoriesPageParams; From a966b2e7f468e15e9c5c3763beaae55a103ed97e Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Thu, 26 Sep 2024 05:10:01 +0530 Subject: [PATCH 03/10] fix lint errors --- src/components/CategoryPicker.tsx | 8 ++++---- src/libs/OptionsListUtils.ts | 4 ++-- src/libs/actions/Policy/Category.ts | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx index 7af81365d805..9c47c5f3e684 100644 --- a/src/components/CategoryPicker.tsx +++ b/src/components/CategoryPicker.tsx @@ -3,7 +3,7 @@ import {useOnyx} from 'react-native-onyx'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import * as OptionsListUtils from '@libs/OptionsListUtils'; -import * as Category from '@userActions/Policy/Category' +import * as Category from '@userActions/Policy/Category'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -18,9 +18,9 @@ type CategoryPickerProps = { }; function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerProps) { - const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`) - const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`) - const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`) + const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`); + const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`); + const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`); Category.getPolicyCategories(policyID); diff --git a/src/libs/OptionsListUtils.ts b/src/libs/OptionsListUtils.ts index a8d146afe736..787142902053 100644 --- a/src/libs/OptionsListUtils.ts +++ b/src/libs/OptionsListUtils.ts @@ -1975,8 +1975,8 @@ function getOptions( reportOption.isBold = shouldBoldTitleByDefault || shouldUseBoldText(reportOption); if (action === CONST.IOU.ACTION.CATEGORIZE) { - const policy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportOption.policyID}`]; - if (policy?.areCategoriesEnabled) { + const reportPolicy = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${reportOption.policyID}`]; + if (reportPolicy?.areCategoriesEnabled) { recentReportOptions.push(reportOption); } } else { diff --git a/src/libs/actions/Policy/Category.ts b/src/libs/actions/Policy/Category.ts index 2612986dfd48..25cc493fd8e1 100644 --- a/src/libs/actions/Policy/Category.ts +++ b/src/libs/actions/Policy/Category.ts @@ -5,6 +5,7 @@ import Onyx from 'react-native-onyx'; import * as API from '@libs/API'; import type { EnablePolicyCategoriesParams, + GetPolicyCategoriesParams, OpenPolicyCategoriesPageParams, RemovePolicyCategoryReceiptsRequiredParams, SetPolicyCategoryApproverParams, @@ -15,7 +16,6 @@ import type { SetPolicyDistanceRatesDefaultCategoryParams, SetWorkspaceCategoryDescriptionHintParams, UpdatePolicyCategoryGLCodeParams, - GetPolicyCategoriesParams } from '@libs/API/parameters'; import {READ_COMMANDS, WRITE_COMMANDS} from '@libs/API/types'; import * as ApiUtils from '@libs/ApiUtils'; From b87378451b6532f37aacaed8de7e11a94d7c6f71 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Sun, 29 Sep 2024 01:01:18 +0530 Subject: [PATCH 04/10] update API call for IOURequestStepCategory --- src/components/CategoryPicker.tsx | 3 --- src/libs/actions/Policy/Category.ts | 2 +- src/pages/iou/request/step/IOURequestStepCategory.tsx | 4 ++-- 3 files changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx index 9c47c5f3e684..e287fbc60b13 100644 --- a/src/components/CategoryPicker.tsx +++ b/src/components/CategoryPicker.tsx @@ -3,7 +3,6 @@ import {useOnyx} from 'react-native-onyx'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import * as OptionsListUtils from '@libs/OptionsListUtils'; -import * as Category from '@userActions/Policy/Category'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -22,8 +21,6 @@ function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerPr const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`); const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`); - Category.getPolicyCategories(policyID); - const {translate} = useLocalize(); const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); diff --git a/src/libs/actions/Policy/Category.ts b/src/libs/actions/Policy/Category.ts index 25cc493fd8e1..ee25accf61a7 100644 --- a/src/libs/actions/Policy/Category.ts +++ b/src/libs/actions/Policy/Category.ts @@ -189,7 +189,7 @@ function openPolicyCategoriesPage(policyID: string) { } function getPolicyCategories(policyID: string) { - if (!policyID) { + if (!policyID || policyID === '-1' || policyID === CONST.POLICY.ID_FAKE) { Log.warn('GetPolicyCategories invalid params', {policyID}); return; } diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx index f3388fcc7b0e..d8a5f57858cb 100644 --- a/src/pages/iou/request/step/IOURequestStepCategory.tsx +++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx @@ -21,7 +21,7 @@ import * as ReportActionsUtils from '@libs/ReportActionsUtils'; import * as ReportUtils from '@libs/ReportUtils'; import * as TransactionUtils from '@libs/TransactionUtils'; import * as IOU from '@userActions/IOU'; -import * as PolicyActions from '@userActions/Policy/Policy'; +import * as Category from '@userActions/Policy/Category'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; @@ -108,7 +108,7 @@ function IOURequestStepCategory({ return; } - PolicyActions.openDraftWorkspaceRequest(report?.policyID ?? '-1'); + Category.getPolicyCategories(report?.policyID ?? '-1'); }; const {isOffline} = useNetwork({onReconnect: fetchData}); const isLoading = !isOffline && policyCategories === undefined; From e262b38b0dfe9a066e533be38df00e00dbfcffc5 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Sun, 29 Sep 2024 01:03:14 +0530 Subject: [PATCH 05/10] withOnyx to useOnyx migration for IOURequestStepCategory --- .../request/step/IOURequestStepCategory.tsx | 105 ++++-------------- 1 file changed, 20 insertions(+), 85 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx index d8a5f57858cb..32b5fbe23d20 100644 --- a/src/pages/iou/request/step/IOURequestStepCategory.tsx +++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx @@ -1,8 +1,7 @@ import lodashIsEmpty from 'lodash/isEmpty'; import React, {useEffect} from 'react'; import {ActivityIndicator, View} from 'react-native'; -import type {OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import CategoryPicker from '@components/CategoryPicker'; import FixedFooter from '@components/FixedFooter'; @@ -26,41 +25,13 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; -import type {Policy, PolicyCategories, PolicyTagLists, ReportActions, Session, Transaction} from '@src/types/onyx'; import StepScreenWrapper from './StepScreenWrapper'; import type {WithFullTransactionOrNotFoundProps} from './withFullTransactionOrNotFound'; import withFullTransactionOrNotFound from './withFullTransactionOrNotFound'; import type {WithWritableReportOrNotFoundProps} from './withWritableReportOrNotFound'; import withWritableReportOrNotFound from './withWritableReportOrNotFound'; -type IOURequestStepCategoryOnyxProps = { - /** The draft transaction that holds data to be persisted on the current transaction */ - splitDraftTransaction: OnyxEntry; - - /** The policy of the report */ - policy: OnyxEntry; - - /** The draft policy of the report */ - policyDraft: OnyxEntry; - - /** Collection of categories attached to a policy */ - policyCategories: OnyxEntry; - - /** Collection of draft categories attached to a policy */ - policyCategoriesDraft: OnyxEntry; - - /** Collection of tags attached to a policy */ - policyTags: OnyxEntry; - - /** The actions from the parent report */ - reportActions: OnyxEntry; - - /** Session info for the currently logged in user. */ - session: OnyxEntry; -}; - -type IOURequestStepCategoryProps = IOURequestStepCategoryOnyxProps & - WithWritableReportOrNotFoundProps & +type IOURequestStepCategoryProps = WithWritableReportOrNotFoundProps & WithFullTransactionOrNotFoundProps; function IOURequestStepCategory({ @@ -70,15 +41,24 @@ function IOURequestStepCategory({ params: {transactionID, backTo, action, iouType, reportActionID}, }, transaction, - splitDraftTransaction, - policy: policyReal, - policyDraft, - policyTags, - policyCategories: policyCategoriesReal, - policyCategoriesDraft, - reportActions, - session, }: IOURequestStepCategoryProps) { + const [splitDraftTransaction] = useOnyx(`${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID ?? '-1'}`); + const [policyReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${IOU.getIOURequestPolicyID(transaction, reportReal)}`); + const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${IOU.getIOURequestPolicyID(transaction, reportDraft)}`); + const [policyCategoriesReal] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${IOU.getIOURequestPolicyID(transaction, reportReal)}`); + const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${IOU.getIOURequestPolicyID(transaction, reportDraft)}`); + const [policyTags] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_TAGS}${IOU.getIOURequestPolicyID(transaction, reportReal)}`); + let reportID = '-1'; + if (action === CONST.IOU.ACTION.EDIT && reportReal) { + if (iouType === CONST.IOU.TYPE.SPLIT) { + reportID = reportReal.reportID; + } else if (reportReal.parentReportID) { + reportID = reportReal.parentReportID; + } + } + const [reportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {canEvict: false}); + const [session] = useOnyx(ONYXKEYS.SESSION); + const report = reportReal ?? reportDraft; const policy = policyReal ?? policyDraft; const policyCategories = policyCategoriesReal ?? policyCategoriesDraft; @@ -214,53 +194,8 @@ function IOURequestStepCategory({ IOURequestStepCategory.displayName = 'IOURequestStepCategory'; -const IOURequestStepCategoryWithOnyx = withOnyx({ - splitDraftTransaction: { - key: ({route}) => { - const transactionID = route?.params.transactionID ?? -1; - return `${ONYXKEYS.COLLECTION.SPLIT_TRANSACTION_DRAFT}${transactionID}`; - }, - }, - policy: { - key: ({report, transaction}) => `${ONYXKEYS.COLLECTION.POLICY}${IOU.getIOURequestPolicyID(transaction, report)}`, - }, - policyDraft: { - key: ({reportDraft, transaction}) => `${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${IOU.getIOURequestPolicyID(transaction, reportDraft)}`, - }, - policyCategories: { - key: ({report, transaction}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${IOU.getIOURequestPolicyID(transaction, report)}`, - }, - policyCategoriesDraft: { - key: ({reportDraft, transaction}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${IOU.getIOURequestPolicyID(transaction, reportDraft)}`, - }, - policyTags: { - key: ({report, transaction}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${IOU.getIOURequestPolicyID(transaction, report)}`, - }, - reportActions: { - key: ({ - report, - route: { - params: {action, iouType}, - }, - }) => { - let reportID = '-1'; - if (action === CONST.IOU.ACTION.EDIT && report) { - if (iouType === CONST.IOU.TYPE.SPLIT) { - reportID = report.reportID; - } else if (report.parentReportID) { - reportID = report.parentReportID; - } - } - return `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`; - }, - canEvict: false, - }, - session: { - key: ONYXKEYS.SESSION, - }, -})(IOURequestStepCategory); /* eslint-disable rulesdir/no-negated-variables */ -const IOURequestStepCategoryWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepCategoryWithOnyx); +const IOURequestStepCategoryWithFullTransactionOrNotFound = withFullTransactionOrNotFound(IOURequestStepCategory); /* eslint-disable rulesdir/no-negated-variables */ const IOURequestStepCategoryWithWritableReportOrNotFound = withWritableReportOrNotFound(IOURequestStepCategoryWithFullTransactionOrNotFound); export default IOURequestStepCategoryWithWritableReportOrNotFound; From e4a7807756ac98b13ef2dbeab0e17e754ef27c23 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Sun, 29 Sep 2024 16:00:32 +0530 Subject: [PATCH 06/10] add offline indicator for IOURequestStepCategory --- src/components/CategoryPicker.tsx | 4 ++++ src/pages/iou/request/step/IOURequestStepCategory.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx index e287fbc60b13..9957a170b3e7 100644 --- a/src/components/CategoryPicker.tsx +++ b/src/components/CategoryPicker.tsx @@ -2,6 +2,7 @@ import React, {useMemo} from 'react'; import {useOnyx} from 'react-native-onyx'; import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; +import useNetwork from '@hooks/useNetwork'; import * as OptionsListUtils from '@libs/OptionsListUtils'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; @@ -20,9 +21,11 @@ function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerPr const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`); const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`); const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`); + const {isOffline} = useNetwork(); const {translate} = useLocalize(); const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState(''); + const offlineMessage = isOffline ? `${translate('common.youAppearToBeOffline')} ${translate('search.resultsAreLimited')}` : ''; const selectedOptions = useMemo(() => { if (!selectedCategory) { @@ -73,6 +76,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit}: CategoryPickerPr headerMessage={headerMessage} textInputValue={searchValue} textInputLabel={shouldShowTextInput ? translate('common.search') : undefined} + textInputHint={offlineMessage} onChangeText={setSearchValue} onSelectRow={onSubmit} ListItem={RadioListItem} diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx index 32b5fbe23d20..7067d32d1697 100644 --- a/src/pages/iou/request/step/IOURequestStepCategory.tsx +++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx @@ -6,11 +6,13 @@ import Button from '@components/Button'; import CategoryPicker from '@components/CategoryPicker'; import FixedFooter from '@components/FixedFooter'; import * as Illustrations from '@components/Icon/Illustrations'; +import OfflineIndicator from '@components/OfflineIndicator'; import type {ListItem} from '@components/SelectionList/types'; import Text from '@components/Text'; import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import Navigation from '@libs/Navigation/Navigation'; @@ -93,6 +95,7 @@ function IOURequestStepCategory({ const {isOffline} = useNetwork({onReconnect: fetchData}); const isLoading = !isOffline && policyCategories === undefined; const shouldShowEmptyState = !isLoading && !shouldShowCategory; + const {isSmallScreenWidth} = useResponsiveLayout(); useEffect(() => { fetchData(); @@ -176,6 +179,7 @@ function IOURequestStepCategory({ /> )} + {!isSmallScreenWidth && } )} {!shouldShowEmptyState && !isLoading && ( From 543716c7cecfde34a0b138b1a37668fbc4fe7e67 Mon Sep 17 00:00:00 2001 From: Jay Damani Date: Tue, 1 Oct 2024 23:41:53 +0530 Subject: [PATCH 07/10] update offline 'categorize it' flow --- .../request/step/IOURequestStepCategory.tsx | 62 ++++++++++--------- .../iou/request/step/StepScreenWrapper.tsx | 5 ++ 2 files changed, 38 insertions(+), 29 deletions(-) diff --git a/src/pages/iou/request/step/IOURequestStepCategory.tsx b/src/pages/iou/request/step/IOURequestStepCategory.tsx index 7067d32d1697..2c4261473ff5 100644 --- a/src/pages/iou/request/step/IOURequestStepCategory.tsx +++ b/src/pages/iou/request/step/IOURequestStepCategory.tsx @@ -2,6 +2,7 @@ import lodashIsEmpty from 'lodash/isEmpty'; import React, {useEffect} from 'react'; import {ActivityIndicator, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; +import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView'; import Button from '@components/Button'; import CategoryPicker from '@components/CategoryPicker'; import FixedFooter from '@components/FixedFooter'; @@ -142,6 +143,7 @@ function IOURequestStepCategory({ onBackButtonPress={navigateBack} shouldShowWrapper shouldShowNotFoundPage={shouldShowNotFoundPage} + shouldShowOfflineIndicator={policyCategories !== undefined} testID={IOURequestStepCategory.displayName} > {isLoading && ( @@ -152,35 +154,37 @@ function IOURequestStepCategory({ /> )} {shouldShowEmptyState && ( - - - {PolicyUtils.isPolicyAdmin(policy) && ( - -