Move useSidebarOrderedReports cache to OnyxDerived 2

src/CONST/index.ts

@@ -3731,6 +3731,9 @@ const CONST = {
 
     LOCALES,
 
+    // Shared Intl.Collator options for locale-aware sorting of display names.
+    COLLATOR_OPTIONS: {usage: 'sort', sensitivity: 'variant', numeric: true, caseFirst: 'upper'} as Intl.CollatorOptions,
+
     PRONOUNS_LIST: [
         'coCos',
         'eEyEmEir',

src/ONYXKEYS.ts

@@ -1183,6 +1183,7 @@ const ONYXKEYS = {
         TODOS: 'todos',
         RAM_ONLY_SORTED_REPORT_ACTIONS: 'sortedReportActions',
         OPEN_AND_SUBMITTED_REPORTS_BY_POLICY_ID: 'openAndSubmittedReportsByPolicyID',
+        RAM_ONLY_SIDEBAR_ORDERED_REPORTS: 'sidebarOrderedReports',
     },
 
     /** Stores HybridApp specific state required to interoperate with OldDot */
@@ -1666,6 +1667,7 @@ type OnyxDerivedValuesMapping = {
     [ONYXKEYS.DERIVED.TODOS]: OnyxTypes.TodosDerivedValue;
     [ONYXKEYS.DERIVED.RAM_ONLY_SORTED_REPORT_ACTIONS]: OnyxTypes.SortedReportActionsDerivedValue;
     [ONYXKEYS.DERIVED.OPEN_AND_SUBMITTED_REPORTS_BY_POLICY_ID]: OnyxTypes.OpenAndSubmittedReportsByPolicyIDDerivedValue;
+    [ONYXKEYS.DERIVED.RAM_ONLY_SIDEBAR_ORDERED_REPORTS]: OnyxTypes.SidebarOrderedReportsDerivedValue;
 };
 
 type OnyxValues = OnyxValuesMapping & OnyxCollectionValuesMapping & OnyxFormValuesMapping & OnyxFormDraftValuesMapping & OnyxDerivedValuesMapping;

src/components/LHNOptionsList/LHNOptionsList.tsx

@@ -15,20 +15,19 @@ import getPlatform from '@libs/getPlatform';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Report} from '@src/types/onyx';
 import LHNTooltipContextProvider from './LHNTooltipContextProvider';
 import OptionRowLHNData from './OptionRowLHN';
 import OptionRowRendererComponent from './OptionRowRendererComponent';
 import type {LHNOptionsListProps, RenderItemProps} from './types';
 
-const keyExtractor = (item: Report) => `report_${item.reportID}`;
+const keyExtractor = (item: string) => `report_${item}`;
 const platform = getPlatform();
 const isWeb = platform === CONST.PLATFORM.WEB;
 
 function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optionMode, shouldDisableFocusOptions = false, onFirstItemRendered = () => {}}: LHNOptionsListProps) {
     const {saveScrollOffset, getScrollOffset, saveScrollIndex, getScrollIndex} = useContext(ScrollOffsetContext);
     const {isOffline} = useNetwork();
-    const flashListRef = useRef<FlashListRef<Report>>(null);
+    const flashListRef = useRef<FlashListRef<string>>(null);
     const route = useRoute();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const reportAttributes = useReportAttributes();
@@ -57,29 +56,29 @@ function LHNOptionsList({style, contentContainerStyles, data, onSelectRow, optio
      * Function which renders a row in the list
      */
     const renderItem = useCallback(
-        ({item, index}: RenderItemProps): ReactElement | null => {
-            if (!item) {
+        ({item: reportID, index}: RenderItemProps): ReactElement | null => {
+            if (!reportID) {
                 return null;
             }
-            const reportID = item.reportID;
+            const fullReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`];
             const itemReportAttributes = reportAttributes?.[reportID];
-            const itemParentReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${item.parentReportID}`];
+            const itemParentReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${fullReport?.parentReportID}`];
             const itemOneTransactionThreadReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${itemReportAttributes?.oneTransactionThreadReportID}`];
 
             let invoiceReceiverPolicyID = '-1';
-            if (item.invoiceReceiver && 'policyID' in item.invoiceReceiver) {
-                invoiceReceiverPolicyID = item.invoiceReceiver.policyID;
+            if (fullReport?.invoiceReceiver && 'policyID' in fullReport.invoiceReceiver) {
+                invoiceReceiverPolicyID = fullReport.invoiceReceiver.policyID;
             }
             if (itemParentReport?.invoiceReceiver && 'policyID' in itemParentReport.invoiceReceiver) {
                 invoiceReceiverPolicyID = itemParentReport.invoiceReceiver.policyID;
             }
             const itemInvoiceReceiverPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${invoiceReceiverPolicyID}`];
-            const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${item.policyID}`];
+            const itemPolicy = policy?.[`${ONYXKEYS.COLLECTION.POLICY}${fullReport?.policyID}`];
 
             return (
                 <OptionRowLHNData
                     reportID={reportID}
-                    fullReport={item}
+                    fullReport={fullReport}
                     reportAttributes={itemReportAttributes}
                     reportAttributesDerived={reportAttributes}
                     oneTransactionThreadReport={itemOneTransactionThreadReport}

src/components/LHNOptionsList/LHNTooltipContextProvider.tsx

@@ -5,12 +5,11 @@ import useReportAttributes from '@hooks/useReportAttributes';
 import useRootNavigationState from '@hooks/useRootNavigationState';
 import NAVIGATORS from '@src/NAVIGATORS';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {Report} from '@src/types/onyx';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import {LHNTooltipContext} from './LHNTooltipContext';
 
 type LHNTooltipContextProviderProps = {
-    data: Report[];
+    data: string[];
     children: React.ReactNode;
 };
 
@@ -20,14 +19,13 @@ function LHNTooltipContextProvider({data, children}: LHNTooltipContextProviderPr
     const [isFullscreenVisible] = useOnyx(ONYXKEYS.FULLSCREEN_VISIBILITY);
     const reportAttributes = useReportAttributes();
 
-    const firstReport = data.find((report) => {
-        const attrs = reportAttributes?.[report.reportID];
+    const firstReportIDWithGBRorRBR = data.find((reportID) => {
+        const attrs = reportAttributes?.[reportID];
         if (!isEmptyObject(attrs?.reportErrors)) {
             return true;
         }
         return attrs?.requiresAttention;
     });
-    const firstReportIDWithGBRorRBR = firstReport?.reportID;
 
     const isScreenFocused = useIsFocused();
     const isReportsSplitNavigatorLast = useRootNavigationState((state) => state?.routes?.at(-1)?.name === NAVIGATORS.REPORTS_SPLIT_NAVIGATOR);

src/components/LHNOptionsList/types.ts

@@ -16,8 +16,8 @@ type CustomLHNOptionsListProps = {
     /** Extra styles for the section list container */
     contentContainerStyles?: StyleProp<ViewStyle>;
 
-    /** List of reports */
-    data: Report[];
+    /** List of report IDs to display, ordered for the LHN */
+    data: string[];
 
     /** Callback to fire when a row is selected */
     onSelectRow?: (optionItem: OptionData, popoverAnchor: RefObject<View | null>) => void;
@@ -97,6 +97,6 @@ type OptionRowLHNProps = {
     testID: number;
 };
 
-type RenderItemProps = {item: Report; index: number};
+type RenderItemProps = {item: string; index: number};
 
 export type {LHNOptionsListProps, OptionRowLHNDataProps, OptionRowLHNProps, RenderItemProps};

src/components/TestToolMenu.tsx

@@ -4,7 +4,6 @@ import useBiometricRegistrationStatus, {REGISTRATION_STATUS} from '@hooks/useBio
 import useIsAuthenticated from '@hooks/useIsAuthenticated';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
-import {useSidebarOrderedReportsActions} from '@hooks/useSidebarOrderedReports';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWaitForNavigation from '@hooks/useWaitForNavigation';
@@ -32,7 +31,6 @@ function TestToolMenu() {
     const [shouldShowBranchNameInTitle = false] = useOnyx(ONYXKEYS.SHOULD_SHOW_BRANCH_NAME_IN_TITLE);
     const styles = useThemeStyles();
     const {translate} = useLocalize();
-    const {clearLHNCache} = useSidebarOrderedReportsActions();
     const [isMFARevokeLoading, setIsMFARevokeLoading] = useState(false);
     const {localCredentialID, isCurrentDeviceRegistered, otherDeviceCount, registrationStatus} = useBiometricRegistrationStatus();
 
@@ -120,15 +118,6 @@ function TestToolMenu() {
                         />
                     </TestToolRow>
 
-                    {/* Clears the useSidebarOrderedReports cache to re-compute from latest onyx values */}
-                    <TestToolRow title={translate('initialSettingsPage.troubleshoot.leftHandNavCache')}>
-                        <Button
-                            small
-                            text={translate('initialSettingsPage.troubleshoot.clearleftHandNavCache')}
-                            onPress={clearLHNCache}
-                        />
-                    </TestToolRow>
-
                     {/* Allows testing the biometric multifactor authentication flow */}
                     <TestToolRow title={biometricsTitle}>
                         <View style={[styles.flexRow, styles.gap2]}>