Hide mobile Search nav button + status tabs on scrollDown, but reveal on scrollUp

src/components/Search/SearchContext.tsx

@@ -1,21 +1,40 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react';
+import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
+import {isTransactionListItemType} from '@libs/SearchUtils';
+import * as SearchUtils from '@libs/SearchUtils';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {SearchContext, SelectedTransactions} from './types';
 
 const defaultSearchContext = {
     currentSearchHash: -1,
     selectedTransactions: {},
+    selectedReports: [],
     setCurrentSearchHash: () => {},
     setSelectedTransactions: () => {},
     clearSelectedTransactions: () => {},
+    shouldShowStatusBarLoading: false,
+    setShouldShowStatusBarLoading: () => {},
 };
 
 const Context = React.createContext<SearchContext>(defaultSearchContext);
 
+function getReportsFromSelectedTransactions(data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[], selectedTransactions: SelectedTransactions) {
+    return (data ?? [])
+        .filter(
+            (item) =>
+                !isTransactionListItemType(item) &&
+                !SearchUtils.isReportActionListItemType(item) &&
+                item.reportID &&
+                item?.transactions?.every((transaction: {keyForList: string | number}) => selectedTransactions[transaction.keyForList]?.isSelected),
+        )
+        .map((item) => item.reportID);
+}
+
 function SearchContextProvider({children}: ChildrenProps) {
-    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions'>>({
+    const [searchContextData, setSearchContextData] = useState<Pick<SearchContext, 'currentSearchHash' | 'selectedTransactions' | 'selectedReports'>>({
         currentSearchHash: defaultSearchContext.currentSearchHash,
         selectedTransactions: defaultSearchContext.selectedTransactions,
+        selectedReports: defaultSearchContext.selectedReports,
     });
 
     const setCurrentSearchHash = useCallback((searchHash: number) => {
@@ -25,10 +44,14 @@ function SearchContextProvider({children}: ChildrenProps) {
         }));
     }, []);
 
-    const setSelectedTransactions = useCallback((selectedTransactions: SelectedTransactions) => {
+    const setSelectedTransactions = useCallback((selectedTransactions: SelectedTransactions, data: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[]) => {
+        // When selecting transaction we also have to manage reports to which these transactions belong to. We do this for sake of properly exporting to CSV.
+        const selectedReports = getReportsFromSelectedTransactions(data, selectedTransactions);
+
         setSearchContextData((prevState) => ({
             ...prevState,
             selectedTransactions,
+            selectedReports,
         }));
     }, []);
 
@@ -40,19 +63,24 @@ function SearchContextProvider({children}: ChildrenProps) {
             setSearchContextData((prevState) => ({
                 ...prevState,
                 selectedTransactions: {},
+                selectedReports: [],
             }));
         },
         [searchContextData.currentSearchHash],
     );
 
+    const [shouldShowStatusBarLoading, setShouldShowStatusBarLoading] = useState(false);
+
     const searchContext = useMemo<SearchContext>(
         () => ({
             ...searchContextData,
             setCurrentSearchHash,
             setSelectedTransactions,
             clearSelectedTransactions,
+            shouldShowStatusBarLoading,
+            setShouldShowStatusBarLoading,
         }),
-        [searchContextData, setCurrentSearchHash, setSelectedTransactions, clearSelectedTransactions],
+        [searchContextData, setCurrentSearchHash, setSelectedTransactions, clearSelectedTransactions, shouldShowStatusBarLoading],
     );
 
     return <Context.Provider value={searchContext}>{children}</Context.Provider>;

src/components/Search/SearchPageHeader.tsx

@@ -1,17 +1,18 @@
-import React, {useMemo} from 'react';
+import React, {useMemo, useState} from 'react';
 import type {StyleProp, TextStyle} from 'react-native';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
 import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types';
+import ConfirmModal from '@components/ConfirmModal';
+import DecisionModal from '@components/DecisionModal';
 import Header from '@components/Header';
 import type HeaderWithBackButtonProps from '@components/HeaderWithBackButton/types';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import * as Illustrations from '@components/Icon/Illustrations';
 import {usePersonalDetails} from '@components/OnyxProvider';
-import type {ReportActionListItemType, ReportListItemType, TransactionListItemType} from '@components/SelectionList/types';
 import Text from '@components/Text';
 import useActiveWorkspace from '@hooks/useActiveWorkspace';
 import useLocalize from '@hooks/useLocalize';
@@ -29,7 +30,7 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
-import type {SearchDataTypes, SearchReport} from '@src/types/onyx/SearchResults';
+import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type DeepValueOf from '@src/types/utils/DeepValueOf';
 import type IconAsset from '@src/types/utils/IconAsset';
 import {useSearchContext} from './SearchContext';
@@ -93,10 +94,6 @@ function HeaderWrapper({icon, title, subtitle, children, subtitleStyles = {}}: H
 type SearchPageHeaderProps = {
     queryJSON: SearchQueryJSON;
     hash: number;
-    onSelectDeleteOption?: (itemsToDelete: string[]) => void;
-    setOfflineModalOpen?: () => void;
-    setDownloadErrorModalOpen?: () => void;
-    data?: TransactionListItemType[] | ReportListItemType[] | ReportActionListItemType[];
 };
 
 type SearchHeaderOptionValue = DeepValueOf<typeof CONST.SEARCH.BULK_ACTION_TYPES> | undefined;
@@ -120,37 +117,26 @@ function getHeaderContent(type: SearchDataTypes): HeaderContent {
     }
 }
 
-function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModalOpen, setDownloadErrorModalOpen, data}: SearchPageHeaderProps) {
+function SearchPageHeader({queryJSON, hash}: SearchPageHeaderProps) {
     const {translate} = useLocalize();
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {activeWorkspaceID} = useActiveWorkspace();
-    const {shouldUseNarrowLayout} = useResponsiveLayout();
-    const {selectedTransactions} = useSearchContext();
+    const {shouldUseNarrowLayout, isSmallScreenWidth} = useResponsiveLayout();
+    const {selectedTransactions, clearSelectedTransactions, selectedReports} = useSearchContext();
     const [selectionMode] = useOnyx(ONYXKEYS.MOBILE_SELECTION_MODE);
     const personalDetails = usePersonalDetails();
     const [reports] = useOnyx(ONYXKEYS.COLLECTION.REPORT);
     const taxRates = getAllTaxRates();
     const [cardList = {}] = useOnyx(ONYXKEYS.CARD_LIST);
+    const [deleteExpensesConfirmModalVisible, setDeleteExpensesConfirmModalVisible] = useState(false);
+    const [offlineModalVisible, setOfflineModalVisible] = useState(false);
+    const [downloadErrorModalVisible, setDownloadErrorModalVisible] = useState(false);
 
     const selectedTransactionsKeys = Object.keys(selectedTransactions ?? {});
 
-    const selectedReports: Array<SearchReport['reportID']> = useMemo(
-        () =>
-            (data ?? [])
-                .filter(
-                    (item) =>
-                        !SearchUtils.isTransactionListItemType(item) &&
-                        !SearchUtils.isReportActionListItemType(item) &&
-                        item.reportID &&
-                        item.transactions.every((transaction: {keyForList: string | number}) => selectedTransactions[transaction.keyForList]?.isSelected),
-                )
-                .map((item) => item.reportID),
-        [data, selectedTransactions],
-    );
     const {status, type} = queryJSON;
-
     const isCannedQuery = SearchUtils.isCannedSearchQuery(queryJSON);
 
     const headerSubtitle = isCannedQuery ? translate(getHeaderContent(type).titleText) : SearchUtils.getSearchHeaderTitle(queryJSON, personalDetails, cardList, reports, taxRates);
@@ -159,6 +145,16 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
 
     const subtitleStyles = isCannedQuery ? styles.textHeadlineH2 : {};
 
+    const handleDeleteExpenses = () => {
+        if (selectedTransactionsKeys.length === 0) {
+            return;
+        }
+
+        clearSelectedTransactions();
+        setDeleteExpensesConfirmModalVisible(false);
+        SearchActions.deleteMoneyRequestOnSearch(hash, selectedTransactionsKeys);
+    };
+
     const headerButtonsOptions = useMemo(() => {
         if (selectedTransactionsKeys.length === 0) {
             return [];
@@ -173,15 +169,15 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
             shouldCloseModalOnSelect: true,
             onSelected: () => {
                 if (isOffline) {
-                    setOfflineModalOpen?.();
+                    setOfflineModalVisible(true);
                     return;
                 }
 
                 const reportIDList = (selectedReports?.filter((report) => !!report) as string[]) ?? [];
                 SearchActions.exportSearchItemsToCSV(
                     {query: status, jsonQuery: JSON.stringify(queryJSON), reportIDList, transactionIDList: selectedTransactionsKeys, policyIDs: [activeWorkspaceID ?? '']},
                     () => {
-                        setDownloadErrorModalOpen?.();
+                        setDownloadErrorModalVisible(true);
                     },
                 );
             },
@@ -197,7 +193,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 shouldCloseModalOnSelect: true,
                 onSelected: () => {
                     if (isOffline) {
-                        setOfflineModalOpen?.();
+                        setOfflineModalVisible(true);
                         return;
                     }
 
@@ -216,7 +212,7 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 shouldCloseModalOnSelect: true,
                 onSelected: () => {
                     if (isOffline) {
-                        setOfflineModalOpen?.();
+                        setOfflineModalVisible(true);
                         return;
                     }
 
@@ -235,11 +231,11 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
                 shouldCloseModalOnSelect: true,
                 onSelected: () => {
                     if (isOffline) {
-                        setOfflineModalOpen?.();
+                        setOfflineModalVisible(true);
                         return;
                     }
 
-                    onSelectDeleteOption?.(selectedTransactionsKeys);
+                    setDeleteExpensesConfirmModalVisible(true);
                 },
             });
         }
@@ -269,14 +265,11 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
         selectedTransactionsKeys,
         selectedTransactions,
         translate,
-        onSelectDeleteOption,
         hash,
         theme.icon,
         styles.colorMuted,
         styles.fontWeightNormal,
         isOffline,
-        setOfflineModalOpen,
-        setDownloadErrorModalOpen,
         activeWorkspaceID,
         selectedReports,
         styles.textWrap,
@@ -301,31 +294,63 @@ function SearchPageHeader({queryJSON, hash, onSelectDeleteOption, setOfflineModa
     };
 
     return (
-        <HeaderWrapper
-            title={headerTitle}
-            subtitle={headerSubtitle}
-            icon={headerIcon}
-            subtitleStyles={subtitleStyles}
-        >
-            {headerButtonsOptions.length > 0 ? (
-                <ButtonWithDropdownMenu
-                    onPress={() => null}
-                    shouldAlwaysShowDropdownMenu
-                    pressOnEnter
-                    buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
-                    customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})}
-                    options={headerButtonsOptions}
-                    isSplitButton={false}
-                    shouldUseStyleUtilityForAnchorPosition
-                />
-            ) : (
-                <Button
-                    text={translate('search.filtersHeader')}
-                    icon={Expensicons.Filters}
-                    onPress={onPress}
-                />
-            )}
-        </HeaderWrapper>
+        <>
+            <HeaderWrapper
+                title={headerTitle}
+                subtitle={headerSubtitle}
+                icon={headerIcon}
+                subtitleStyles={subtitleStyles}
+            >
+                {headerButtonsOptions.length > 0 ? (
+                    <ButtonWithDropdownMenu
+                        onPress={() => null}
+                        shouldAlwaysShowDropdownMenu
+                        pressOnEnter
+                        buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
+                        customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})}
+                        options={headerButtonsOptions}
+                        isSplitButton={false}
+                        shouldUseStyleUtilityForAnchorPosition
+                    />
+                ) : (
+                    <Button
+                        text={translate('search.filtersHeader')}
+                        icon={Expensicons.Filters}
+                        onPress={onPress}
+                    />
+                )}
+            </HeaderWrapper>
+            <ConfirmModal
+                isVisible={deleteExpensesConfirmModalVisible}
+                onConfirm={handleDeleteExpenses}
+                onCancel={() => {
+                    setDeleteExpensesConfirmModalVisible(false);
+                }}
+                title={translate('iou.deleteExpense', {count: selectedTransactionsKeys.length})}
+                prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsKeys.length})}
+                confirmText={translate('common.delete')}
+                cancelText={translate('common.cancel')}
+                danger
+            />
+            <DecisionModal
+                title={translate('common.youAppearToBeOffline')}
+                prompt={translate('common.offlinePrompt')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setOfflineModalVisible(false)}
+                secondOptionText={translate('common.buttonConfirm')}
+                isVisible={offlineModalVisible}
+                onClose={() => setOfflineModalVisible(false)}
+            />
+            <DecisionModal
+                title={translate('common.downloadFailedTitle')}
+                prompt={translate('common.downloadFailedDescription')}
+                isSmallScreenWidth={isSmallScreenWidth}
+                onSecondOptionSubmit={() => setDownloadErrorModalVisible(false)}
+                secondOptionText={translate('common.buttonConfirm')}
+                isVisible={downloadErrorModalVisible}
+                onClose={() => setDownloadErrorModalVisible(false)}
+            />
+        </>
     );
 }
 

src/components/Search/SearchStatusBar.tsx

@@ -4,6 +4,7 @@ import type {ScrollView as RNScrollView} from 'react-native';
 import Button from '@components/Button';
 import * as Expensicons from '@components/Icon/Expensicons';
 import ScrollView from '@components/ScrollView';
+import SearchStatusSkeleton from '@components/Skeletons/SearchStatusSkeleton';
 import useLocalize from '@hooks/useLocalize';
 import useSingleExecution from '@hooks/useSingleExecution';
 import useStyleUtils from '@hooks/useStyleUtils';
@@ -15,12 +16,13 @@ import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import type {SearchDataTypes} from '@src/types/onyx/SearchResults';
 import type IconAsset from '@src/types/utils/IconAsset';
+import {useSearchContext} from './SearchContext';
 import type {ChatSearchStatus, ExpenseSearchStatus, InvoiceSearchStatus, SearchQueryString, SearchStatus, TripSearchStatus} from './types';
 
 type SearchStatusBarProps = {
     type: SearchDataTypes;
     status: SearchStatus;
-    resetOffset: () => void;
+    onStatusChange?: () => void;
 };
 
 const expenseOptions: Array<{key: ExpenseSearchStatus; icon: IconAsset; text: TranslationPaths; query: SearchQueryString}> = [
@@ -145,7 +147,7 @@ function getOptions(type: SearchDataTypes) {
     }
 }
 
-function SearchStatusBar({type, status, resetOffset}: SearchStatusBarProps) {
+function SearchStatusBar({type, status, onStatusChange}: SearchStatusBarProps) {
     const {singleExecution} = useSingleExecution();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
@@ -154,17 +156,22 @@ function SearchStatusBar({type, status, resetOffset}: SearchStatusBarProps) {
     const options = getOptions(type);
     const scrollRef = useRef<RNScrollView>(null);
     const isScrolledRef = useRef(false);
+    const {shouldShowStatusBarLoading} = useSearchContext();
+
+    if (shouldShowStatusBarLoading) {
+        return <SearchStatusSkeleton shouldAnimate />;
+    }
 
     return (
         <ScrollView
+            style={[styles.flexRow, styles.mb2, styles.overflowScroll, styles.flexGrow0]}
             ref={scrollRef}
-            style={[styles.flexRow, styles.mb5, styles.overflowScroll, styles.flexGrow0]}
             horizontal
             showsHorizontalScrollIndicator={false}
         >
             {options.map((item, index) => {
                 const onPress = singleExecution(() => {
-                    resetOffset();
+                    onStatusChange?.();
                     Navigation.setParams({q: item.query});
                 });
                 const isActive = status === item.key;