Skip to content

[Better Expense Report View] Generalise SearchContext + #61777 follow-up #62472

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.

Sign up for GitHub

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
mountiny merged 24 commits into from
Jun 4, 2025
Merged

[Better Expense Report View] Generalise SearchContext + #61777 follow-up #62472

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
b3befd8
61777 follow-up
JakubKorytko May 22, 2025
903702b
WIP prepare files for context merge
JakubKorytko May 22, 2025
71b3942
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 23, 2025
669e6ee
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 26, 2025
3fd4cb6
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 27, 2025
9f9e471
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 27, 2025
70f6a85
'Stupid' merge of contexts
JakubKorytko May 27, 2025
a067d7b
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 27, 2025
4e15efa
Fix ESLint checks
JakubKorytko May 28, 2025
e4019a8
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 28, 2025
466408b
Fix circular import
JakubKorytko May 28, 2025
04ed3b2
Clean-up after merge & add optimization tweaks
JakubKorytko May 29, 2025
14e788d
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 29, 2025
1469cb1
Clean up code a little more
JakubKorytko May 29, 2025
24b9001
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko May 30, 2025
b131510
Make clearSelectedTransactions work for IDs
JakubKorytko May 30, 2025
0395d5a
Add docs & clean up code a little more
JakubKorytko May 30, 2025
de6ed48
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko Jun 2, 2025
dbfd9bf
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko Jun 3, 2025
590227f
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko Jun 3, 2025
93d543f
Address Dylan's comments
JakubKorytko Jun 3, 2025
9d21262
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko Jun 4, 2025
e1a2296
Add default values for Transaction's in SearchContext
JakubKorytko Jun 4, 2025
7e83182
Merge branch 'main' into korytko/generalise-search-context
JakubKorytko Jun 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 2 additions & 11 deletions .storybook/preview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import React from 'react';
import Onyx from 'react-native-onyx';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import type {Parameters} from 'storybook/internal/types';
import {MoneyRequestReportContextProvider} from '@components/MoneyRequestReportView/MoneyRequestReportContext';
import {SearchContextProvider} from '@components/Search/SearchContext';
import ComposeProviders from '@src/components/ComposeProviders';
import HTMLEngineProvider from '@src/components/HTMLEngineProvider';
import {LocaleContextProvider} from '@src/components/LocaleContextProvider';
Expand All @@ -23,16 +23,7 @@ Onyx.init({
const decorators = [
(Story: React.ElementType) => (
<ComposeProviders
components={[
OnyxProvider,
LocaleContextProvider,
HTMLEngineProvider,
SafeAreaProvider,
PortalProvider,
EnvironmentProvider,
KeyboardStateProvider,
MoneyRequestReportContextProvider,
]}
components={[OnyxProvider, LocaleContextProvider, HTMLEngineProvider, SafeAreaProvider, PortalProvider, EnvironmentProvider, KeyboardStateProvider, SearchContextProvider]}
>
<Story />
</ComposeProviders>
Expand Down
18 changes: 9 additions & 9 deletions src/components/MoneyReportHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,10 +111,10 @@ import MoneyReportHeaderStatusBar from './MoneyReportHeaderStatusBar';
import MoneyReportHeaderStatusBarSkeleton from './MoneyReportHeaderStatusBarSkeleton';
import type {MoneyRequestHeaderStatusBarProps} from './MoneyRequestHeaderStatusBar';
import MoneyRequestHeaderStatusBar from './MoneyRequestHeaderStatusBar';
import {useMoneyRequestReportContext} from './MoneyRequestReportView/MoneyRequestReportContext';
import type {PopoverMenuItem} from './PopoverMenu';
import type {ActionHandledType} from './ProcessMoneyReportHoldMenu';
import ProcessMoneyReportHoldMenu from './ProcessMoneyReportHoldMenu';
import {useSearchContext} from './Search/SearchContext';
import AnimatedSettlementButton from './SettlementButton/AnimatedSettlementButton';
import Text from './Text';

Expand Down Expand Up @@ -264,7 +264,7 @@ function MoneyReportHeader({

const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);

const {selectedTransactionsID, setSelectedTransactionsID} = useMoneyRequestReportContext();
const {selectedTransactionIDs, clearSelectedTransactions} = useSearchContext();

const {
options: selectedTransactionsOptions,
Expand Down Expand Up @@ -881,8 +881,8 @@ function MoneyReportHeader({
if (!transactionThreadReportID) {
return;
}
setSelectedTransactionsID([]);
// We don't need to run the effect on change of setSelectedTransactionsID since it can cause the infinite loop.
clearSelectedTransactions(true);
// We don't need to run the effect on change of clearSelectedTransactions since it can cause the infinite loop.
// eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [transactionThreadReportID]);
Expand All @@ -909,7 +909,7 @@ function MoneyReportHeader({
<HeaderWithBackButton
title={translate('common.selectMultiple')}
onBackButtonPress={() => {
setSelectedTransactionsID([]);
clearSelectedTransactions(true);
turnOffMobileSelectionMode();
}}
/>
Expand Down Expand Up @@ -982,7 +982,7 @@ function MoneyReportHeader({
<ButtonWithDropdownMenu
onPress={() => null}
options={selectedTransactionsOptions}
customText={translate('workspace.common.selected', {count: selectedTransactionsID.length})}
customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
isSplitButton={false}
shouldAlwaysShowDropdownMenu
/>
Expand All @@ -1004,7 +1004,7 @@ function MoneyReportHeader({
<ButtonWithDropdownMenu
onPress={() => null}
options={selectedTransactionsOptions}
customText={translate('workspace.common.selected', {count: selectedTransactionsID.length})}
customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
isSplitButton={false}
shouldAlwaysShowDropdownMenu
wrapperStyle={styles.w100}
Expand Down Expand Up @@ -1100,11 +1100,11 @@ function MoneyReportHeader({
shouldEnableNewFocusManagement
/>
<ConfirmModal
title={translate('iou.deleteExpense', {count: selectedTransactionsID.length})}
title={translate('iou.deleteExpense', {count: selectedTransactionIDs.length})}
isVisible={hookDeleteModalVisible}
onConfirm={handleDeleteTransactions}
onCancel={hideDeleteModal}
prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsID.length})}
prompt={translate('iou.deleteConfirmation', {count: selectedTransactionIDs.length})}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
Expand Down
28 changes: 14 additions & 14 deletions src/components/MoneyRequestReportView/MoneyRequestReportActionsList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import DecisionModal from '@components/DecisionModal';
import FlatList from '@components/FlatList';
import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
import {PressableWithFeedback} from '@components/Pressable';
import {useSearchContext} from '@components/Search/SearchContext';
import Text from '@components/Text';
import useLoadReportActions from '@hooks/useLoadReportActions';
import useLocalize from '@hooks/useLocalize';
Expand Down Expand Up @@ -57,7 +58,6 @@ import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import type SCREENS from '@src/SCREENS';
import type * as OnyxTypes from '@src/types/onyx';
import {useMoneyRequestReportContext} from './MoneyRequestReportContext';
import MoneyRequestReportTransactionList from './MoneyRequestReportTransactionList';
import MoneyRequestViewReportFields from './MoneyRequestViewReportFields';
import ReportActionsListLoadingSkeleton from './ReportActionsListLoadingSkeleton';
Expand Down Expand Up @@ -148,7 +148,7 @@ function MoneyRequestReportActionsList({
const [session] = useOnyx(ONYXKEYS.SESSION, {canBeMissing: false});
const [isDownloadErrorModalVisible, setIsDownloadErrorModalVisible] = useState(false);

const {selectedTransactionsID, setSelectedTransactionsID} = useMoneyRequestReportContext();
const {selectedTransactionIDs, setSelectedTransactions, clearSelectedTransactions} = useSearchContext();

const {selectionMode} = useMobileSelectionMode();
const {
Expand Down Expand Up @@ -537,47 +537,47 @@ function MoneyRequestReportActionsList({
<ButtonWithDropdownMenu
onPress={() => null}
options={selectedTransactionsOptions}
customText={translate('workspace.common.selected', {count: selectedTransactionsID.length})}
customText={translate('workspace.common.selected', {count: selectedTransactionIDs.length})}
isSplitButton={false}
shouldAlwaysShowDropdownMenu
wrapperStyle={[styles.w100, styles.ph5]}
/>
<View style={[styles.alignItemsCenter, styles.userSelectNone, styles.flexRow, styles.pt6, styles.ph8]}>
<Checkbox
accessibilityLabel={translate('workspace.people.selectAll')}
isChecked={selectedTransactionsID.length === transactions.length}
isIndeterminate={selectedTransactionsID.length > 0 && selectedTransactionsID.length !== transactions.length}
isChecked={selectedTransactionIDs.length === transactions.length}
isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactions.length}
onPress={() => {
if (selectedTransactionsID.length !== 0) {
setSelectedTransactionsID([]);
if (selectedTransactionIDs.length !== 0) {
clearSelectedTransactions(true);
} else {
setSelectedTransactionsID(transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID));
setSelectedTransactions(transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID));
}
}}
/>
<PressableWithFeedback
style={[styles.userSelectNone, styles.alignItemsCenter]}
onPress={() => {
if (selectedTransactionsID.length === transactions.length) {
setSelectedTransactionsID([]);
if (selectedTransactionIDs.length === transactions.length) {
clearSelectedTransactions(true);
} else {
setSelectedTransactionsID(transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID));
setSelectedTransactions(transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID));
}
}}
accessibilityLabel={translate('workspace.people.selectAll')}
role="button"
accessibilityState={{checked: selectedTransactionsID.length === transactions.length}}
accessibilityState={{checked: selectedTransactionIDs.length === transactions.length}}
dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true}}
>
<Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>
</PressableWithFeedback>
</View>
<ConfirmModal
title={translate('iou.deleteExpense', {count: selectedTransactionsID.length})}
title={translate('iou.deleteExpense', {count: selectedTransactionIDs.length})}
isVisible={isDeleteModalVisible}
onConfirm={handleDeleteTransactions}
onCancel={hideDeleteModal}
prompt={translate('iou.deleteConfirmation', {count: selectedTransactionsID.length})}
prompt={translate('iou.deleteConfirmation', {count: selectedTransactionIDs.length})}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
Expand Down
69 changes: 0 additions & 69 deletions src/components/MoneyRequestReportView/MoneyRequestReportContext.tsx
View file
Open in desktop

This file was deleted.

36 changes: 27 additions & 9 deletions src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx
View file
Open in desktop

@MonilBhavsar MonilBhavsar Jun 5, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changes might have introduced #63505. Could you please check. Thanks!

Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
import MenuItem from '@components/MenuItem';
import Modal from '@components/Modal';
import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
import {useSearchContext} from '@components/Search/SearchContext';
import type {SortOrder} from '@components/Search/types';
import Text from '@components/Text';
import TransactionItemRow from '@components/TransactionItemRow';
Expand Down Expand Up @@ -40,7 +41,6 @@ import type {Route} from '@src/ROUTES';
import ROUTES from '@src/ROUTES';
import type SCREENS from '@src/SCREENS';
import type * as OnyxTypes from '@src/types/onyx';
import {useMoneyRequestReportContext} from './MoneyRequestReportContext';
import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader';
import SearchMoneyRequestReportEmptyState from './SearchMoneyRequestReportEmptyState';
import {setActiveTransactionThreadIDs} from './TransactionThreadReportIDRepository';
Expand Down Expand Up @@ -137,18 +137,36 @@ function MoneyRequestReportTransactionList({
const {bind} = useHover();
const {isMouseDownOnInput, setMouseUp} = useMouseContext();

const {selectedTransactionsID, setSelectedTransactionsID, toggleTransaction, isTransactionSelected} = useMoneyRequestReportContext();
const {selectedTransactionIDs, setSelectedTransactions, clearSelectedTransactions} = useSearchContext();
const {selectionMode} = useMobileSelectionMode();

const toggleTransaction = useCallback(
(transactionID: string) => {
let newSelectedTransactionIDs = selectedTransactionIDs;
if (selectedTransactionIDs.includes(transactionID)) {
newSelectedTransactionIDs = selectedTransactionIDs.filter((t) => t !== transactionID);
} else {
newSelectedTransactionIDs = [...selectedTransactionIDs, transactionID];
}
setSelectedTransactions(newSelectedTransactionIDs);
},
[setSelectedTransactions, selectedTransactionIDs],
);

const isTransactionSelected = useCallback((transactionID: string) => selectedTransactionIDs.includes(transactionID), [selectedTransactionIDs]);

useFocusEffect(
useCallback(() => {
return () => {
if (navigationRef?.getRootState()?.routes.at(-1)?.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR) {
return;
}
setSelectedTransactionsID([]);
clearSelectedTransactions(true);
};
}, [setSelectedTransactionsID]),
// We don't need to run the effect on change of clearSelectedTransactions on every focus.
// eslint-disable-next-line react-compiler/react-compiler
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []),
);

const handleMouseLeave = (e: React.MouseEvent<Element, MouseEvent>) => {
Expand Down Expand Up @@ -216,15 +234,15 @@ function MoneyRequestReportTransactionList({
<View style={[styles.dFlex, styles.flexRow, styles.pv2, styles.pr4, StyleUtils.getPaddingLeft(variables.w12)]}>
<Checkbox
onPress={() => {
if (selectedTransactionsID.length !== 0) {
setSelectedTransactionsID([]);
if (selectedTransactionIDs.length !== 0) {
clearSelectedTransactions(true);
} else {
setSelectedTransactionsID(transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID));
setSelectedTransactions(transactions.filter((t) => !isTransactionPendingDelete(t)).map((t) => t.transactionID));
}
}}
accessibilityLabel={CONST.ROLE.CHECKBOX}
isIndeterminate={selectedTransactionsID.length > 0 && selectedTransactionsID.length !== transactions.length}
isChecked={selectedTransactionsID.length === transactions.length}
isIndeterminate={selectedTransactionIDs.length > 0 && selectedTransactionIDs.length !== transactions.length}
isChecked={selectedTransactionIDs.length === transactions.length}
/>
{isMediumScreenWidth && <Text style={[styles.textStrong, styles.ph3]}>{translate('workspace.people.selectAll')}</Text>}
</View>
Expand Down
Loading