diff --git a/src/components/Search/SearchAutocompleteList.tsx b/src/components/Search/SearchAutocompleteList.tsx index fe737e6dd91c..91694a6a8cee 100644 --- a/src/components/Search/SearchAutocompleteList.tsx +++ b/src/components/Search/SearchAutocompleteList.tsx @@ -1,9 +1,8 @@ import {Str} from 'expensify-common'; import type {ForwardedRef} from 'react'; import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'; -import type {OnyxCollection} from 'react-native-onyx'; +import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; import * as Expensicons from '@components/Icon/Expensicons'; -import {usePersonalDetails} from '@components/OnyxProvider'; import {useOptionsList} from '@components/OptionListContextProvider'; import type {AnimatedTextInputRef} from '@components/RNTextInput'; import SelectionList from '@components/SelectionList'; @@ -18,7 +17,7 @@ import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import {getCardFeedsForDisplay} from '@libs/CardFeedUtils'; -import {getCardDescription, isCard, isCardHiddenFromSearch, mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils'; +import {getCardDescription, isCard, isCardHiddenFromSearch} from '@libs/CardUtils'; import Log from '@libs/Log'; import memoize from '@libs/memoize'; import type {Options, SearchOption} from '@libs/OptionsListUtils'; @@ -40,7 +39,7 @@ import StringUtils from '@libs/StringUtils'; import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; -import type {Policy, Report} from '@src/types/onyx'; +import type {CardFeeds, CardList, PersonalDetailsList, Policy, Report} from '@src/types/onyx'; import type PersonalDetails from '@src/types/onyx/PersonalDetails'; import {getEmptyObject} from '@src/types/utils/EmptyObject'; import {getSubstitutionMapKey} from './SearchRouter/getQueryWithSubstitutions'; @@ -85,6 +84,18 @@ type SearchAutocompleteListProps = { /** Ref for textInput */ textInputRef?: React.RefObject; + + /** Personal details */ + personalDetails: OnyxEntry; + + /** Reports */ + reports: OnyxCollection; + + /** All feeds */ + allFeeds: Record | undefined; + + /** All cards */ + allCards: CardList; }; const defaultListOptions = { @@ -147,6 +158,10 @@ function SearchAutocompleteList( shouldSubscribeToArrowKeyEvents = true, onHighlightFirstItem, textInputRef, + personalDetails, + reports, + allFeeds, + allCards, }: SearchAutocompleteListProps, ref: ForwardedRef, ) { @@ -156,8 +171,6 @@ function SearchAutocompleteList( const [betas] = useOnyx(ONYXKEYS.BETAS, {canBeMissing: true}); const [recentSearches] = useOnyx(ONYXKEYS.RECENT_SEARCHES, {canBeMissing: true}); - const personalDetails = usePersonalDetails(); - const [reports = getEmptyObject>>()] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); const taxRates = getAllTaxRates(); const {options, areOptionsInitialized} = useOptionsList(); @@ -197,11 +210,7 @@ function SearchAutocompleteList( const expenseTypes = Object.values(CONST.SEARCH.TRANSACTION_TYPE); const booleanTypes = Object.values(CONST.SEARCH.BOOLEAN); - const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); - const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true}); - const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]); - const [allFeeds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER, {canBeMissing: true}); - const cardAutocompleteList = Object.values(allCards); + const cardAutocompleteList = useMemo(() => Object.values(allCards), [allCards]); const feedAutoCompleteList = useMemo(() => { // We don't want to show the "Expensify Card" feed in the autocomplete suggestion list // Thus passing an empty object to the `allCards` parameter. diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index 1dbb426b2dce..214b7d08b621 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -387,6 +387,10 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo setTextQuery={setTextAndUpdateSelection} updateAutocompleteSubstitutions={updateAutocompleteSubstitutions} ref={listRef} + personalDetails={personalDetails} + reports={reports} + allCards={allCards} + allFeeds={allFeeds} /> )} @@ -454,6 +458,10 @@ function SearchPageHeaderInput({queryJSON, searchRouterListVisible, hideSearchRo updateAutocompleteSubstitutions={updateAutocompleteSubstitutions} ref={listRef} shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible} + personalDetails={personalDetails} + reports={reports} + allCards={allCards} + allFeeds={allFeeds} /> diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx index ae855804beb9..aaa0d0787c84 100644 --- a/src/components/Search/SearchRouter/SearchRouter.tsx +++ b/src/components/Search/SearchRouter/SearchRouter.tsx @@ -1,11 +1,12 @@ import {findFocusedRoute, useNavigationState} from '@react-navigation/native'; import {deepEqual} from 'fast-equals'; -import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react'; +import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {TextInputProps} from 'react-native'; import {InteractionManager, Keyboard, View} from 'react-native'; import type {ValueOf} from 'type-fest'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; +import {usePersonalDetails} from '@components/OnyxProvider'; import type {AnimatedTextInputRef} from '@components/RNTextInput'; import type {GetAdditionalSectionsCallback} from '@components/Search/SearchAutocompleteList'; import SearchAutocompleteList from '@components/Search/SearchAutocompleteList'; @@ -20,6 +21,7 @@ import useLocalize from '@hooks/useLocalize'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import {mergeCardListWithWorkspaceFeeds} from '@libs/CardUtils'; import {scrollToRight} from '@libs/InputUtils'; import Log from '@libs/Log'; import backHistory from '@libs/Navigation/helpers/backHistory'; @@ -82,7 +84,12 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla const styles = useThemeStyles(); const [, recentSearchesMetadata] = useOnyx(ONYXKEYS.RECENT_SEARCHES, {canBeMissing: true}); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false, canBeMissing: true}); - + const personalDetails = usePersonalDetails(); + const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: true}); + const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true}); + const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); + const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]); + const [allFeeds] = useOnyx(ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER, {canBeMissing: true}); const {shouldUseNarrowLayout} = useResponsiveLayout(); const listRef = useRef(null); @@ -480,6 +487,10 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla onHighlightFirstItem={() => listRef.current?.updateAndScrollToFocusedIndex(1)} ref={listRef} textInputRef={textInputRef} + personalDetails={personalDetails} + reports={reports} + allFeeds={allFeeds} + allCards={allCards} /> )} diff --git a/src/components/SelectionList/ChatListItem.tsx b/src/components/SelectionList/ChatListItem.tsx index 8aab9575c783..f447dd222647 100644 --- a/src/components/SelectionList/ChatListItem.tsx +++ b/src/components/SelectionList/ChatListItem.tsx @@ -1,6 +1,5 @@ import React from 'react'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; -import useOnyx from '@hooks/useOnyx'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {isInvoiceRoom, isPolicyExpenseChat} from '@libs/ReportUtils'; @@ -27,9 +26,7 @@ function ChatListItem({ }: ChatListItemProps) { const reportActionItem = item as unknown as ReportActionListItemType; const reportID = Number(reportActionItem?.reportID ?? CONST.DEFAULT_NUMBER_ID); - const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, { - canBeMissing: true, - }); + const report = allReports?.[`${ONYXKEYS.COLLECTION.REPORT}${reportID}`]; const styles = useThemeStyles(); const theme = useTheme(); const animatedHighlightStyle = useAnimatedHighlightStyle({ diff --git a/src/components/SelectionList/Search/TransactionGroupListItem.tsx b/src/components/SelectionList/Search/TransactionGroupListItem.tsx index 4f2e896e4f19..a145fb614c92 100644 --- a/src/components/SelectionList/Search/TransactionGroupListItem.tsx +++ b/src/components/SelectionList/Search/TransactionGroupListItem.tsx @@ -1,6 +1,5 @@ import React, {useMemo} from 'react'; import {View} from 'react-native'; -import type {OnyxCollection} from 'react-native-onyx'; import type {ValueOf} from 'type-fest'; import type {SearchGroupBy} from '@components/Search/types'; import BaseListItem from '@components/SelectionList/BaseListItem'; @@ -17,7 +16,6 @@ import Text from '@components/Text'; import TransactionItemRow from '@components/TransactionItemRow'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; -import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -28,8 +26,6 @@ import {setActiveTransactionThreadIDs} from '@userActions/TransactionThreadNavig import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import type {Policy} from '@src/types/onyx'; -import {getEmptyObject} from '@src/types/utils/EmptyObject'; import CardListItemHeader from './CardListItemHeader'; import MemberListItemHeader from './MemberListItemHeader'; import ReportListItemHeader from './ReportListItemHeader'; @@ -46,12 +42,12 @@ function TransactionGroupListItem({ onLongPressRow, shouldSyncFocus, groupBy, + policies, }: TransactionGroupListItemProps) { const groupItem = item as unknown as TransactionGroupListItemType; const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const [policies = getEmptyObject>>()] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {allowStaleData: true, canBeMissing: true}); const policy = policies?.[`${ONYXKEYS.COLLECTION.POLICY}${groupItem?.policyID}`]; const isEmpty = groupItem.transactions.length === 0; const isDisabledOrEmpty = isEmpty || isDisabled; diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index c5bf7c2ef225..e50ee29327b4 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -463,6 +463,7 @@ type TaskListItemProps = ListItemProps & { type TransactionGroupListItemProps = ListItemProps & { groupBy?: SearchGroupBy; + policies?: OnyxCollection; }; type ChatListItemProps = ListItemProps & { @@ -473,6 +474,9 @@ type ChatListItemProps = ListItemProps & { /** All the data of the report collection */ allReports?: OnyxCollection; + + /** The report data */ + report?: Report; }; type ValidListItem =