Skip to content

Commit 37a7d0e

Browse files
joel-jeremygithub-actions[bot]coderabbitai[bot]Copilotautofix-ci[bot]
authored
Retrofit useTransactions to use react-query under the hood (#6757)
* Retrofit useTransactions to use react-query under the hood * Add release notes for PR #6757 * Update packages/desktop-client/src/transactions/queries.ts Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> * Disable when there is no query parameter * Fix typecheck errors * Remove space * Update tests * Coderabbit: Add pageSize to query key * Use isPending instead of isFetching * Unexport mockStore * Revert variables * Change category from Enhancements to Maintenance Refactor the useTransactions hook to improve data fetching with react-query. * Fix lint errors * Fix lint errors * Migrate setupTests.js to TypeScript with proper types (#6871) * Initial plan * Rename setupTests.js to setupTests.ts and add proper types Co-authored-by: joel-jeremy <20313680+joel-jeremy@users.noreply.github.com> * Extract Size type to avoid duplication Co-authored-by: joel-jeremy <20313680+joel-jeremy@users.noreply.github.com> * Add release note for setupTests TypeScript migration Co-authored-by: joel-jeremy <20313680+joel-jeremy@users.noreply.github.com> * Rename release note file to match PR number 6871 Co-authored-by: joel-jeremy <20313680+joel-jeremy@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: joel-jeremy <20313680+joel-jeremy@users.noreply.github.com> * [autofix.ci] apply automated fixes * Update transactionQueries * Delete setupTests PR release note --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: joel-jeremy <20313680+joel-jeremy@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
1 parent e3e4b13 commit 37a7d0e

28 files changed

+241
-319
lines changed

‎packages/desktop-client/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@rollup/plugin-inject": "^5.0.5",
3434
"@swc/core": "^1.15.8",
3535
"@swc/helpers": "^0.5.18",
36-
"@tanstack/react-query": "^5.90.5",
36+
"@tanstack/react-query": "^5.90.19",
3737
"@testing-library/dom": "10.4.1",
3838
"@testing-library/jest-dom": "^6.9.1",
3939
"@testing-library/react": "16.3.0",

‎packages/desktop-client/src/components/accounts/Reconcile.test.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import type { AccountEntity } from 'loot-core/types/models';
1010
import { ReconcileMenu, ReconcilingMessage } from './Reconcile';
1111

1212
import { useSheetValue } from '@desktop-client/hooks/useSheetValue';
13-
import { TestProvider } from '@desktop-client/redux/mock';
13+
import { TestProviders } from '@desktop-client/mocks';
1414

1515
vi.mock('@desktop-client/hooks/useSheetValue', () => ({
1616
useSheetValue: vi.fn(),
@@ -40,14 +40,14 @@ describe('ReconcilingMessage math & UI', () => {
4040
const onCreateTransaction = vi.fn();
4141

4242
render(
43-
<TestProvider>
43+
<TestProviders>
4444
<ReconcilingMessage
4545
balanceQuery={makeBalanceQuery()}
4646
targetBalance={5000}
4747
onDone={onDone}
4848
onCreateTransaction={onCreateTransaction}
4949
/>
50-
</TestProvider>,
50+
</TestProviders>,
5151
);
5252

5353
expect(screen.getByText('All reconciled!')).toBeInTheDocument();
@@ -67,14 +67,14 @@ describe('ReconcilingMessage math & UI', () => {
6767
const onCreateTransaction = vi.fn();
6868

6969
render(
70-
<TestProvider>
70+
<TestProviders>
7171
<ReconcilingMessage
7272
balanceQuery={makeBalanceQuery()}
7373
targetBalance={10000}
7474
onDone={vi.fn()}
7575
onCreateTransaction={onCreateTransaction}
7676
/>
77-
</TestProvider>,
77+
</TestProviders>,
7878
);
7979

8080
// Formatted amounts present
@@ -95,14 +95,14 @@ describe('ReconcilingMessage math & UI', () => {
9595
const onCreateTransaction = vi.fn();
9696

9797
render(
98-
<TestProvider>
98+
<TestProviders>
9999
<ReconcilingMessage
100100
balanceQuery={makeBalanceQuery()}
101101
targetBalance={10000}
102102
onDone={vi.fn()}
103103
onCreateTransaction={onCreateTransaction}
104104
/>
105-
</TestProvider>,
105+
</TestProviders>,
106106
);
107107

108108
expect(screen.getByText('120.00')).toBeInTheDocument();
@@ -133,13 +133,13 @@ describe('ReconcileMenu arithmetic evaluation', () => {
133133
const onClose = vi.fn();
134134

135135
render(
136-
<TestProvider>
136+
<TestProviders>
137137
<ReconcileMenu
138138
account={baseAccount as AccountEntity}
139139
onReconcile={onReconcile}
140140
onClose={onClose}
141141
/>
142-
</TestProvider>,
142+
</TestProviders>,
143143
);
144144

145145
const input = screen.getByRole('textbox');
@@ -162,13 +162,13 @@ describe('ReconcileMenu arithmetic evaluation', () => {
162162
const onClose = vi.fn();
163163

164164
render(
165-
<TestProvider>
165+
<TestProviders>
166166
<ReconcileMenu
167167
account={baseAccount as AccountEntity}
168168
onReconcile={onReconcile}
169169
onClose={onClose}
170170
/>
171-
</TestProvider>,
171+
</TestProviders>,
172172
);
173173

174174
const input = screen.getByRole('textbox');
@@ -200,13 +200,13 @@ describe('ReconcileMenu arithmetic evaluation', () => {
200200
connectedAccount.balance_current = 4321;
201201

202202
render(
203-
<TestProvider>
203+
<TestProviders>
204204
<ReconcileMenu
205205
account={connectedAccount}
206206
onReconcile={onReconcile}
207207
onClose={onClose}
208208
/>
209-
</TestProvider>,
209+
</TestProviders>,
210210
);
211211

212212
// Fill from last synced value (43.21)
@@ -223,13 +223,13 @@ describe('ReconcileMenu arithmetic evaluation', () => {
223223
const onReconcile = vi.fn();
224224
const onClose = vi.fn();
225225
render(
226-
<TestProvider>
226+
<TestProviders>
227227
<ReconcileMenu
228228
account={baseAccount as AccountEntity}
229229
onReconcile={onReconcile}
230230
onClose={onClose}
231231
/>
232-
</TestProvider>,
232+
</TestProviders>,
233233
);
234234

235235
const input = screen.getByRole('textbox');
@@ -247,13 +247,13 @@ describe('ReconcileMenu arithmetic evaluation', () => {
247247
const onReconcile = vi.fn();
248248
const onClose = vi.fn();
249249
render(
250-
<TestProvider>
250+
<TestProviders>
251251
<ReconcileMenu
252252
account={baseAccount as AccountEntity}
253253
onReconcile={onReconcile}
254254
onClose={onClose}
255255
/>
256-
</TestProvider>,
256+
</TestProviders>,
257257
);
258258

259259
await userEvent.click(screen.getByRole('button', { name: 'Reconcile' }));

‎packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.test.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import type { PayeeAutocompleteProps } from './PayeeAutocomplete';
1111

1212
import { AuthProvider } from '@desktop-client/auth/AuthProvider';
1313
import { useCommonPayees } from '@desktop-client/hooks/usePayees';
14-
import { TestProvider } from '@desktop-client/redux/mock';
14+
import { TestProviders } from '@desktop-client/mocks';
1515

1616
const PAYEE_SELECTOR = '[data-testid][role=option]';
1717
const PAYEE_SECTION_SELECTOR = '[data-testid$="-item-group"]';
@@ -74,7 +74,7 @@ function renderPayeeAutocomplete(
7474
};
7575

7676
render(
77-
<TestProvider>
77+
<TestProviders>
7878
<AuthProvider>
7979
<div data-testid="autocomplete-test">
8080
<PayeeAutocomplete
@@ -86,7 +86,7 @@ function renderPayeeAutocomplete(
8686
/>
8787
</div>
8888
</AuthProvider>
89-
</TestProvider>,
89+
</TestProviders>,
9090
);
9191
return screen.getByTestId('autocomplete-test');
9292
}

‎packages/desktop-client/src/components/mobile/accounts/AccountTransactions.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@ function TransactionListWithPreviews({
8686
const {
8787
transactions,
8888
runningBalances,
89-
isLoading: isTransactionsLoading,
90-
reload: reloadTransactions,
91-
isLoadingMore,
92-
loadMore: loadMoreTransactions,
89+
isPending: isTransactionsLoading,
90+
refetch: reloadTransactions,
91+
isFetchingNextPage: isLoadingMoreTransactions,
92+
fetchNextPage: fetchMoreTransactions,
9393
} = useTransactions({
9494
query: transactionsQuery,
9595
options: {
@@ -223,8 +223,8 @@ function TransactionListWithPreviews({
223223
balanceUncleared={balanceBindings.uncleared}
224224
runningBalances={allBalances}
225225
showRunningBalances={shouldCalculateRunningBalances}
226-
isLoadingMore={isLoadingMore}
227-
onLoadMore={loadMoreTransactions}
226+
isLoadingMore={isLoadingMoreTransactions}
227+
onLoadMore={fetchMoreTransactions}
228228
searchPlaceholder={t('Search {{accountName}}', {
229229
accountName: account.name,
230230
})}

‎packages/desktop-client/src/components/mobile/accounts/AllAccountTransactions.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,10 @@ function TransactionListWithPreviews() {
4141
);
4242
const {
4343
transactions,
44-
isLoading: isTransactionsLoading,
45-
reload: reloadTransactions,
46-
isLoadingMore,
47-
loadMore: loadMoreTransactions,
44+
isPending: isTransactionsLoading,
45+
refetch: reloadTransactions,
46+
isFetchingNextPage: isLoadingMoreTransactions,
47+
fetchNextPage: fetchMoreTransactions,
4848
} = useTransactions({
4949
query: transactionsQuery,
5050
});
@@ -144,8 +144,8 @@ function TransactionListWithPreviews() {
144144
}
145145
transactions={transactionsToDisplay}
146146
balance={balanceBindings.balance}
147-
isLoadingMore={isLoadingMore}
148-
onLoadMore={loadMoreTransactions}
147+
isLoadingMore={isLoadingMoreTransactions}
148+
onLoadMore={fetchMoreTransactions}
149149
searchPlaceholder={t('Search All Accounts')}
150150
onSearch={onSearch}
151151
onOpenTransaction={onOpenTransaction}

‎packages/desktop-client/src/components/mobile/accounts/OffBudgetAccountTransactions.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ function TransactionListWithPreviews() {
4343
);
4444
const {
4545
transactions,
46-
isLoading: isTransactionsLoading,
47-
reload: reloadTransactions,
48-
isLoadingMore,
49-
loadMore: loadMoreTransactions,
46+
isPending: isTransactionsLoading,
47+
refetch: reloadTransactions,
48+
isFetchingNextPage: isLoadingMoreTransactions,
49+
fetchNextPage: fetchMoreTransactions,
5050
} = useTransactions({
5151
query: transactionsQuery,
5252
});
@@ -155,8 +155,8 @@ function TransactionListWithPreviews() {
155155
}
156156
transactions={transactionsToDisplay}
157157
balance={balanceBindings.balance}
158-
isLoadingMore={isLoadingMore}
159-
onLoadMore={loadMoreTransactions}
158+
isLoadingMore={isLoadingMoreTransactions}
159+
onLoadMore={fetchMoreTransactions}
160160
searchPlaceholder={t('Search Off Budget Accounts')}
161161
onSearch={onSearch}
162162
onOpenTransaction={onOpenTransaction}

‎packages/desktop-client/src/components/mobile/accounts/OnBudgetAccountTransactions.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@ function TransactionListWithPreviews() {
4343
);
4444
const {
4545
transactions,
46-
isLoading: isTransactionsLoading,
47-
reload: reloadTransactions,
48-
isLoadingMore,
49-
loadMore: loadMoreTransactions,
46+
isPending: isTransactionsLoading,
47+
refetch: reloadTransactions,
48+
isFetchingNextPage: isLoadingMoreTransactions,
49+
fetchNextPage: fetchMoreTransactions,
5050
} = useTransactions({
5151
query: transactionsQuery,
5252
});
@@ -155,8 +155,8 @@ function TransactionListWithPreviews() {
155155
}
156156
transactions={transactionsToDisplay}
157157
balance={balanceBindings.balance}
158-
isLoadingMore={isLoadingMore}
159-
onLoadMore={loadMoreTransactions}
158+
isLoadingMore={isLoadingMoreTransactions}
159+
onLoadMore={fetchMoreTransactions}
160160
searchPlaceholder={t('Search On Budget Accounts')}
161161
onSearch={onSearch}
162162
onOpenTransaction={onOpenTransaction}

‎packages/desktop-client/src/components/mobile/budget/BudgetPage.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -666,14 +666,14 @@ function UncategorizedTransactionsBanner(props) {
666666
[],
667667
);
668668

669-
const { transactions, isLoading } = useTransactions({
669+
const { transactions, isPending: isTransactionsLoading } = useTransactions({
670670
query: transactionsQuery,
671671
options: {
672-
pageCount: 1000,
672+
pageSize: 1000,
673673
},
674674
});
675675

676-
if (isLoading || transactions.length === 0) {
676+
if (isTransactionsLoading || transactions.length === 0) {
677677
return null;
678678
}
679679

‎packages/desktop-client/src/components/mobile/budget/CategoryTransactions.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@ function TransactionListWithPreviews({
5959
);
6060
const {
6161
transactions,
62-
isLoading: isTransactionsLoading,
63-
isLoadingMore,
64-
loadMore: loadMoreTransactions,
65-
reload: reloadTransactions,
62+
isPending: isTransactionsLoading,
63+
isFetchingNextPage: isLoadingMoreTransactions,
64+
fetchNextPage: fetchMoreTransactions,
65+
refetch: reloadTransactions,
6666
} = useTransactions({
6767
query: transactionsQuery,
6868
});
@@ -130,8 +130,8 @@ function TransactionListWithPreviews({
130130
balanceUncleared={balanceUncleared}
131131
searchPlaceholder={`Search ${category.name}`}
132132
onSearch={onSearch}
133-
isLoadingMore={isLoadingMore}
134-
onLoadMore={loadMoreTransactions}
133+
isLoadingMore={isLoadingMoreTransactions}
134+
onLoadMore={fetchMoreTransactions}
135135
onOpenTransaction={onOpenTransaction}
136136
/>
137137
);

‎packages/desktop-client/src/components/mobile/budget/UncategorizedTransactions.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,10 @@ export function UncategorizedTransactions() {
2727
);
2828
const {
2929
transactions,
30-
isLoading,
31-
isLoadingMore,
32-
loadMore: loadMoreTransactions,
33-
reload: reloadTransactions,
30+
isPending: isTransactionsLoading,
31+
isFetchingNextPage: isLoadingMoreTransactions,
32+
fetchNextPage: fetchMoreTransactions,
33+
refetch: reloadTransactions,
3434
} = useTransactions({
3535
query: transactionsQuery,
3636
});
@@ -73,13 +73,13 @@ export function UncategorizedTransactions() {
7373
return (
7474
<SchedulesProvider>
7575
<TransactionListWithBalances
76-
isLoading={isLoading}
76+
isLoading={isTransactionsLoading}
7777
transactions={transactions}
7878
balance={balance}
7979
searchPlaceholder="Search uncategorized transactions"
8080
onSearch={onSearch}
81-
isLoadingMore={isLoadingMore}
82-
onLoadMore={loadMoreTransactions}
81+
isLoadingMore={isLoadingMoreTransactions}
82+
onLoadMore={fetchMoreTransactions}
8383
onOpenTransaction={onOpenTransaction}
8484
/>
8585
</SchedulesProvider>

0 commit comments

Comments
 (0)