diff --git a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx index 6bd645144..6b6f56339 100644 --- a/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx +++ b/packages/webapp/src/containers/CashFlow/AccountTransactions/UncategorizedTransactions/hooks.tsx @@ -11,6 +11,7 @@ import { } from '@blueprintjs/core'; import { useAddTransactionsToCategorizeSelected, + useIsTransactionToCategorizeSelected, useRemoveTransactionsToCategorizeSelected, } from '@/hooks/state/banking'; import { Box, Icon } from '@/components'; @@ -19,7 +20,6 @@ import styles from './AccountTransactionsUncategorizedTable.module.scss'; function statusAccessor(transaction) { return transaction.is_recognized ? ( (event) => { - if (event.currentTarget.checked) { - addTransactionsToCategorizeSelected(value.id); - } else { - removeTransactionsToCategorizeSelected(value.id); - } + const isTransactionSelected = + useIsTransactionToCategorizeSelected(transactionId); + + const handleChange = (event) => { + isTransactionSelected + ? removeTransactionsToCategorizeSelected(transactionId) + : addTransactionsToCategorizeSelected(transactionId); }; + return ( + + ); +} + +/** + * Retrieve account uncategorized transctions table columns. + */ +export function useAccountUncategorizedTransactionsColumns() { return React.useMemo( () => [ { @@ -125,17 +143,13 @@ export function useAccountUncategorizedTransactionsColumns() { id: 'categorize_include', Header: '', accessor: (value) => ( - + ), width: 20, minWidth: 20, maxWidth: 20, align: 'right', - className: 'categorize_include', + className: 'categorize_include selection-checkbox', }, ], [], diff --git a/packages/webapp/src/hooks/state/banking.ts b/packages/webapp/src/hooks/state/banking.ts index ab441c1f5..e78607a23 100644 --- a/packages/webapp/src/hooks/state/banking.ts +++ b/packages/webapp/src/hooks/state/banking.ts @@ -10,6 +10,7 @@ import { addTransactionsToCategorizeSelected, removeTransactionsToCategorizeSelected, getOpenMatchingTransactionAside, + getTransactionsToCategorizeIdsSelected, } from '@/store/banking/banking.reducer'; export const useSetBankingPlaidToken = () => { @@ -94,3 +95,18 @@ export const useGetOpenMatchingTransactionAside = () => { [openMatchingTransactionAside], ); }; + +/** + * Returns the detarmined value whether the given transaction id is checked. + * @param {number} transactionId + * @returns {boolean} + */ +export const useIsTransactionToCategorizeSelected = (transactionId: number) => { + const transactionsToCategorizeIdsSelected = useSelector( + getTransactionsToCategorizeIdsSelected, + ); + return useMemo( + () => transactionsToCategorizeIdsSelected.indexOf(transactionId) !== -1, + [transactionsToCategorizeIdsSelected, transactionId], + ); +};