diff --git a/src/components/AccountSwitcher.tsx b/src/components/AccountSwitcher.tsx index 07c446cb7de1..beb08841dd3c 100644 --- a/src/components/AccountSwitcher.tsx +++ b/src/components/AccountSwitcher.tsx @@ -45,7 +45,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { const {isOffline} = useNetwork(); const {shouldUseNarrowLayout} = useResponsiveLayout(); const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: true}); - const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false}); + const [accountID] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: (onyxSession) => onyxSession?.accountID}); const buttonRef = useRef(null); const {windowHeight} = useWindowDimensions(); @@ -230,7 +230,7 @@ function AccountSwitcher({isScreenFocused}: AccountSwitcherProps) { style={[styles.textLabelSupporting, styles.mt1, styles.w100]} numberOfLines={1} > - AccountID: {session?.accountID} + AccountID: {accountID} )} diff --git a/src/components/Search/FilterDropdowns/DropdownButton.tsx b/src/components/Search/FilterDropdowns/DropdownButton.tsx index 36f57edd94e9..aae4f7157b92 100644 --- a/src/components/Search/FilterDropdowns/DropdownButton.tsx +++ b/src/components/Search/FilterDropdowns/DropdownButton.tsx @@ -1,5 +1,5 @@ import type {ReactNode} from 'react'; -import React, {useMemo, useRef, useState} from 'react'; +import React, {useCallback, useMemo, useRef, useState} from 'react'; import type {View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; @@ -69,7 +69,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro * Toggle the overlay between open & closed, and re-calculate the * position of the trigger */ - const toggleOverlay = () => { + const toggleOverlay = useCallback(() => { setIsOverlayVisible((previousValue) => { if (!previousValue && willAlertModalBecomeVisible) { return false; @@ -77,7 +77,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro return !previousValue; }); - }; + }, [willAlertModalBecomeVisible]); /** * When no items are selected, render the label, otherwise, render the @@ -99,6 +99,15 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro return {width: CONST.POPOVER_DROPDOWN_WIDTH}; }, [isSmallScreenWidth, styles]); + const popoverContent = useMemo(() => { + if (!isOverlayVisible) { + return null; + } + return PopoverComponent({closeOverlay: toggleOverlay}); + // PopoverComponent is stable so we don't need it here as a dep. + // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps + }, [isOverlayVisible, toggleOverlay]); + return ( <> {/* Dropdown Trigger */} @@ -140,7 +149,7 @@ function DropdownButton({label, value, viewportOffsetTop, PopoverComponent}: Dro height: CONST.POPOVER_DROPDOWN_MIN_HEIGHT, }} > - {PopoverComponent({closeOverlay: toggleOverlay})} + {popoverContent} ); diff --git a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx index f04df0a874ad..c7cb26b4da51 100644 --- a/src/components/Search/FilterDropdowns/UserSelectPopup.tsx +++ b/src/components/Search/FilterDropdowns/UserSelectPopup.tsx @@ -41,13 +41,13 @@ function UserSelectPopup({value, closeOverlay, onChange}: UserSelectPopupProps) const personalDetails = usePersonalDetails(); const {windowHeight} = useWindowDimensions(); const {shouldUseNarrowLayout} = useResponsiveLayout(); - const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true}); + const [accountID] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true, selector: (onyxSession) => onyxSession?.accountID}); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); const [isSearchingForReports] = useOnyx(ONYXKEYS.IS_SEARCHING_FOR_REPORTS, {initWithStoredValues: false, canBeMissing: true}); const [selectedOptions, setSelectedOptions] = useState(() => { - return value.reduce((acc, accountID) => { - const participant = personalDetails?.[accountID]; + return value.reduce((acc, id) => { + const participant = personalDetails?.[id]; if (!participant) { return acc; } @@ -90,17 +90,17 @@ function UserSelectPopup({value, closeOverlay, onChange}: UserSelectPopupProps) })) .sort((a, b) => { // Put the current user at the top of the list - if (a.accountID === session?.accountID) { + if (a.accountID === accountID) { return -1; } - if (b.accountID === session?.accountID) { + if (b.accountID === accountID) { return 1; } return 0; }); return [...(personalDetailList ?? []), ...(recentReports ?? [])]; - }, [cleanSearchTerm, options.personalDetails, options.reports, selectedOptions, session?.accountID]); + }, [cleanSearchTerm, options.personalDetails, options.reports, selectedOptions, accountID]); const {sections, headerMessage} = useMemo(() => { const newSections: Section[] = [ diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx index b00b0c790dfb..20524d447969 100644 --- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx +++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx @@ -61,7 +61,7 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions}: SearchFiltersBarPro const {shouldUseNarrowLayout} = useResponsiveLayout(); const {selectedTransactions, setExportMode, isExportMode, shouldShowExportModeOption, shouldShowFiltersBarLoading} = useSearchContext(); - const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true}); + const [email] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: true, selector: (onyxSession) => onyxSession?.email}); const [userCardList] = useOnyx(ONYXKEYS.CARD_LIST, {canBeMissing: true}); const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT, {canBeMissing: false}); const [allPolicies] = useOnyx(ONYXKEYS.COLLECTION.POLICY, {canBeMissing: true}); @@ -70,14 +70,13 @@ function SearchFiltersBar({queryJSON, headerButtonsOptions}: SearchFiltersBarPro const [policyCategories] = useOnyx(ONYXKEYS.COLLECTION.POLICY_CATEGORIES, {canBeMissing: true}); const [workspaceCardFeeds] = useOnyx(ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST, {canBeMissing: true}); const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE, {canBeMissing: true}); - const [currentSearchResults] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {canBeMissing: true}); + const [searchResultsErrors] = useOnyx(`${ONYXKEYS.COLLECTION.SNAPSHOT}${hash}`, {canBeMissing: true, selector: (data) => data?.errors}); const taxRates = getAllTaxRates(); const allCards = useMemo(() => mergeCardListWithWorkspaceFeeds(workspaceCardFeeds ?? CONST.EMPTY_OBJECT, userCardList), [userCardList, workspaceCardFeeds]); const selectedTransactionsKeys = useMemo(() => Object.keys(selectedTransactions ?? {}), [selectedTransactions]); - const email = session?.email; - const hasErrors = Object.keys(currentSearchResults?.errors ?? {}).length > 0 && !isOffline; + const hasErrors = Object.keys(searchResultsErrors ?? {}).length > 0 && !isOffline; const shouldShowSelectedDropdown = headerButtonsOptions.length > 0 && (!shouldUseNarrowLayout || (!!selectionMode && selectionMode.isEnabled)); const [typeOptions, type] = useMemo(() => { diff --git a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx index cfd009a63f82..925c784b20e2 100644 --- a/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx +++ b/src/pages/home/sidebar/FloatingActionButtonAndPopover.tsx @@ -92,7 +92,7 @@ function FloatingActionButtonAndPopover({onHideCreateMenu, onShowCreateMenu, isT const {translate} = useLocalize(); const [isLoading = false] = useOnyx(ONYXKEYS.IS_LOADING_APP, {canBeMissing: true}); const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST, {canBeMissing: true}); - const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false}); + const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false, selector: (onyxSession) => ({email: onyxSession?.email, accountID: onyxSession?.accountID})}); const [quickAction] = useOnyx(ONYXKEYS.NVP_QUICK_ACTION_GLOBAL_CREATE, {canBeMissing: true}); const [quickActionReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${quickAction?.chatReportID}`, {canBeMissing: true}); const [reportNameValuePairs] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_NAME_VALUE_PAIRS}${quickActionReport?.reportID}`, {canBeMissing: true});