Remove `Onyx.connect()` for the key: `ONYXKEYS.COLLECTION.REPORT` in `OptionsListUtils.ts` #78645

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

tgolen merged 52 commits into Expensify:main from abzokhattab:Remove-onyx-connect-from-optionslistutils.ts

Feb 24, 2026

src/components/AvatarCropModal/AvatarCropModal.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -7,7 +7,6 @@ import ImageSize from 'react-native-image-size'; @@
     import {interpolate, useSharedValue} from 'react-native-reanimated';
     import {scheduleOnUI} from 'react-native-worklets';
     import ActivityIndicator from '@components/ActivityIndicator';
-    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import Button from '@components/Button';
     import HeaderWithBackButton from '@components/HeaderWithBackButton';
     import Icon from '@components/Icon';
@@ Expand All / @@ -24,6 +23,7 @@ import useTheme from '@hooks/useTheme'; @@
     import useThemeStyles from '@hooks/useThemeStyles';
     import cropOrRotateImage from '@libs/cropOrRotateImage';
     import type {CustomRNImageManipulatorResult} from '@libs/cropOrRotateImage/types';
+    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import CONST from '@src/CONST';
     import type IconAsset from '@src/types/utils/IconAsset';
     import ImageCropView from './ImageCropView';
@@ Expand Down @@

src/components/HeaderWithBackButton/index.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,7 +2,6 @@ import React, {useMemo} from 'react'; @@
     import {Keyboard, StyleSheet, View} from 'react-native';
     import type {SvgProps} from 'react-native-svg';
     import ActivityIndicator from '@components/ActivityIndicator';
-    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import Avatar from '@components/Avatar';
     import AvatarWithDisplayName from '@components/AvatarWithDisplayName';
     import Header from '@components/Header';
@@ Expand All / @@ -21,6 +20,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; @@
     import useThrottledButtonState from '@hooks/useThrottledButtonState';
     import getButtonState from '@libs/getButtonState';
     import Navigation from '@libs/Navigation/Navigation';
+    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import variables from '@styles/variables';
     import CONST from '@src/CONST';
     import ROUTES from '@src/ROUTES';
@@ Expand Down @@

src/components/LHNOptionsList/LHNOptionsList.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -9,7 +9,6 @@ @@
     import type {BlockingViewProps} from '@components/BlockingViews/BlockingView';
     import BlockingView from '@components/BlockingViews/BlockingView';
     import Icon from '@components/Icon';
-    import * as Expensicons from '@components/Icon/Expensicons';
     import {ScrollOffsetContext} from '@components/ScrollOffsetContextProvider';
     import TextBlock from '@components/TextBlock';
     import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
@@ Expand Down Expand Up / @@ -49,7 +48,7 @@ @@
         const flashListRef = useRef<FlashListRef<Report>>(null);
         const route = useRoute();
         const isScreenFocused = useIsFocused();
-        const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass']);
+        const expensifyIcons = useMemoizedLazyExpensifyIcons(['MagnifyingGlass', 'Plus']);
         const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
         const reportAttributes = useReportAttributes();
@@ Expand Down Expand Up / @@ -132,7 +131,7 @@ @@
                         text={translate('common.emptyLHN.subtitleText2')}
                     />
                     <Icon
-                        src={Expensicons.Plus}
+                        src={expensifyIcons.Plus}
                         width={variables.emptyLHNIconWidth}
                         height={variables.emptyLHNIconHeight}
                         fill={theme.icon}
@@ Expand All / @@ -158,6 +157,7 @@ @@
                 styles.textNormal,
                 translate,
                 expensifyIcons.MagnifyingGlass,
+                expensifyIcons.Plus,
             ],
         );
@@ Expand Down Expand Up / @@ -219,6 +219,7 @@ @@
                 }
                 const movedFromReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(lastReportAction, CONST.REPORT.MOVE_TYPE.FROM)}`];
                 const movedToReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(lastReportAction, CONST.REPORT.MOVE_TYPE.TO)}`];
+                const chatReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${item?.chatReportID}`];
                 const itemReportMetadata = reportMetadataCollection?.[`${ONYXKEYS.COLLECTION.REPORT_METADATA}${reportID}`];
                 const lastMessageTextFromReport = getLastMessageTextForReport({
                     translate,
@@ Expand All / @@ -230,6 +231,7 @@ @@
                     isReportArchived: !!itemReportNameValuePairs?.private_isArchived,
                     policyForMovingExpensesID,
                     reportMetadata: itemReportMetadata,
+                    chatReport,
                     reportAttributesDerived: reportAttributes,
                 });
@@ Expand Down Expand Up / @@ -283,7 +285,7 @@ @@
                     />
                 );
             },
             [
                 reports,
                 reportNameValuePairs,
                 reportActions,
@@ Expand Down @@

src/components/LHNOptionsList/OptionRowLHNData.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ function OptionRowLHNData({ @@
         const [movedFromReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(lastAction, CONST.REPORT.MOVE_TYPE.FROM)}`);
         const [movedToReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getMovedReportID(lastAction, CONST.REPORT.MOVE_TYPE.TO)}`);
+        const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${fullReport?.chatReportID}`);
         const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
         // Check the report errors equality to avoid re-rendering when there are no changes
         const prevReportErrors = usePrevious(reportAttributes?.reportErrors);
@@ Expand Down Expand Up / @@ -81,6 +82,7 @@ function OptionRowLHNData({ @@
                 movedFromReport,
                 movedToReport,
                 currentUserAccountID,
+                chatReport,
                 reportAttributesDerived,
             });
             if (deepEqual(item, optionItemRef.current)) {
@@ Expand Down Expand Up / @@ -119,6 +121,7 @@ function OptionRowLHNData({ @@
             movedFromReport,
             movedToReport,
             currentUserAccountID,
+            chatReport,
             reportAttributesDerived,
         ]);
@@ Expand Down @@

src/components/Lightbox/index.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
     import {PixelRatio, StyleSheet, View} from 'react-native';
     import {useSharedValue} from 'react-native-reanimated';
     import ActivityIndicator from '@components/ActivityIndicator';
-    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import AttachmentOfflineIndicator from '@components/AttachmentOfflineIndicator';
     import {useAttachmentCarouselPagerActions, useAttachmentCarouselPagerState} from '@components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';
     import type {Attachment} from '@components/Attachments/types';
@@ Expand All / @@ -17,6 +16,7 @@ import usePrevious from '@hooks/usePrevious'; @@
     import useStyleUtils from '@hooks/useStyleUtils';
     import useThemeStyles from '@hooks/useThemeStyles';
     import {isLocalFile} from '@libs/fileDownload/FileUtils';
+    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import CONST from '@src/CONST';
     import type {Dimensions} from '@src/types/utils/Layout';
     import NUMBER_OF_CONCURRENT_LIGHTBOXES from './numberOfConcurrentLightboxes';
@@ Expand Down @@

src/components/OptionListContextProvider.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
                     const report = changedReportsEntries[reportKey];
                     const reportID = reportKey.replace(ONYXKEYS.COLLECTION.REPORT, '');
                     const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportID}`];
-                    const {reportOption} = processReport(report, personalDetails, privateIsArchived, currentUserAccountID, reportAttributes?.reports);
+                    const chatReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${report?.chatReportID}`];
+                    const {reportOption} = processReport(report, personalDetails, privateIsArchived, currentUserAccountID, chatReport, reportAttributes?.reports);
                     if (reportOption) {
                         updatedReportsMap.set(reportID, reportOption);
@@ Expand All @@
                     reports: Array.from(updatedReportsMap.values()),
                 };
             });
-        }, [changedReportsEntries, personalDetails, currentUserAccountID, reportAttributes?.reports, privateIsArchivedMap]);
+        }, [changedReportsEntries, personalDetails, currentUserAccountID, reports, reportAttributes?.reports, privateIsArchivedMap]);
         useEffect(() => {
             if (!changedReportActions || !areOptionsInitialized.current) {
@@ Expand All @@
                     }
                     const reportID = key.replace(ONYXKEYS.COLLECTION.REPORT_ACTIONS, '');
+                    const reportItem = updatedReportsMap.get(reportID)?.item;
                     const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${reportID}`];
-                    const {reportOption} = processReport(updatedReportsMap.get(reportID)?.item, personalDetails, privateIsArchived, currentUserAccountID, reportAttributes?.reports);
+                    const chatReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportItem?.chatReportID}`];
+                    const {reportOption} = processReport(reportItem, personalDetails, privateIsArchived, currentUserAccountID, chatReport, reportAttributes?.reports);
                     if (reportOption) {
                         updatedReportsMap.set(reportID, reportOption);
@@ Expand All @@
                     reports: Array.from(updatedReportsMap.values()),
                 };
             });
-        }, [changedReportActions, personalDetails, currentUserAccountID, reportAttributes?.reports, privateIsArchivedMap]);
+        }, [changedReportActions, personalDetails, currentUserAccountID, reports, reportAttributes?.reports, privateIsArchivedMap]);
         /**
          * This effect is used to update the options list when personal details change.
@@ Expand Down Expand Up @@
                     }
                     const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${report.reportID}`];
-                    const newReportOption = createOptionFromReport(report, personalDetails, currentUserAccountID, privateIsArchived, reportAttributes?.reports, {showPersonalDetails: true});
+                    const chatReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`];
+                    const newReportOption = createOptionFromReport(report, personalDetails, currentUserAccountID, chatReport, privateIsArchived, reportAttributes?.reports, {
+                        showPersonalDetails: true,
+                    });
                     const replaceIndex = options.reports.findIndex((option) => option.reportID === report.reportID);
                     newReportOptions.push({
                         newReportOption,
@@ Expand Down @@

src/components/PDFThumbnail/index.native.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,9 +2,9 @@ import React, {useState} from 'react'; @@
     import {View} from 'react-native';
     import Pdf from 'react-native-pdf';
     import LoadingIndicator from '@components/LoadingIndicator';
-    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import useThemeStyles from '@hooks/useThemeStyles';
     import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
+    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import PDFThumbnailError from './PDFThumbnailError';
     import type PDFThumbnailProps from './types';
@@ Expand Down @@

src/components/Search/SearchFiltersChatsSelector.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -67,8 +67,10 @@ function SearchFiltersChatsSelector({initialReportIDs, onFiltersUpdate, isScreen
  
        const selectedOptions: OptionData[] = selectedReportIDs.map((id) => {

            const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${id}`];

            const reportData = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`];

            const chatReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportData?.chatReportID}`];

            const report = getSelectedOptionData(

                createOptionFromReport({...reports?.[`${ONYXKEYS.COLLECTION.REPORT}${id}`], reportID: id}, personalDetails, currentUserAccountID, privateIsArchived, reportAttributesDerived),

                createOptionFromReport({...reportData, reportID: id}, personalDetails, currentUserAccountID, chatReport, privateIsArchived, reportAttributesDerived),

            );

            const isReportArchived = !!privateIsArchived;

            const alternateText = getAlternateText(report, {}, isReportArchived, currentUserAccountID, {}, reportAttributesDerived);

src/components/Search/SearchRouter/SearchRouter.tsx

-Original file line number
+Diff line change
@@ Expand Up @@
                     }
                     const privateIsArchived = privateIsArchivedMap[`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${contextualReportID}`];
-                    const option = createOptionFromReport(report, personalDetails, currentUserAccountID, privateIsArchived, undefined, {showPersonalDetails: true});
+                    const chatReport = reports?.[`${ONYXKEYS.COLLECTION.REPORT}${report.chatReportID}`];
+                    const option = createOptionFromReport(report, personalDetails, currentUserAccountID, chatReport, privateIsArchived, undefined, {showPersonalDetails: true});
                     reportForContextualSearch = option;
                 }
@@ Expand Down @@

src/components/TransactionItemRow/ReceiptPreview/index.tsx

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,14 +4,14 @@ import type {LayoutChangeEvent} from 'react-native'; @@
     import {StyleSheet, View} from 'react-native';
     import Animated, {FadeIn, FadeOut} from 'react-native-reanimated';
     import ActivityIndicator from '@components/ActivityIndicator';
-    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import DistanceEReceipt from '@components/DistanceEReceipt';
     import EReceiptWithSizeCalculation from '@components/EReceiptWithSizeCalculation';
     import type {ImageOnLoadEvent} from '@components/Image/types';
     import useDebouncedState from '@hooks/useDebouncedState';
     import useResponsiveLayoutOnWideRHP from '@hooks/useResponsiveLayoutOnWideRHP';
     import useThemeStyles from '@hooks/useThemeStyles';
     import useWindowDimensions from '@hooks/useWindowDimensions';
+    import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
     import {hasReceiptSource, isDistanceRequest, isManualDistanceRequest, isPerDiemRequest} from '@libs/TransactionUtils';
     import variables from '@styles/variables';
     import Image from '@src/components/Image';
@@ Expand Down @@

src/hooks/useUserToInviteReports.ts

-Original file line number
+Diff line change
@@ -0,0 +1,15 @@
+    import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
+    import type {SearchOptionData} from '@libs/OptionsListUtils/types';
+    import ONYXKEYS from '@src/ONYXKEYS';
+    import useOnyx from './useOnyx';
+    /**
+     * For policy expense chat invitees, resolves the expense report and its associated chat report.
+     */
+    export default function useUserToInviteReports(userToInvite: SearchOptionData | null | undefined) {
+        const userToInviteReportID = userToInvite?.isPolicyExpenseChat ? userToInvite.reportID : undefined;
+        const [userToInviteExpenseReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(userToInviteReportID)}`);
+        const [userToInviteChatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(userToInviteExpenseReport?.chatReportID)}`);
+        return {userToInviteExpenseReport, userToInviteChatReport};
+    }

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Remove `Onyx.connect()` for the key: `ONYXKEYS.COLLECTION.REPORT` in `OptionsListUtils.ts` #78645

Uh oh!

Diff view

Diff view

There are no files selected for viewing

GitHub Actions / ESLint check

GitHub Actions / Changed files ESLint check

Uh oh!

Uh oh!

Uh oh!

Remove Onyx.connect() for the key: ONYXKEYS.COLLECTION.REPORT in OptionsListUtils.ts #78645

Uh oh!

Remove Onyx.connect() for the key: ONYXKEYS.COLLECTION.REPORT in OptionsListUtils.ts #78645

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

GitHub Actions / ESLint check

GitHub Actions / Changed files ESLint check

Uh oh!

Uh oh!

Remove `Onyx.connect()` for the key: `ONYXKEYS.COLLECTION.REPORT` in `OptionsListUtils.ts` #78645

Remove `Onyx.connect()` for the key: `ONYXKEYS.COLLECTION.REPORT` in `OptionsListUtils.ts` #78645