From b77c5506665f903c1e83b374af35ff138f7b8a11 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 29 Feb 2024 18:03:51 +0800 Subject: [PATCH 01/13] don't overwrite report --- src/libs/actions/Report.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/libs/actions/Report.ts b/src/libs/actions/Report.ts index 462f0280e86d..df361c00eff1 100644 --- a/src/libs/actions/Report.ts +++ b/src/libs/actions/Report.ts @@ -607,13 +607,6 @@ function openReport( parameters.shouldRetry = false; } - const report = ReportUtils.getReport(reportID); - // If we open an exist report, but it is not present in Onyx yet, we should change the method to set for this report - // and we need data to be available when we navigate to the chat page - if (isEmptyObject(report)) { - optimisticData[0].onyxMethod = Onyx.METHOD.SET; - } - // If we are creating a new report, we need to add the optimistic report data and a report action if (!isEmptyObject(newReportObject)) { // Change the method to set for new reports because it doesn't exist yet, is faster, From 92ed833c1d243dcb89b6882f44b95654dd43164c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 29 Feb 2024 18:05:50 +0800 Subject: [PATCH 02/13] update onyx --- package-lock.json | 8 ++++---- package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4823fb44b7ff..51926f8515f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -97,7 +97,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "2.0.7", + "react-native-onyx": "2.0.8", "react-native-pager-view": "6.2.2", "react-native-pdf": "6.7.3", "react-native-performance": "^5.1.0", @@ -44490,9 +44490,9 @@ } }, "node_modules/react-native-onyx": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.7.tgz", - "integrity": "sha512-UGMUTSFxYEzNn3wuCGzaf0t6D5XwcE+3J2pYj7wPlbskdcHVLijZZEwgSSDBF7hgNfCuZ+ImetskPNktnf9hkg==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/react-native-onyx/-/react-native-onyx-2.0.8.tgz", + "integrity": "sha512-xWprtoDIgjErH9I9h01yAg8a/ZleSk9kyny54AQbB1UY89JT6nRVGM/KlEpC59UlzpfiA6i5ulwXVxlQJSyYoA==", "dependencies": { "ascii-table": "0.0.9", "fast-equals": "^4.0.3", diff --git a/package.json b/package.json index d75ecb9ad3e1..938ac8052cb5 100644 --- a/package.json +++ b/package.json @@ -145,7 +145,7 @@ "react-native-linear-gradient": "^2.8.1", "react-native-localize": "^2.2.6", "react-native-modal": "^13.0.0", - "react-native-onyx": "2.0.7", + "react-native-onyx": "2.0.8", "react-native-pager-view": "6.2.2", "react-native-pdf": "6.7.3", "react-native-performance": "^5.1.0", From 56191cd795b68dcb4654030937a39d8bbf8b8a7c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 30 Apr 2024 14:56:49 +0800 Subject: [PATCH 03/13] use useOnyx hook --- src/pages/home/ReportScreen.tsx | 271 +++++++++++++------------------- 1 file changed, 113 insertions(+), 158 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index aa7c623ac2b4..a81c3c42143f 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -5,7 +5,7 @@ import React, {memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, u import type {FlatList, ViewStyle} from 'react-native'; import {InteractionManager, View} from 'react-native'; import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {withOnyx} from 'react-native-onyx'; +import {useOnyx, withOnyx} from 'react-native-onyx'; import type {LayoutChangeEvent} from 'react-native/Libraries/Types/CoreEventTypes'; import Banner from '@components/Banner'; import BlockingView from '@components/BlockingViews/BlockingView'; @@ -53,10 +53,7 @@ import ReportFooter from './report/ReportFooter'; import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext'; import {ActionListContext, ReactionListContext} from './ReportScreenContext'; -type ReportScreenOnyxPropsWithoutParentReportAction = { - /** Get modal status */ - modal: OnyxEntry; - +type ReportScreenOnyxProps = { /** Tells us if the sidebar has rendered */ isSidebarLoaded: OnyxEntry; @@ -66,21 +63,9 @@ type ReportScreenOnyxPropsWithoutParentReportAction = { /** The policies which the user has access to */ policies: OnyxCollection; - /** The account manager report ID */ - accountManagerReportID: OnyxEntry; - - /** Whether user is leaving the current report */ - userLeavingStatus: OnyxEntry; - - /** Whether the composer is full size */ - isComposerFullSize: OnyxEntry; - /** An array containing all report actions related to this report, sorted based on a date criterion */ sortedAllReportActions: OnyxTypes.ReportAction[]; - /** The report currently being looked at */ - report: OnyxEntry; - /** The report metadata loading states */ reportMetadata: OnyxEntry; }; @@ -92,14 +77,7 @@ type OnyxHOCProps = { type ReportScreenNavigationProps = StackScreenProps; -type ReportScreenPropsWithoutParentReportAction = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxPropsWithoutParentReportAction & ReportScreenNavigationProps; - -type ReportScreenParentReportActionOnyxProps = { - /** The report's parentReportActions */ - parentReportActions: OnyxEntry; -}; - -type ReportScreenProps = ReportScreenPropsWithoutParentReportAction & ReportScreenParentReportActionOnyxProps; +type ReportScreenProps = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxProps & ReportScreenNavigationProps; /** Get the currently viewed report ID as number */ function getReportID(route: ReportScreenNavigationProps['route']): string { @@ -132,21 +110,15 @@ function getParentReportAction(parentReportActions: OnyxEntry getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID as string), + }); + /** * Create a lightweight Report so as to keep the re-rendering as light as possible by * passing in only the required props. @@ -173,91 +156,89 @@ function ReportScreen({ */ const report = useMemo( (): OnyxTypes.Report => ({ - lastReadTime: reportProp?.lastReadTime, - reportID: reportProp?.reportID ?? '', - policyID: reportProp?.policyID, - lastVisibleActionCreated: reportProp?.lastVisibleActionCreated, - statusNum: reportProp?.statusNum, - stateNum: reportProp?.stateNum, - writeCapability: reportProp?.writeCapability, - type: reportProp?.type, - errorFields: reportProp?.errorFields, - isPolicyExpenseChat: reportProp?.isPolicyExpenseChat, - parentReportID: reportProp?.parentReportID, - parentReportActionID: reportProp?.parentReportActionID, - chatType: reportProp?.chatType, - pendingFields: reportProp?.pendingFields, - isDeletedParentAction: reportProp?.isDeletedParentAction, - reportName: reportProp?.reportName, - description: reportProp?.description, - managerID: reportProp?.managerID, - total: reportProp?.total, - nonReimbursableTotal: reportProp?.nonReimbursableTotal, - fieldList: reportProp?.fieldList, - ownerAccountID: reportProp?.ownerAccountID, - currency: reportProp?.currency, - unheldTotal: reportProp?.unheldTotal, - participantAccountIDs: reportProp?.participantAccountIDs, - isWaitingOnBankAccount: reportProp?.isWaitingOnBankAccount, - iouReportID: reportProp?.iouReportID, - isOwnPolicyExpenseChat: reportProp?.isOwnPolicyExpenseChat, - notificationPreference: reportProp?.notificationPreference, - isPinned: reportProp?.isPinned, - chatReportID: reportProp?.chatReportID, - visibility: reportProp?.visibility, - oldPolicyName: reportProp?.oldPolicyName, - policyName: reportProp?.policyName, - isOptimisticReport: reportProp?.isOptimisticReport, - lastMentionedTime: reportProp?.lastMentionedTime, - avatarUrl: reportProp?.avatarUrl, - permissions: reportProp?.permissions, - invoiceReceiver: reportProp?.invoiceReceiver, + lastReadTime: reportOnyx?.lastReadTime, + reportID: reportOnyx?.reportID ?? '', + policyID: reportOnyx?.policyID, + lastVisibleActionCreated: reportOnyx?.lastVisibleActionCreated, + statusNum: reportOnyx?.statusNum, + stateNum: reportOnyx?.stateNum, + writeCapability: reportOnyx?.writeCapability, + type: reportOnyx?.type, + errorFields: reportOnyx?.errorFields, + isPolicyExpenseChat: reportOnyx?.isPolicyExpenseChat, + parentReportID: reportOnyx?.parentReportID, + parentReportActionID: reportOnyx?.parentReportActionID, + chatType: reportOnyx?.chatType, + pendingFields: reportOnyx?.pendingFields, + isDeletedParentAction: reportOnyx?.isDeletedParentAction, + reportName: reportOnyx?.reportName, + description: reportOnyx?.description, + managerID: reportOnyx?.managerID, + total: reportOnyx?.total, + nonReimbursableTotal: reportOnyx?.nonReimbursableTotal, + fieldList: reportOnyx?.fieldList, + ownerAccountID: reportOnyx?.ownerAccountID, + currency: reportOnyx?.currency, + unheldTotal: reportOnyx?.unheldTotal, + participantAccountIDs: reportOnyx?.participantAccountIDs, + isWaitingOnBankAccount: reportOnyx?.isWaitingOnBankAccount, + iouReportID: reportOnyx?.iouReportID, + isOwnPolicyExpenseChat: reportOnyx?.isOwnPolicyExpenseChat, + notificationPreference: reportOnyx?.notificationPreference, + isPinned: reportOnyx?.isPinned, + chatReportID: reportOnyx?.chatReportID, + visibility: reportOnyx?.visibility, + oldPolicyName: reportOnyx?.oldPolicyName, + policyName: reportOnyx?.policyName, + isOptimisticReport: reportOnyx?.isOptimisticReport, + lastMentionedTime: reportOnyx?.lastMentionedTime, + avatarUrl: reportOnyx?.avatarUrl, + permissions: reportOnyx?.permissions, + invoiceReceiver: reportOnyx?.invoiceReceiver, }), [ - reportProp?.lastReadTime, - reportProp?.reportID, - reportProp?.policyID, - reportProp?.lastVisibleActionCreated, - reportProp?.statusNum, - reportProp?.stateNum, - reportProp?.writeCapability, - reportProp?.type, - reportProp?.errorFields, - reportProp?.isPolicyExpenseChat, - reportProp?.parentReportID, - reportProp?.parentReportActionID, - reportProp?.chatType, - reportProp?.pendingFields, - reportProp?.isDeletedParentAction, - reportProp?.reportName, - reportProp?.description, - reportProp?.managerID, - reportProp?.total, - reportProp?.nonReimbursableTotal, - reportProp?.fieldList, - reportProp?.ownerAccountID, - reportProp?.currency, - reportProp?.unheldTotal, - reportProp?.participantAccountIDs, - reportProp?.isWaitingOnBankAccount, - reportProp?.iouReportID, - reportProp?.isOwnPolicyExpenseChat, - reportProp?.notificationPreference, - reportProp?.isPinned, - reportProp?.chatReportID, - reportProp?.visibility, - reportProp?.oldPolicyName, - reportProp?.policyName, - reportProp?.isOptimisticReport, - reportProp?.lastMentionedTime, - reportProp?.avatarUrl, - reportProp?.permissions, - reportProp?.invoiceReceiver, + reportOnyx?.lastReadTime, + reportOnyx?.reportID, + reportOnyx?.policyID, + reportOnyx?.lastVisibleActionCreated, + reportOnyx?.statusNum, + reportOnyx?.stateNum, + reportOnyx?.writeCapability, + reportOnyx?.type, + reportOnyx?.errorFields, + reportOnyx?.isPolicyExpenseChat, + reportOnyx?.parentReportID, + reportOnyx?.parentReportActionID, + reportOnyx?.chatType, + reportOnyx?.pendingFields, + reportOnyx?.isDeletedParentAction, + reportOnyx?.reportName, + reportOnyx?.description, + reportOnyx?.managerID, + reportOnyx?.total, + reportOnyx?.nonReimbursableTotal, + reportOnyx?.fieldList, + reportOnyx?.ownerAccountID, + reportOnyx?.currency, + reportOnyx?.unheldTotal, + reportOnyx?.participantAccountIDs, + reportOnyx?.isWaitingOnBankAccount, + reportOnyx?.iouReportID, + reportOnyx?.isOwnPolicyExpenseChat, + reportOnyx?.notificationPreference, + reportOnyx?.isPinned, + reportOnyx?.chatReportID, + reportOnyx?.visibility, + reportOnyx?.oldPolicyName, + reportOnyx?.policyName, + reportOnyx?.isOptimisticReport, + reportOnyx?.lastMentionedTime, + reportOnyx?.avatarUrl, + reportOnyx?.permissions, + reportOnyx?.invoiceReceiver, ], ); - const parentReportAction = useMemo(() => getParentReportAction(parentReportActions, report?.parentReportActionID), [parentReportActions, report.parentReportActionID]); - const prevReport = usePrevious(report); const prevUserLeavingStatus = usePrevious(userLeavingStatus); const [isLinkingToMessage, setIsLinkingToMessage] = useState(!!reportActionIDFromRoute); @@ -430,6 +411,7 @@ function ReportScreen({ return; } + console.log('fetch report', report); fetchReport(); }, [report, fetchReport, reportIDFromRoute]); @@ -458,7 +440,6 @@ function ReportScreen({ Timing.end(CONST.TIMING.CHAT_RENDER); Performance.markEnd(CONST.TIMING.CHAT_RENDER); - fetchReportIfNeeded(); const interactionTask = InteractionManager.runAfterInteractions(() => { ComposerActions.setShouldShowComposeInput(true); }); @@ -475,6 +456,13 @@ function ReportScreen({ // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + useEffect(() => { + if (reportResult.status === 'loading') { + return; + } + fetchReportIfNeeded(); + }, [reportResult.status]); + // If a user has chosen to leave a thread, and then returns to it (e.g. with the back button), we need to call `openReport` again in order to allow the user to rejoin and to receive real-time updates useEffect(() => { if (!shouldUseNarrowLayout || !isFocused || prevIsFocused || !ReportUtils.isChatThread(report) || report.notificationPreference !== CONST.REPORT.NOTIFICATION_PREFERENCE.HIDDEN) { @@ -731,11 +719,8 @@ function ReportScreen({ ReportScreen.displayName = 'ReportScreen'; export default withCurrentReportID( - withOnyx( + withOnyx( { - modal: { - key: ONYXKEYS.MODAL, - }, isSidebarLoaded: { key: ONYXKEYS.IS_SIDEBAR_LOADED, }, @@ -744,10 +729,6 @@ export default withCurrentReportID( canEvict: false, selector: (allReportActions: OnyxEntry) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, true), }, - report: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, - allowStaleData: true, - }, reportMetadata: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, initialValue: { @@ -756,10 +737,6 @@ export default withCurrentReportID( isLoadingNewerReportActions: false, }, }, - isComposerFullSize: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`, - initialValue: false, - }, betas: { key: ONYXKEYS.BETAS, }, @@ -767,42 +744,20 @@ export default withCurrentReportID( key: ONYXKEYS.COLLECTION.POLICY, allowStaleData: true, }, - accountManagerReportID: { - key: ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, - initialValue: null, - }, - userLeavingStatus: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${getReportID(route)}`, - initialValue: false, - }, }, true, + true, )( - withOnyx({ - parentReportActions: { - key: ({report}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${report ? report.parentReportID : 0}`, - canEvict: false, - }, - })( - memo(ReportScreen, (prevProps, nextProps) => { - const prevParentReportAction = getParentReportAction(prevProps.parentReportActions, prevProps.report?.parentReportActionID); - const nextParentReportAction = getParentReportAction(nextProps.parentReportActions, nextProps.report?.parentReportActionID); - return ( - prevProps.isSidebarLoaded === nextProps.isSidebarLoaded && - lodashIsEqual(prevProps.sortedAllReportActions, nextProps.sortedAllReportActions) && - lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) && - prevProps.isComposerFullSize === nextProps.isComposerFullSize && - lodashIsEqual(prevProps.betas, nextProps.betas) && - lodashIsEqual(prevProps.policies, nextProps.policies) && - prevProps.accountManagerReportID === nextProps.accountManagerReportID && - prevProps.userLeavingStatus === nextProps.userLeavingStatus && - prevProps.currentReportID === nextProps.currentReportID && - lodashIsEqual(prevProps.modal, nextProps.modal) && - lodashIsEqual(prevParentReportAction, nextParentReportAction) && - lodashIsEqual(prevProps.route, nextProps.route) && - lodashIsEqual(prevProps.report, nextProps.report) - ); - }), - ), + memo(ReportScreen, (prevProps, nextProps) => { + return ( + prevProps.isSidebarLoaded === nextProps.isSidebarLoaded && + lodashIsEqual(prevProps.sortedAllReportActions, nextProps.sortedAllReportActions) && + lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) && + lodashIsEqual(prevProps.betas, nextProps.betas) && + lodashIsEqual(prevProps.policies, nextProps.policies) && + prevProps.currentReportID === nextProps.currentReportID && + lodashIsEqual(prevProps.route, nextProps.route) + ); + }), ), ); From 6ac5bf3109bc8efd4c64fe99771efdcaae31d9b2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 30 Apr 2024 15:00:06 +0800 Subject: [PATCH 04/13] remove console log --- src/pages/home/ReportScreen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index a81c3c42143f..960f65f3c16c 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -411,7 +411,6 @@ function ReportScreen({ return; } - console.log('fetch report', report); fetchReport(); }, [report, fetchReport, reportIDFromRoute]); From d5b4278999c7a1722264ec7364177e57103abf3d Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 30 Apr 2024 15:01:36 +0800 Subject: [PATCH 05/13] fallback to empty screen --- src/pages/home/ReportScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 960f65f3c16c..4de2b07d9ec5 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -143,7 +143,7 @@ function ReportScreen({ const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, {allowStaleData: true}); const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportOnyx?.parentReportID || 0}`, { canEvict: false, - selector: (parentReportActions) => getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID as string), + selector: (parentReportActions) => getParentReportAction(parentReportActions, (reportOnyx?.parentReportActionID ?? '') as string), }); /** From 49867e713e177343eaa038a5e8c7d676f851496c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 30 Apr 2024 17:54:07 +0800 Subject: [PATCH 06/13] remove code for debugging --- src/pages/home/ReportScreen.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 4de2b07d9ec5..401390a49018 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -745,7 +745,6 @@ export default withCurrentReportID( }, }, true, - true, )( memo(ReportScreen, (prevProps, nextProps) => { return ( From d4b1d076b22c673ff1b5581f87a5c90aa8bc8e7f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 30 Apr 2024 17:55:00 +0800 Subject: [PATCH 07/13] fix wrong onyxkey name --- src/pages/home/ReportScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 401390a49018..c324c645471b 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -136,7 +136,7 @@ function ReportScreen({ const {isSmallScreenWidth} = useWindowDimensions(); const shouldUseNarrowLayout = isSmallScreenWidth || isReportOpenInRHP; - const [modal] = useOnyx(ONYXKEYS.COLLECTION.MODAL); + const [modal] = useOnyx(ONYXKEYS.MODAL); const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`, {initialValue: false}); const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, {initialValue: null}); const [userLeavingStatus] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${getReportID(route)}`, {initialValue: false}); From 05d7188704e374ba05033ac2c52303e91d3899a2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 30 Apr 2024 17:57:15 +0800 Subject: [PATCH 08/13] fix lint --- src/pages/home/ReportScreen.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index c324c645471b..c89073e34a3b 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -141,9 +141,10 @@ function ReportScreen({ const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, {initialValue: null}); const [userLeavingStatus] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${getReportID(route)}`, {initialValue: false}); const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`, {allowStaleData: true}); + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing const [parentReportAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportOnyx?.parentReportID || 0}`, { canEvict: false, - selector: (parentReportActions) => getParentReportAction(parentReportActions, (reportOnyx?.parentReportActionID ?? '') as string), + selector: (parentReportActions) => getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID ?? ''), }); /** @@ -746,16 +747,16 @@ export default withCurrentReportID( }, true, )( - memo(ReportScreen, (prevProps, nextProps) => { - return ( + memo( + ReportScreen, + (prevProps, nextProps) => prevProps.isSidebarLoaded === nextProps.isSidebarLoaded && lodashIsEqual(prevProps.sortedAllReportActions, nextProps.sortedAllReportActions) && lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) && lodashIsEqual(prevProps.betas, nextProps.betas) && lodashIsEqual(prevProps.policies, nextProps.policies) && prevProps.currentReportID === nextProps.currentReportID && - lodashIsEqual(prevProps.route, nextProps.route) - ); - }), + lodashIsEqual(prevProps.route, nextProps.route), + ), ), ); From 4df4c34ec10625bdc7c7871486f217f4c5a6767f Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 30 Apr 2024 18:48:39 +0800 Subject: [PATCH 09/13] supress lint --- src/pages/home/ReportScreen.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index c89073e34a3b..ac33051c2b9f 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -461,6 +461,7 @@ function ReportScreen({ return; } fetchReportIfNeeded(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, [reportResult.status]); // If a user has chosen to leave a thread, and then returns to it (e.g. with the back button), we need to call `openReport` again in order to allow the user to rejoin and to receive real-time updates From 9f79f278cc272475baeecc52e363a863a3fb17e2 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 15 May 2024 13:55:15 +0800 Subject: [PATCH 10/13] remove dupe openreport --- src/pages/home/ReportScreen.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index f1bea5aa3657..9db5730be0d1 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -451,10 +451,6 @@ function ReportScreen({ Timing.end(CONST.TIMING.CHAT_RENDER); Performance.markEnd(CONST.TIMING.CHAT_RENDER); - // Call OpenReport only if we are not linking to a message or the report is not available yet - if (!reportActionIDFromRoute || !report.reportID) { - fetchReportIfNeeded(); - } const interactionTask = InteractionManager.runAfterInteractions(() => { ComposerActions.setShouldShowComposeInput(true); }); From 2d039ab22e7f2f31391cb7ac77ebc4f5c30de4a1 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 15 May 2024 14:32:03 +0800 Subject: [PATCH 11/13] set initial value to empty object --- src/pages/home/report/ReportActionsView.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx index d1e45f3998cd..982fe49a4c44 100755 --- a/src/pages/home/report/ReportActionsView.tsx +++ b/src/pages/home/report/ReportActionsView.tsx @@ -630,6 +630,7 @@ export default Performance.withRenderTrace({id: ' rendering'} }, transactionThreadReport: { key: ({transactionThreadReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${transactionThreadReportID}`, + initialValue: {} as OnyxTypes.Report, }, })(MemoizedReportActionsView), ); From 774048b3ec4db915701e89da7fa3be351bccc04c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 16 May 2024 22:04:15 +0800 Subject: [PATCH 12/13] use isLoadingOnyxValue --- src/pages/home/ReportScreen.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index dfa88e1e2c70..124c68d17fa0 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -52,6 +52,7 @@ import ReportActionsView from './report/ReportActionsView'; import ReportFooter from './report/ReportFooter'; import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext'; import {ActionListContext, ReactionListContext} from './ReportScreenContext'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; type ReportScreenOnyxProps = { /** Tells us if the sidebar has rendered */ @@ -152,6 +153,8 @@ function ReportScreen({ selector: (parentReportActions) => getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID ?? ''), }); + const isLoadingReportOnyx = isLoadingOnyxValue(reportResult); + /** * Create a lightweight Report so as to keep the re-rendering as light as possible by * passing in only the required props. @@ -469,13 +472,13 @@ function ReportScreen({ useEffect(() => { // Call OpenReport only if we are not linking to a message or the report is not available yet - if (reportResult.status === 'loading' || (reportActionIDFromRoute && report.reportID)) { + if (isLoadingReportOnyx || (reportActionIDFromRoute && report.reportID)) { return; } fetchReportIfNeeded(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [reportResult.status]); + }, [isLoadingReportOnyx]); // If a user has chosen to leave a thread, and then returns to it (e.g. with the back button), we need to call `openReport` again in order to allow the user to rejoin and to receive real-time updates useEffect(() => { From 01509e2e5bf8c6471ea9524f3920acf4e5fb098a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 16 May 2024 22:17:17 +0800 Subject: [PATCH 13/13] prettier --- src/pages/home/ReportScreen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 124c68d17fa0..83cf4bbed197 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -47,12 +47,12 @@ import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import HeaderView from './HeaderView'; import ReportActionsView from './report/ReportActionsView'; import ReportFooter from './report/ReportFooter'; import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext'; import {ActionListContext, ReactionListContext} from './ReportScreenContext'; -import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; type ReportScreenOnyxProps = { /** Tells us if the sidebar has rendered */