From eebf281b32076f04bf4ffefa252796829d2b4f3b Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 22 Jun 2024 12:03:50 +0800 Subject: [PATCH 01/10] replace withOnyx with useOnyx --- src/pages/home/ReportScreen.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index e30a18a2f3ec..ee2b89f6ab96 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -66,9 +66,6 @@ type ReportScreenOnyxProps = { /** The policies which the user has access to */ policies: OnyxCollection; - /** An array containing all report actions related to this report, sorted based on a date criterion */ - sortedAllReportActions: OnyxTypes.ReportAction[]; - /** Additional report details */ reportNameValuePairs: OnyxEntry; @@ -117,7 +114,6 @@ function ReportScreen({ betas = [], route, reportNameValuePairs, - sortedAllReportActions, reportMetadata = { isLoadingInitialReportActions: true, isLoadingOlderReportActions: false, @@ -155,6 +151,10 @@ function ReportScreen({ canEvict: false, selector: (parentReportActions) => getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID ?? ''), }); + const [sortedAllReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, { + canEvict: false, + selector: (allReportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, true), + }); const isLoadingReportOnyx = isLoadingOnyxValue(reportResult); const permissions = useDeepCompareRef(reportOnyx?.permissions); @@ -774,11 +774,6 @@ export default withCurrentReportID( isSidebarLoaded: { key: ONYXKEYS.IS_SIDEBAR_LOADED, }, - sortedAllReportActions: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, - canEvict: false, - selector: (allReportActions: OnyxEntry) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, true), - }, reportNameValuePairs: { key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${getReportID(route)}`, allowStaleData: true, @@ -807,7 +802,6 @@ export default withCurrentReportID( 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) && From 4e24f27d8de21ec9f642851cab84a754a1b439ea Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 2 Jul 2024 17:45:06 +0800 Subject: [PATCH 02/10] replace withOnyx with useOnyx hook --- src/pages/home/ReportScreen.tsx | 119 ++++++-------------------------- 1 file changed, 20 insertions(+), 99 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index 5c6a3929f66e..e9d21a5fdde6 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -5,8 +5,8 @@ import lodashIsEqual from 'lodash/isEqual'; import React, {memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react'; import type {FlatList, ViewStyle} from 'react-native'; import {InteractionManager, View} from 'react-native'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; -import {useOnyx, withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import {useOnyx} from 'react-native-onyx'; import Banner from '@components/Banner'; import BlockingView from '@components/BlockingViews/BlockingView'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; @@ -58,31 +58,9 @@ import ReportFooter from './report/ReportFooter'; import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext'; import {ActionListContext, ReactionListContext} from './ReportScreenContext'; -type ReportScreenOnyxProps = { - /** Tells us if the sidebar has rendered */ - isSidebarLoaded: OnyxEntry; - - /** Beta features list */ - betas: OnyxEntry; - - /** The policies which the user has access to */ - policies: OnyxCollection; - - /** Additional report details */ - reportNameValuePairs: OnyxEntry; - - /** The report metadata loading states */ - reportMetadata: OnyxEntry; -}; - -type OnyxHOCProps = { - /** Onyx function that marks the component ready for hydration */ - markReadyForHydration?: () => void; -}; - type ReportScreenNavigationProps = StackScreenProps; -type ReportScreenProps = OnyxHOCProps & CurrentReportIDContextValue & ReportScreenOnyxProps & ReportScreenNavigationProps; +type ReportScreenProps = CurrentReportIDContextValue & ReportScreenNavigationProps; /** Get the currently viewed report ID as number */ function getReportID(route: ReportScreenNavigationProps['route']): string { @@ -112,23 +90,7 @@ function getParentReportAction(parentReportActions: OnyxEntry getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID ?? ''), }); - const [sortedAllReportActions] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, { + const [sortedAllReportActions = []] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, { canEvict: false, selector: (allReportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, true), }); @@ -643,15 +618,6 @@ function ReportScreen({ }; }, [report, didSubscribeToReportLeavingEvents, reportIDFromRoute]); - const onListLayout = useCallback(() => { - if (!markReadyForHydration) { - return; - } - - markReadyForHydration(); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - const actionListValue = useMemo((): ActionListContextType => ({flatListRef, scrollPosition, setScrollPosition}), [flatListRef, scrollPosition, setScrollPosition]); // This helps in tracking from the moment 'route' triggers useMemo until isLoadingInitialReportActions becomes true. It prevents blinking when loading reportActions from cache. @@ -767,10 +733,7 @@ function ReportScreen({ /> )} - + {shouldShowReportActionList && ( ( - { - isSidebarLoaded: { - key: ONYXKEYS.IS_SIDEBAR_LOADED, - }, - reportNameValuePairs: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${getReportID(route)}`, - allowStaleData: true, - }, - reportMetadata: { - key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, - initialValue: { - isLoadingInitialReportActions: true, - isLoadingOlderReportActions: false, - hasLoadingOlderReportActionsError: false, - isLoadingNewerReportActions: false, - hasLoadingNewerReportActionsError: false, - }, - }, - betas: { - key: ONYXKEYS.BETAS, - }, - policies: { - key: ONYXKEYS.COLLECTION.POLICY, - allowStaleData: true, - }, - }, - true, - )( - memo( - ReportScreen, - (prevProps, nextProps) => - prevProps.isSidebarLoaded === nextProps.isSidebarLoaded && - lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) && - lodashIsEqual(prevProps.betas, nextProps.betas) && - lodashIsEqual(prevProps.policies, nextProps.policies) && - prevProps.currentReportID === nextProps.currentReportID && - lodashIsEqual(prevProps.route, nextProps.route), - ), - ), -); +export default withCurrentReportID(memo(ReportScreen, (prevProps, nextProps) => prevProps.currentReportID === nextProps.currentReportID && lodashIsEqual(prevProps.route, nextProps.route))); From 57edf6cb1d472d33ba11826cda9e69a26a7767eb Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Tue, 2 Jul 2024 18:25:46 +0800 Subject: [PATCH 03/10] reuse variable --- src/pages/home/ReportScreen.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx index e9d21a5fdde6..1073fba0f4fb 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -106,12 +106,12 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro const shouldUseNarrowLayout = isSmallScreenWidth || isReportOpenInRHP; const [modal] = useOnyx(ONYXKEYS.MODAL); - const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${getReportID(route)}`, {initialValue: false}); + const [isComposerFullSize] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportIDFromRoute}`, {initialValue: false}); const [accountManagerReportID] = useOnyx(ONYXKEYS.ACCOUNT_MANAGER_REPORT_ID, {initialValue: ''}); - 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}); - const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${getReportID(route)}`, {allowStaleData: true}); - const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${getReportID(route)}`, { + const [userLeavingStatus] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportIDFromRoute}`, {initialValue: false}); + const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`, {allowStaleData: true}); + const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportIDFromRoute}`, {allowStaleData: true}); + const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, { initialValue: { isLoadingInitialReportActions: true, isLoadingOlderReportActions: false, @@ -128,7 +128,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro canEvict: false, selector: (parentReportActions) => getParentReportAction(parentReportActions, reportOnyx?.parentReportActionID ?? ''), }); - const [sortedAllReportActions = []] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`, { + const [sortedAllReportActions = []] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportIDFromRoute}`, { canEvict: false, selector: (allReportActions) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, true), }); From 7a292559696e58e15ffc58309f9cbfcc0567ccc4 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Jul 2024 21:27:06 +0800 Subject: [PATCH 04/10] update test --- tests/ui/UnreadIndicatorsTest.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/tests/ui/UnreadIndicatorsTest.tsx b/tests/ui/UnreadIndicatorsTest.tsx index b5990ee5d002..35b9f2ad1448 100644 --- a/tests/ui/UnreadIndicatorsTest.tsx +++ b/tests/ui/UnreadIndicatorsTest.tsx @@ -537,6 +537,22 @@ describe('Unread Indicators', () => { // Leave a comment as the current user and verify the indicator is removed Report.addComment(REPORT_ID, 'Current User Comment 1'); + const newActionID: string = await new Promise((resolve) => { + const connectionID = Onyx.connect({ + key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`, + callback: (reportActions) => { + Onyx.disconnect(connectionID); + const sortedActions = Object.values(reportActions ?? {}).toSorted((a, b) => a.created < b.created ? -1 : 1); + resolve(sortedActions.pop()?.reportActionID ?? ''); + }, + }); + }); + expect(newActionID).toBeTruthy(); + Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`, { + [newActionID]: { + previousReportActionID: '9', + }, + }); return waitForBatchedUpdates(); }) .then(() => { From 8c427a2b187510ce3961fc068ff1435aeb62344b Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Jul 2024 21:42:13 +0800 Subject: [PATCH 05/10] only clears the referrer when it's open from notification --- src/pages/home/report/ReportActionsList.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index 9945eeb7fb4f..48129dd57adc 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/src/pages/home/report/ReportActionsList.tsx @@ -267,7 +267,9 @@ function ReportActionsList({ const isFromNotification = route?.params?.referrer === CONST.REFERRER.NOTIFICATION; if ((Visibility.isVisible() || isFromNotification) && scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD) { Report.readNewestAction(report.reportID); - Navigation.setParams({referrer: undefined}); + if (isFromNotification) { + Navigation.setParams({referrer: undefined}); + } } else { readActionSkipped.current = true; } From 8acb474f3b2dd70fc780005b4c7e57e14b613639 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 3 Jul 2024 21:52:56 +0800 Subject: [PATCH 06/10] prettier --- tests/ui/UnreadIndicatorsTest.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/ui/UnreadIndicatorsTest.tsx b/tests/ui/UnreadIndicatorsTest.tsx index 35b9f2ad1448..44a4dd796a07 100644 --- a/tests/ui/UnreadIndicatorsTest.tsx +++ b/tests/ui/UnreadIndicatorsTest.tsx @@ -542,7 +542,7 @@ describe('Unread Indicators', () => { key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`, callback: (reportActions) => { Onyx.disconnect(connectionID); - const sortedActions = Object.values(reportActions ?? {}).toSorted((a, b) => a.created < b.created ? -1 : 1); + const sortedActions = Object.values(reportActions ?? {}).toSorted((a, b) => (a.created < b.created ? -1 : 1)); resolve(sortedActions.pop()?.reportActionID ?? ''); }, }); From 1d6de85820e791bf5bf5cf5af28361797d58bd9c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 4 Jul 2024 17:11:38 +0800 Subject: [PATCH 07/10] fix extra render --- src/components/PopoverMenu.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 154f5c1e1cd3..397215899914 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -109,7 +109,7 @@ function PopoverMenu({ const selectedItemIndex = useRef(null); const [currentMenuItems, setCurrentMenuItems] = useState(menuItems); - const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState([]); + const [enteredSubMenuIndexes, setEnteredSubMenuIndexes] = useState(CONST.EMPTY_ARRAY); const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({initialFocusedIndex: -1, maxIndex: currentMenuItems.length - 1, isActive: isVisible}); @@ -156,7 +156,7 @@ function PopoverMenu({ onPress={() => { setCurrentMenuItems(previousMenuItems); setFocusedIndex(-1); - enteredSubMenuIndexes.splice(-1); + setEnteredSubMenuIndexes(enteredSubMenuIndexes.slice(0, -1)) }} /> ); @@ -186,7 +186,7 @@ function PopoverMenu({ if (menuItems.length === 0) { return; } - setEnteredSubMenuIndexes([]); + setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY); setCurrentMenuItems(menuItems); }, [menuItems]); @@ -197,7 +197,7 @@ function PopoverMenu({ anchorAlignment={anchorAlignment} onClose={() => { setCurrentMenuItems(menuItems); - setEnteredSubMenuIndexes([]); + setEnteredSubMenuIndexes(CONST.EMPTY_ARRAY); onClose(); }} isVisible={isVisible} From f93774e8840accb22d5885a97e28350a78043a16 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 4 Jul 2024 17:25:13 +0800 Subject: [PATCH 08/10] prettier --- src/components/PopoverMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 397215899914..c571268bd515 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -156,7 +156,7 @@ function PopoverMenu({ onPress={() => { setCurrentMenuItems(previousMenuItems); setFocusedIndex(-1); - setEnteredSubMenuIndexes(enteredSubMenuIndexes.slice(0, -1)) + setEnteredSubMenuIndexes(enteredSubMenuIndexes.slice(0, -1)); }} /> ); From 0608ee874db4a4387cc57d1b447843aeabb4a393 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 8 Jul 2024 20:15:57 +0800 Subject: [PATCH 09/10] 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 792bc7a23874..2e8f5252c861 100644 --- a/src/pages/home/ReportScreen.tsx +++ b/src/pages/home/ReportScreen.tsx @@ -112,7 +112,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro const [userLeavingStatus] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM}${reportIDFromRoute}`, {initialValue: false}); const [reportOnyx, reportResult] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportIDFromRoute}`, {allowStaleData: true}); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportIDFromRoute}`, {allowStaleData: true}); - const [reportActionPages] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_PAGES}${reportIDFromRoute}`) + const [reportActionPages] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS_PAGES}${reportIDFromRoute}`); const [reportMetadata] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportIDFromRoute}`, { initialValue: { isLoadingInitialReportActions: true, From 126d3cea3e70a0676955fa699221814570b9f023 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 8 Jul 2024 20:16:22 +0800 Subject: [PATCH 10/10] update test --- tests/ui/UnreadIndicatorsTest.tsx | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/tests/ui/UnreadIndicatorsTest.tsx b/tests/ui/UnreadIndicatorsTest.tsx index 3d4c77a387f0..b10cae2e7736 100644 --- a/tests/ui/UnreadIndicatorsTest.tsx +++ b/tests/ui/UnreadIndicatorsTest.tsx @@ -442,22 +442,6 @@ describe('Unread Indicators', () => { // Leave a comment as the current user and verify the indicator is removed Report.addComment(REPORT_ID, 'Current User Comment 1'); - const newActionID: string = await new Promise((resolve) => { - const connectionID = Onyx.connect({ - key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`, - callback: (reportActions) => { - Onyx.disconnect(connectionID); - const sortedActions = Object.values(reportActions ?? {}).toSorted((a, b) => (a.created < b.created ? -1 : 1)); - resolve(sortedActions.pop()?.reportActionID ?? ''); - }, - }); - }); - expect(newActionID).toBeTruthy(); - Onyx.merge(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${REPORT_ID}`, { - [newActionID]: { - previousReportActionID: '9', - }, - }); return waitForBatchedUpdates(); }) .then(() => {