feat: toggle banking matching aside

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsList.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React, { Suspense } from 'react';
+import * as R from 'ramda';
 import { Spinner } from '@blueprintjs/core';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
@@ -16,14 +17,18 @@ import { AccountTransactionsProgressBar } from './components';
 import { AccountTransactionsFilterTabs } from './AccountTransactionsFilterTabs';
 import { AppShell } from '@/components/AppShell/AppShell';
 import { CategorizeTransactionAside } from '../CategorizeTransactionAside/CategorizeTransactionAside';
+import { withBanking } from '../withBanking';
 
 /**
  * Account transactions list.
  */
-function AccountTransactionsList() {
+function AccountTransactionsListRoot({
+  // #withBanking
+  openMatchingTransactionAside,
+}) {
   return (
     <AccountTransactionsProvider>
-      <AppShell>
+      <AppShell hideAside={!openMatchingTransactionAside}>
         <AppShell.Main>
           <AccountTransactionsActionsBar />
           <AccountTransactionsDetailsBar />
@@ -46,7 +51,14 @@ function AccountTransactionsList() {
   );
 }
 
-export default AccountTransactionsList;
+export default R.compose(
+  withBanking(
+    ({ selectedUncategorizedTransactionId, openMatchingTransactionAside }) => ({
+      selectedUncategorizedTransactionId,
+      openMatchingTransactionAside,
+    }),
+  ),
+)(AccountTransactionsListRoot);
 
 const AccountsTransactionsAll = React.lazy(
   () => import('./AccountsTransactionsAll'),

packages/webapp/src/containers/CashFlow/AccountTransactions/AccountTransactionsUncategorizedTable.tsx

@@ -15,6 +15,7 @@ import { TABLES } from '@/constants/tables';
 
 import withSettings from '@/containers/Settings/withSettings';
 import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import { withBankingActions } from '../withBankingActions';
 
 import { useMemorizedColumnsWidths } from '@/hooks';
 import {
@@ -24,7 +25,6 @@ import {
 import { useAccountUncategorizedTransactionsContext } from './AllTransactionsUncategorizedBoot';
 
 import { compose } from '@/utils';
-import { DRAWERS } from '@/constants/drawers';
 import { useExcludeUncategorizedTransaction } from '@/hooks/query/bank-rules';
 import { Intent } from '@blueprintjs/core';
 
@@ -35,6 +35,9 @@ function AccountTransactionsDataTable({
   // #withSettings
   cashflowTansactionsTableSize,
 
+  // #withBankingActions
+  setUncategorizedTransactionIdForMatching,
+
   // #withDrawerActions
   openDrawer,
 }) {
@@ -53,10 +56,8 @@ function AccountTransactionsDataTable({
     useMemorizedColumnsWidths(TABLES.UNCATEGORIZED_CASHFLOW_TRANSACTION);
 
   // Handle cell click.
-  const handleCellClick = (cell, event) => {
-    openDrawer(DRAWERS.CATEGORIZE_TRANSACTION, {
-      uncategorizedTransactionId: cell.row.original.id,
-    });
+  const handleCellClick = (cell) => {
+    setUncategorizedTransactionIdForMatching(cell.row.original.id);
   };
   // Handle exclude transaction.
   const handleExcludeTransaction = (transaction) => {
@@ -111,6 +112,7 @@ export default compose(
     cashflowTansactionsTableSize: cashflowTransactionsSettings?.tableSize,
   })),
   withDrawerActions,
+  withBankingActions,
 )(AccountTransactionsDataTable);
 
 const DashboardConstrantTable = styled(DataTable)`

packages/webapp/src/containers/CashFlow/AccountTransactions/AllTransactionsUncategorized.tsx

@@ -1,10 +1,16 @@
 // @ts-nocheck
 import styled from 'styled-components';
+import * as R from 'ramda';
 
 import '@/style/pages/CashFlow/AccountTransactions/List.scss';
 
 import AccountTransactionsUncategorizedTable from './AccountTransactionsUncategorizedTable';
 import { AccountUncategorizedTransactionsBoot } from './AllTransactionsUncategorizedBoot';
+import {
+  WithBankingActionsProps,
+  withBankingActions,
+} from '../withBankingActions';
+import { useEffect } from 'react';
 
 const Box = styled.div`
   margin: 30px 15px;
@@ -18,7 +24,18 @@ const CashflowTransactionsTableCard = styled.div`
   flex: 0 1;
 `;
 
-export default function AllTransactionsUncategorized() {
+interface AllTransactionsUncategorizedProps extends WithBankingActionsProps {}
+
+function AllTransactionsUncategorizedRoot({
+  // #withBankingActions
+  closeMatchingTransactionAside,
+}: AllTransactionsUncategorizedProps) {
+  useEffect(
+    () => () => {
+      closeMatchingTransactionAside();
+    },
+    [closeMatchingTransactionAside],
+  );
   return (
     <AccountUncategorizedTransactionsBoot>
       <Box>
@@ -29,3 +46,5 @@ export default function AllTransactionsUncategorized() {
     </AccountUncategorizedTransactionsBoot>
   );
 }
+
+export default R.compose(withBankingActions)(AllTransactionsUncategorizedRoot);