From 02ba08d0991d2d4fceff8c1a3ce4d928f8ccd537 Mon Sep 17 00:00:00 2001 From: allgandalf Date: Mon, 8 Sep 2025 11:04:03 +0530 Subject: [PATCH 1/3] remove usage of onyx.connect --- src/libs/actions/Policy/ReportField.ts | 24 ++++++------------- .../reports/CreateReportFieldsPage.tsx | 8 +++++-- tests/actions/ReportFieldTest.ts | 3 +++ 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/src/libs/actions/Policy/ReportField.ts b/src/libs/actions/Policy/ReportField.ts index 70f44d158b95..5aac8c1a1c3b 100644 --- a/src/libs/actions/Policy/ReportField.ts +++ b/src/libs/actions/Policy/ReportField.ts @@ -1,5 +1,5 @@ import cloneDeep from 'lodash/cloneDeep'; -import type {NullishDeep, OnyxCollection, OnyxUpdate} from 'react-native-onyx'; +import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx'; import Onyx from 'react-native-onyx'; import * as API from '@libs/API'; import type { @@ -24,15 +24,6 @@ import type {Policy, PolicyReportField, Report} from '@src/types/onyx'; import type {OnyxValueWithOfflineFeedback} from '@src/types/onyx/OnyxCommon'; import type {OnyxData} from '@src/types/onyx/Request'; -let allReports: OnyxCollection; -Onyx.connect({ - key: ONYXKEYS.COLLECTION.REPORT, - waitForCollectionCallback: true, - callback: (value) => { - allReports = value; - }, -}); - const allPolicies: OnyxCollection = {}; Onyx.connect({ key: ONYXKEYS.COLLECTION.POLICY, @@ -94,6 +85,7 @@ type CreateReportFieldParams = Pick> | undefined; }; function openPolicyReportFieldsPage(policyID: string) { @@ -178,7 +170,7 @@ function deleteReportFieldsListValue({valueIndexes, listValues, disabledListValu /** * Creates a new report field. */ -function createReportField({name, type, initialValue, listValues, disabledListValues, policyID}: CreateReportFieldParams) { +function createReportField({name, type, initialValue, listValues, disabledListValues, policyID, policyExpenseReports}: CreateReportFieldParams) { const previousFieldList = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`]?.fieldList ?? {}; const fieldID = WorkspaceReportFieldUtils.generateFieldID(name); const fieldKey = ReportUtils.getReportFieldKey(fieldID); @@ -197,8 +189,6 @@ function createReportField({name, type, initialValue, listValues, disabledListVa isTax: false, }; - const policyExpenseReports = Object.values(allReports ?? {}).filter((report) => report?.policyID === policyID && report.type === CONST.REPORT.TYPE.EXPENSE) as Report[]; - const optimisticData = [ { key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`, @@ -210,8 +200,8 @@ function createReportField({name, type, initialValue, listValues, disabledListVa errorFields: null, }, }, - ...policyExpenseReports.map((report) => ({ - key: `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, + ...(policyExpenseReports ?? []).map((report) => ({ + key: `${ONYXKEYS.COLLECTION.REPORT}${report?.reportID}`, onyxMethod: Onyx.METHOD.MERGE, value: { fieldList: { @@ -234,8 +224,8 @@ function createReportField({name, type, initialValue, listValues, disabledListVa }, }, }, - ...policyExpenseReports.map((report) => ({ - key: `${ONYXKEYS.COLLECTION.REPORT}${report.reportID}`, + ...(policyExpenseReports ?? []).map((report) => ({ + key: `${ONYXKEYS.COLLECTION.REPORT}${report?.reportID}`, onyxMethod: Onyx.METHOD.MERGE, value: { fieldList: { diff --git a/src/pages/workspace/reports/CreateReportFieldsPage.tsx b/src/pages/workspace/reports/CreateReportFieldsPage.tsx index 12ee04a14aed..e25b4e849fd6 100644 --- a/src/pages/workspace/reports/CreateReportFieldsPage.tsx +++ b/src/pages/workspace/reports/CreateReportFieldsPage.tsx @@ -43,7 +43,10 @@ function WorkspaceCreateReportFieldsPage({ const {translate, localeCompare} = useLocalize(); const formRef = useRef(null); const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT, {canBeMissing: true}); - + const [policyExpenseReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, { + canBeMissing: true, + selector: (value) => Object.values(value ?? {}).filter((report) => report?.policyID === policyID && report.type === CONST.REPORT.TYPE.EXPENSE), + }); const availableListValuesLength = (formDraft?.[INPUT_IDS.DISABLED_LIST_VALUES] ?? []).filter((disabledListValue) => !disabledListValue).length; const submitForm = useCallback( @@ -55,10 +58,11 @@ function WorkspaceCreateReportFieldsPage({ initialValue: !(values[INPUT_IDS.TYPE] === CONST.REPORT_FIELD_TYPES.LIST && availableListValuesLength === 0) ? values[INPUT_IDS.INITIAL_VALUE] : '', listValues: formDraft?.[INPUT_IDS.LIST_VALUES] ?? [], disabledListValues: formDraft?.[INPUT_IDS.DISABLED_LIST_VALUES] ?? [], + policyExpenseReports, }); Navigation.goBack(); }, - [availableListValuesLength, formDraft, policyID], + [availableListValuesLength, formDraft, policyExpenseReports, policyID], ); const validateForm = useCallback( diff --git a/tests/actions/ReportFieldTest.ts b/tests/actions/ReportFieldTest.ts index ecf3ae18a2ae..5035eb222106 100644 --- a/tests/actions/ReportFieldTest.ts +++ b/tests/actions/ReportFieldTest.ts @@ -79,6 +79,7 @@ describe('actions/ReportField', () => { initialValue: 'Default Value', listValues: [], disabledListValues: [], + policyExpenseReports: [], }; ReportField.createReportField(createReportFieldArguments); @@ -133,6 +134,7 @@ describe('actions/ReportField', () => { initialValue: defaultDate, listValues: [], disabledListValues: [], + policyExpenseReports: [], }; ReportField.createReportField(createReportFieldArguments); @@ -189,6 +191,7 @@ describe('actions/ReportField', () => { initialValue: '', listValues: ['Value 1', 'Value 2'], disabledListValues: [false, true], + policyExpenseReports: [], }; ReportField.createReportField(createReportFieldArguments); From e4ff14e3ff9fd75cdcd5f7a76a9874d8da06a19b Mon Sep 17 00:00:00 2001 From: allgandalf Date: Thu, 2 Oct 2025 12:10:47 +0530 Subject: [PATCH 2/3] make the selector more selective --- src/libs/actions/Policy/ReportField.ts | 12 ++++++------ .../workspace/reports/CreateReportFieldsPage.tsx | 12 ++++++++---- tests/actions/ReportFieldTest.ts | 6 +++--- 3 files changed, 17 insertions(+), 13 deletions(-) diff --git a/src/libs/actions/Policy/ReportField.ts b/src/libs/actions/Policy/ReportField.ts index 5aac8c1a1c3b..d1540ac4b86e 100644 --- a/src/libs/actions/Policy/ReportField.ts +++ b/src/libs/actions/Policy/ReportField.ts @@ -85,7 +85,7 @@ type CreateReportFieldParams = Pick> | undefined; + policyExpenseReportIDs: Array | undefined; }; function openPolicyReportFieldsPage(policyID: string) { @@ -170,7 +170,7 @@ function deleteReportFieldsListValue({valueIndexes, listValues, disabledListValu /** * Creates a new report field. */ -function createReportField({name, type, initialValue, listValues, disabledListValues, policyID, policyExpenseReports}: CreateReportFieldParams) { +function createReportField({name, type, initialValue, listValues, disabledListValues, policyID, policyExpenseReportIDs}: CreateReportFieldParams) { const previousFieldList = allPolicies?.[`${ONYXKEYS.COLLECTION.POLICY}${policyID}`]?.fieldList ?? {}; const fieldID = WorkspaceReportFieldUtils.generateFieldID(name); const fieldKey = ReportUtils.getReportFieldKey(fieldID); @@ -200,8 +200,8 @@ function createReportField({name, type, initialValue, listValues, disabledListVa errorFields: null, }, }, - ...(policyExpenseReports ?? []).map((report) => ({ - key: `${ONYXKEYS.COLLECTION.REPORT}${report?.reportID}`, + ...(policyExpenseReportIDs ?? []).map((reportID) => ({ + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, onyxMethod: Onyx.METHOD.MERGE, value: { fieldList: { @@ -224,8 +224,8 @@ function createReportField({name, type, initialValue, listValues, disabledListVa }, }, }, - ...(policyExpenseReports ?? []).map((report) => ({ - key: `${ONYXKEYS.COLLECTION.REPORT}${report?.reportID}`, + ...(policyExpenseReportIDs ?? []).map((reportID) => ({ + key: `${ONYXKEYS.COLLECTION.REPORT}${reportID}`, onyxMethod: Onyx.METHOD.MERGE, value: { fieldList: { diff --git a/src/pages/workspace/reports/CreateReportFieldsPage.tsx b/src/pages/workspace/reports/CreateReportFieldsPage.tsx index e25b4e849fd6..132a6b724052 100644 --- a/src/pages/workspace/reports/CreateReportFieldsPage.tsx +++ b/src/pages/workspace/reports/CreateReportFieldsPage.tsx @@ -43,10 +43,14 @@ function WorkspaceCreateReportFieldsPage({ const {translate, localeCompare} = useLocalize(); const formRef = useRef(null); const [formDraft] = useOnyx(ONYXKEYS.FORMS.WORKSPACE_REPORT_FIELDS_FORM_DRAFT, {canBeMissing: true}); - const [policyExpenseReports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, { + const [policyExpenseReportIDs] = useOnyx(ONYXKEYS.COLLECTION.REPORT, { canBeMissing: true, - selector: (value) => Object.values(value ?? {}).filter((report) => report?.policyID === policyID && report.type === CONST.REPORT.TYPE.EXPENSE), + selector: (value) => + Object.values(value ?? {}) + .filter((report) => report?.policyID === policyID && report.type === CONST.REPORT.TYPE.EXPENSE) + .map((report) => report?.reportID), }); + const availableListValuesLength = (formDraft?.[INPUT_IDS.DISABLED_LIST_VALUES] ?? []).filter((disabledListValue) => !disabledListValue).length; const submitForm = useCallback( @@ -58,11 +62,11 @@ function WorkspaceCreateReportFieldsPage({ initialValue: !(values[INPUT_IDS.TYPE] === CONST.REPORT_FIELD_TYPES.LIST && availableListValuesLength === 0) ? values[INPUT_IDS.INITIAL_VALUE] : '', listValues: formDraft?.[INPUT_IDS.LIST_VALUES] ?? [], disabledListValues: formDraft?.[INPUT_IDS.DISABLED_LIST_VALUES] ?? [], - policyExpenseReports, + policyExpenseReportIDs, }); Navigation.goBack(); }, - [availableListValuesLength, formDraft, policyExpenseReports, policyID], + [availableListValuesLength, formDraft, policyExpenseReportIDs, policyID], ); const validateForm = useCallback( diff --git a/tests/actions/ReportFieldTest.ts b/tests/actions/ReportFieldTest.ts index 5035eb222106..5df387fa4655 100644 --- a/tests/actions/ReportFieldTest.ts +++ b/tests/actions/ReportFieldTest.ts @@ -79,7 +79,7 @@ describe('actions/ReportField', () => { initialValue: 'Default Value', listValues: [], disabledListValues: [], - policyExpenseReports: [], + policyExpenseReportIDs: [], }; ReportField.createReportField(createReportFieldArguments); @@ -134,7 +134,7 @@ describe('actions/ReportField', () => { initialValue: defaultDate, listValues: [], disabledListValues: [], - policyExpenseReports: [], + policyExpenseReportIDs: [], }; ReportField.createReportField(createReportFieldArguments); @@ -191,7 +191,7 @@ describe('actions/ReportField', () => { initialValue: '', listValues: ['Value 1', 'Value 2'], disabledListValues: [false, true], - policyExpenseReports: [], + policyExpenseReportIDs: [], }; ReportField.createReportField(createReportFieldArguments); From 7b34e9ce7d3439f048f041fa15986cd964b897aa Mon Sep 17 00:00:00 2001 From: Gandalf Date: Thu, 2 Oct 2025 15:53:38 +0530 Subject: [PATCH 3/3] Apply suggestion from @allgandalf --- src/libs/actions/Policy/ReportField.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/actions/Policy/ReportField.ts b/src/libs/actions/Policy/ReportField.ts index d1540ac4b86e..bc19c9d46d89 100644 --- a/src/libs/actions/Policy/ReportField.ts +++ b/src/libs/actions/Policy/ReportField.ts @@ -1,5 +1,5 @@ import cloneDeep from 'lodash/cloneDeep'; -import type {NullishDeep, OnyxCollection, OnyxEntry, OnyxUpdate} from 'react-native-onyx'; +import type {NullishDeep, OnyxCollection, OnyxUpdate} from 'react-native-onyx'; import Onyx from 'react-native-onyx'; import * as API from '@libs/API'; import type {