feat: merge the boot provider of categorize and matching forms

packages/webapp/src/containers/CashFlow/CategorizeTransactionAside/CategorizeTransactionAside.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as R from 'ramda';
 import { Aside } from '@/components/Aside/Aside';
 import { CategorizeTransactionTabs } from './CategorizeTransactionTabs';
@@ -5,24 +6,40 @@ import {
   WithBankingActionsProps,
   withBankingActions,
 } from '../withBankingActions';
+import { CategorizeTransactionTabsBoot } from './CategorizeTransactionTabsBoot';
+import { withBanking } from '../withBanking';
 
 interface CategorizeTransactionAsideProps extends WithBankingActionsProps {}
 
 function CategorizeTransactionAsideRoot({
   // #withBankingActions
   closeMatchingTransactionAside,
+
+  // #withBanking
+  selectedUncategorizedTransactionId,
 }: CategorizeTransactionAsideProps) {
   const handleClose = () => {
     closeMatchingTransactionAside();
   };
+  const uncategorizedTransactionId = selectedUncategorizedTransactionId;
 
+  if (!selectedUncategorizedTransactionId) {
+    return null;
+  }
   return (
     <Aside title={'Categorize Bank Transaction'} onClose={handleClose}>
-      <CategorizeTransactionTabs />
+      <CategorizeTransactionTabsBoot
+        uncategorizedTransactionId={uncategorizedTransactionId}
+      >
+        <CategorizeTransactionTabs />
+      </CategorizeTransactionTabsBoot>
     </Aside>
   );
 }
 
-export const CategorizeTransactionAside = R.compose(withBankingActions)(
-  CategorizeTransactionAsideRoot,
-);
+export const CategorizeTransactionAside = R.compose(
+  withBankingActions,
+  withBanking(({ selectedUncategorizedTransactionId }) => ({
+    selectedUncategorizedTransactionId,
+  })),
+)(CategorizeTransactionAsideRoot);