feat: control the multi-select switch

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 ? (
     <Tooltip
-      // compact
       interactionKind={PopoverInteractionKind.HOVER}
       position={Position.RIGHT}
       content={
@@ -44,24 +44,42 @@ function statusAccessor(transaction) {
   ) : null;
 }
 
-/**
+interface TransactionSelectCheckboxProps {
- * Retrieve account uncategorized transctions table columns.
+  transactionId: number;
- */
+}
-export function useAccountUncategorizedTransactionsColumns() {
+
+function TransactionSelectCheckbox({
+  transactionId,
+}: TransactionSelectCheckboxProps) {
   const addTransactionsToCategorizeSelected =
     useAddTransactionsToCategorizeSelected();
 
   const removeTransactionsToCategorizeSelected =
     useRemoveTransactionsToCategorizeSelected();
 
-  const handleChange = (value) => (event) => {
+  const isTransactionSelected =
-    if (event.currentTarget.checked) {
+    useIsTransactionToCategorizeSelected(transactionId);
-      addTransactionsToCategorizeSelected(value.id);
+
-    } else {
+  const handleChange = (event) => {
-      removeTransactionsToCategorizeSelected(value.id);
+    isTransactionSelected
-    }
+      ? removeTransactionsToCategorizeSelected(transactionId)
+      : addTransactionsToCategorizeSelected(transactionId);
   };
 
+  return (
+    <Checkbox
+      large
+      checked={isTransactionSelected}
+      onChange={handleChange}
+      className={styles.categorizeCheckbox}
+    />
+  );
+}
+
+/**
+ * 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) => (
-          <Checkbox
+          <TransactionSelectCheckbox transactionId={value.id} />
-            large
-            onChange={handleChange(value)}
-            className={styles.categorizeCheckbox}
-          />
         ),
         width: 20,
         minWidth: 20,
         maxWidth: 20,
         align: 'right',
-        className: 'categorize_include',
+        className: 'categorize_include selection-checkbox',
       },
     ],
     [],

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],
+  );
+};