From 2b77edc3fa7ea5372fea151a7e2f326fcf02bf8b Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Wed, 13 Mar 2024 09:08:38 +0100
Subject: [PATCH] add selector for sortedAllReportActions

---
 src/pages/home/ReportScreen.tsx | 31 +++++++++++++------------------
 1 file changed, 13 insertions(+), 18 deletions(-)

diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index b1138cd8a28e..6bd07f044dba 100644
--- a/src/pages/home/ReportScreen.tsx
+++ b/src/pages/home/ReportScreen.tsx
@@ -53,12 +53,7 @@ import ReportFooter from './report/ReportFooter';
 import {ActionListContext, ReactionListContext} from './ReportScreenContext';
 import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext';
 
-type ReportActionMap = Record<string, OnyxTypes.ReportAction>;
-
 type ReportScreenOnyxProps = {
-    /** All the report actions for this report */
-    allReportActions: ReportActionMap;
-
     /** Tells us if the sidebar has rendered */
     isSidebarLoaded: OnyxEntry<boolean>;
 
@@ -77,8 +72,8 @@ type ReportScreenOnyxProps = {
     /** Whether the composer is full size */
     isComposerFullSize: OnyxEntry<boolean>;
 
-    /** All the report actions for this report */
-    // reportActions: OnyxTypes.ReportAction[];
+    /** 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<ReportWithoutHasDraft>;
@@ -110,7 +105,7 @@ function ReportScreen({
     betas = [],
     route,
     report: reportProp,
-    allReportActions,
+    sortedAllReportActions,
     reportMetadata = {
         isLoadingInitialReportActions: true,
         isLoadingOlderReportActions: false,
@@ -226,13 +221,12 @@ function ReportScreen({
     const prevUserLeavingStatus = usePrevious(userLeavingStatus);
     const [isLinkingToMessage, setLinkingToMessage] = useState(!!reportActionIDFromRoute);
     const reportActions = useMemo(() => {
-        if (!allReportActions) {
+        if (!sortedAllReportActions.length) {
             return [];
         }
-        const sortedReportActions = ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, true);
-        const currentRangeOfReportActions = ReportActionsUtils.getContinuousReportActionChain(sortedReportActions, reportActionIDFromRoute);
+        const currentRangeOfReportActions = ReportActionsUtils.getContinuousReportActionChain(sortedAllReportActions, reportActionIDFromRoute);
         return currentRangeOfReportActions;
-    }, [reportActionIDFromRoute, allReportActions]);
+    }, [reportActionIDFromRoute, sortedAllReportActions]);
 
     // Define here because reportActions are recalculated before mount, allowing data to display faster than useEffect can trigger. If we have cached reportActions, they will be shown immediately. We aim to display a loader first, then fetch relevant reportActions, and finally show them.
     useLayoutEffect(() => {
@@ -510,14 +504,14 @@ function ReportScreen({
     };
 
     const isLinkedReportActionDeleted = useMemo(() => {
-        if (!reportActionIDFromRoute || !allReportActions) {
+        if (!reportActionIDFromRoute || !sortedAllReportActions) {
             return false;
         }
-        const action = allReportActions[reportActionIDFromRoute];
+        const action = sortedAllReportActions.find(item => item.reportActionID === reportActionIDFromRoute);
         return action && ReportActionsUtils.isDeletedAction(action);
-    }, [reportActionIDFromRoute, allReportActions]);
+    }, [reportActionIDFromRoute, sortedAllReportActions]);
 
-    if (isLinkedReportActionDeleted || (!shouldShowSkeleton && reportActionIDFromRoute && reportActions?.length === 0 && !isLinkingToMessage)) {
+    if (isLinkedReportActionDeleted ?? (!shouldShowSkeleton && reportActionIDFromRoute && reportActions?.length === 0 && !isLinkingToMessage)) {
         return (
             <BlockingView
                 icon={Illustrations.ToddBehindCloud}
@@ -626,9 +620,10 @@ export default withViewportOffsetTop(
                 isSidebarLoaded: {
                     key: ONYXKEYS.IS_SIDEBAR_LOADED,
                 },
-                allReportActions: {
+                sortedAllReportActions: {
                     key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${getReportID(route)}`,
                     canEvict: false,
+                    selector: (allReportActions: OnyxEntry<OnyxTypes.ReportActions>) => ReportActionsUtils.getSortedReportActionsForDisplay(allReportActions, true),
                 },
                 report: {
                     key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${getReportID(route)}`,
@@ -680,7 +675,7 @@ export default withViewportOffsetTop(
                 ReportScreen,
                 (prevProps, nextProps) =>
                     prevProps.isSidebarLoaded === nextProps.isSidebarLoaded &&
-                    lodashIsEqual(prevProps.allReportActions, nextProps.allReportActions) &&
+                    lodashIsEqual(prevProps.sortedAllReportActions, nextProps.sortedAllReportActions) &&
                     lodashIsEqual(prevProps.reportMetadata, nextProps.reportMetadata) &&
                     prevProps.isComposerFullSize === nextProps.isComposerFullSize &&
                     lodashIsEqual(prevProps.betas, nextProps.betas) &&