github-starred/actual-actualbudget-1
2
0
Fork 0
mirror of https://github.com/actualbudget/actual.git synced 2026-03-11 17:47:26 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix react-hooks/exhaustive-deps error on TransactionList.jsx (#4272)

Browse Source 
* Fix react-hooks/exhaustive-deps error on TransactionList.jsx

* Release notes

* Remove useLayoutEffect

* Add back the useLayoutEffect
This commit is contained in:
Joel Jeremy Marquez
2025-02-20 16:38:03 -08:00
committed by GitHub
parent 6e934e46a8
commit 5a79beadfa
3 changed files with 99 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
eslint.config.mjs
View File

@@ -790,7 +790,6 @@ export default [
'packages/desktop-client/src/components/sidebar/Tools.tsx',
'packages/desktop-client/src/components/sort.tsx',
'packages/desktop-client/src/components/spreadsheet/useSheetValue.ts',
'packages/desktop-client/src/components/transactions/TransactionList.jsx',
],
rules: {

149
packages/desktop-client/src/components/transactions/TransactionList.jsx
View File

@@ -100,59 +100,84 @@ export function TransactionList({
onMakeAsNonSplitTransactions,
}) {
const dispatch = useDispatch();
const transactionsLatest = useRef();
const navigate = useNavigate();
const [learnCategories = 'true'] = useSyncedPref('learn-categories');
const isLearnCategoriesEnabled = String(learnCategories) === 'true';
const transactionsLatest = useRef();
useLayoutEffect(() => {
transactionsLatest.current = transactions;
}, [transactions]);
const onAdd = useCallback(async newTransactions => {
newTransactions = realizeTempTransactions(newTransactions);
const onAdd = useCallback(
async newTransactions => {
newTransactions = realizeTempTransactions(newTransactions);
await saveDiff({ added: newTransactions }, isLearnCategoriesEnabled);
onRefetch();
}, []);
await saveDiff({ added: newTransactions }, isLearnCategoriesEnabled);
onRefetch();
},
[isLearnCategoriesEnabled, onRefetch],
);
const onSave = useCallback(async transaction => {
const changes = updateTransaction(transactionsLatest.current, transaction);
transactionsLatest.current = changes.data;
const onSave = useCallback(
async transaction => {
const changes = updateTransaction(
transactionsLatest.current,
transaction,
);
transactionsLatest.current = changes.data;
if (changes.diff.updated.length > 0) {
const dateChanged = !!changes.diff.updated[0].date;
if (dateChanged) {
// Make sure it stays at the top of the list of transactions
// for that date
changes.diff.updated[0].sort_order = Date.now();
await saveDiff(changes.diff, isLearnCategoriesEnabled);
onRefetch();
} else {
onChange(changes.newTransaction, changes.data);
saveDiffAndApply(
changes.diff,
changes,
onChange,
isLearnCategoriesEnabled,
);
if (changes.diff.updated.length > 0) {
const dateChanged = !!changes.diff.updated[0].date;
if (dateChanged) {
// Make sure it stays at the top of the list of transactions
// for that date
changes.diff.updated[0].sort_order = Date.now();
await saveDiff(changes.diff, isLearnCategoriesEnabled);
onRefetch();
} else {
onChange(changes.newTransaction, changes.data);
saveDiffAndApply(
changes.diff,
changes,
onChange,
isLearnCategoriesEnabled,
);
}
}
}
}, []);
},
[isLearnCategoriesEnabled, onChange, onRefetch],
);
const onAddSplit = useCallback(id => {
const changes = addSplitTransaction(transactionsLatest.current, id);
onChange(changes.newTransaction, changes.data);
saveDiffAndApply(changes.diff, changes, onChange, isLearnCategoriesEnabled);
return changes.diff.added[0].id;
}, []);
const onAddSplit = useCallback(
id => {
const changes = addSplitTransaction(transactionsLatest.current, id);
onChange(changes.newTransaction, changes.data);
saveDiffAndApply(
changes.diff,
changes,
onChange,
isLearnCategoriesEnabled,
);
return changes.diff.added[0].id;
},
[isLearnCategoriesEnabled, onChange],
);
const onSplit = useCallback(id => {
const changes = splitTransaction(transactionsLatest.current, id);
onChange(changes.newTransaction, changes.data);
saveDiffAndApply(changes.diff, changes, onChange, isLearnCategoriesEnabled);
return changes.diff.added[0].id;
}, []);
const onSplit = useCallback(
id => {
const changes = splitTransaction(transactionsLatest.current, id);
onChange(changes.newTransaction, changes.data);
saveDiffAndApply(
changes.diff,
changes,
onChange,
isLearnCategoriesEnabled,
);
return changes.diff.added[0].id;
},
[isLearnCategoriesEnabled, onChange],
);
const onApplyRules = useCallback(
async (transaction, updatedFieldName = null) => {
@@ -193,26 +218,38 @@ export function TransactionList({
[],
);
const onManagePayees = useCallback(id => {
navigate('/payees', { state: { selectedPayee: id } });
});
const onManagePayees = useCallback(
id => {
navigate('/payees', { state: { selectedPayee: id } });
},
[navigate],
);
const onNavigateToTransferAccount = useCallback(accountId => {
navigate(`/accounts/${accountId}`);
});
const onNavigateToTransferAccount = useCallback(
accountId => {
navigate(`/accounts/${accountId}`);
},
[navigate],
);
const onNavigateToSchedule = useCallback(scheduleId => {
dispatch(pushModal('schedule-edit', { id: scheduleId }));
});
const onNavigateToSchedule = useCallback(
scheduleId => {
dispatch(pushModal('schedule-edit', { id: scheduleId }));
},
[dispatch],
);
const onNotesTagClick = useCallback(tag => {
onApplyFilter({
field: 'notes',
op: 'hasTags',
value: tag,
type: 'string',
});
});
const onNotesTagClick = useCallback(
tag => {
onApplyFilter({
field: 'notes',
op: 'hasTags',
value: tag,
type: 'string',
});
},
[onApplyFilter],
);
return (
<TransactionTable

6
upcoming-release-notes/4272.md Normal file
View File

@@ -0,0 +1,6 @@
---
category: Maintenance
authors: [joel-jeremy]
---
Fix react-hooks/exhaustive-deps error on TransactionList.jsx