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);

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

@@ -5,7 +5,7 @@ import { CategorizeTransactionContent } from '../CategorizeTransaction/drawers/C
 
 export function CategorizeTransactionTabs() {
   return (
-    <Tabs large className={styles.tabs}>
+    <Tabs large renderActiveTabPanelOnly className={styles.tabs}>
       <Tab
         id="categorize"
         title="Categorize Transaction"

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

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React from 'react';
+import { Spinner } from '@blueprintjs/core';
+import { useUncategorizedTransaction } from '@/hooks/query';
+
+interface CategorizeTransactionTabsValue {
+  uncategorizedTransactionId: number;
+  isUncategorizedTransactionLoading: boolean;
+  uncategorizedTransaction: any;
+}
+
+interface CategorizeTransactionTabsBootProps {
+  uncategorizedTransactionId: number;
+  children: React.ReactNode;
+}
+
+const CategorizeTransactionTabsBootContext =
+  React.createContext<CategorizeTransactionTabsValue>(
+    {} as CategorizeTransactionTabsValue,
+  );
+
+/**
+ * Categorize transcation tabs boot.
+ */
+export function CategorizeTransactionTabsBoot({
+  uncategorizedTransactionId,
+  children,
+}: CategorizeTransactionTabsBootProps) {
+  const {
+    data: uncategorizedTransaction,
+    isLoading: isUncategorizedTransactionLoading,
+  } = useUncategorizedTransaction(uncategorizedTransactionId);
+
+  const provider = {
+    uncategorizedTransactionId,
+    uncategorizedTransaction,
+    isUncategorizedTransactionLoading,
+  };
+  const isLoading = isUncategorizedTransactionLoading;
+
+  // Use a key prop to force re-render of children when uncategorizedTransactionId changes
+  const childrenPerKey = React.useMemo(() => {
+    return React.Children.map(children, (child) =>
+      React.cloneElement(child, { key: uncategorizedTransactionId }),
+    );
+  }, [children, uncategorizedTransactionId]);
+
+  if (isLoading) {
+    return <Spinner size={30} />;
+  }
+  return (
+    <CategorizeTransactionTabsBootContext.Provider value={provider}>
+      {childrenPerKey}
+    </CategorizeTransactionTabsBootContext.Provider>
+  );
+}
+
+export const useCategorizeTransactionTabsBoot = () =>
+  React.useContext<CategorizeTransactionTabsValue>(
+    CategorizeTransactionTabsBootContext,
+  );

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

@@ -13,6 +13,7 @@ import { FastField, FastFieldProps, Form, Formik } from 'formik';
 import { useMatchTransaction } from '@/hooks/query/bank-rules';
 import { MatchingTransactionFormValues } from './types';
 import { transformToReq, useGetPendingAmountMatched } from './utils';
+import { useCategorizeTransactionTabsBoot } from './CategorizeTransactionTabsBoot';
 import {
   WithBankingActionsProps,
   withBankingActions,
@@ -23,7 +24,7 @@ const initialValues = {
 };
 
 export function MatchingBankTransaction() {
-  const uncategorizedTransactionId = 4;
+  const { uncategorizedTransactionId } = useCategorizeTransactionTabsBoot();
   const { mutateAsync: matchTransaction } = useMatchTransaction();
 
   // Handles the form submitting.
@@ -191,7 +192,6 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
     const handleCancelBtnClick = () => {
       closeMatchingTransactionAside();
     };
-
     const totalPending = useGetPendingAmountMatched();
 
     return (
@@ -202,7 +202,7 @@ const MatchTransactionFooter = R.compose(withBankingActions)(
               Add Reconcile Transaction +
             </AnchorButton>
 
-            <Text style={{ fontSize: 13 }} tagName='span'>
+            <Text style={{ fontSize: 13 }} tagName="span">
               Pending <FormatNumber value={totalPending} currency={'USD'} />
             </Text>
           </Group>