fix: group matches to get possible and perfect matches

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

@@ -23,7 +23,7 @@ const initialValues = {
 };
 
 export function MatchingBankTransaction() {
-  const uncategorizedTransactionId = 1;
+  const uncategorizedTransactionId = 4;
   const { mutateAsync: matchTransaction } = useMatchTransaction();
 
   // Handles the form submitting.
@@ -37,7 +37,7 @@ export function MatchingBankTransaction() {
       });
       return;
     }
-    matchTransaction([uncategorizedTransactionId, _values])
+    matchTransaction({ id: uncategorizedTransactionId, values: _values })
       .then(() => {
         AppToaster.show({
           intent: Intent.SUCCESS,
@@ -53,7 +53,9 @@ export function MatchingBankTransaction() {
   };
 
   return (
-    <MatchingTransactionBoot>
+    <MatchingTransactionBoot
+      uncategorizedTransactionId={uncategorizedTransactionId}
+    >
       <Formik initialValues={initialValues} onSubmit={handleSubmit}>
         <Form>
           <MatchingBankTransactionContent />
@@ -78,10 +80,10 @@ function MatchingBankTransactionContent() {
  * @returns {React.ReactNode}
  */
 function PerfectMatchingTransactions() {
-  const { matchingTransactions } = useMatchingTransactionBoot();
+  const { perfectMatches, perfectMatchesCount } = useMatchingTransactionBoot();
 
   // Can't continue if the perfect matches is empty.
-  if (isEmpty(matchingTransactions)) {
+  if (isEmpty(perfectMatches)) {
     return null;
   }
   return (
@@ -90,13 +92,13 @@ function PerfectMatchingTransactions() {
         <Group spacing={6}>
           <h2 className={styles.matchBarTitle}>Perfect Matchines</h2>
           <Tag minimal round intent={Intent.SUCCESS}>
-            2
+            {perfectMatchesCount}
           </Tag>
         </Group>
       </Box>
 
       <Stack spacing={9} style={{ padding: '12px 15px' }}>
-        {matchingTransactions.map((match, index) => (
+        {perfectMatches.map((match, index) => (
           <MatchTransactionField
             key={index}
             label={`${match.transsactionTypeFormatted} for ${match.amountFormatted}`}
@@ -115,10 +117,10 @@ function PerfectMatchingTransactions() {
  * @returns {React.ReactNode}
  */
 function GoodMatchingTransactions() {
-  const { matchingTransactions } = useMatchingTransactionBoot();
+  const { possibleMatches } = useMatchingTransactionBoot();
 
   // Can't continue if the possible matches is emoty.
-  if (isEmpty(matchingTransactions)) {
+  if (isEmpty(possibleMatches)) {
     return null;
   }
   return (
@@ -133,7 +135,7 @@ function GoodMatchingTransactions() {
       </Box>
 
       <Stack spacing={9} style={{ padding: '12px 15px' }}>
-        {matchingTransactions.map((match, index) => (
+        {possibleMatches.map((match, index) => (
           <MatchTransaction
             key={index}
             label={`${match.transsactionTypeFormatted} for ${match.amountFormatted}`}

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

@@ -3,7 +3,7 @@ import React, { createContext } from 'react';
 
 interface MatchingTransactionBootValues {
   isMatchingTransactionsLoading: boolean;
-  matchingTransactions: Array<any>;
+  possibleMatches: Array<any>;
   perfectMatchesCount: number;
   perfectMatches: Array<any>;
   matches: Array<any>;
@@ -14,21 +14,24 @@ const RuleFormBootContext = createContext<MatchingTransactionBootValues>(
 );
 
 interface RuleFormBootProps {
+  uncategorizedTransactionId: number;
   children: React.ReactNode;
 }
 
-function MatchingTransactionBoot({ ...props }: RuleFormBootProps) {
+function MatchingTransactionBoot({
+  uncategorizedTransactionId,
+  ...props
+}: RuleFormBootProps) {
   const {
     data: matchingTransactions,
     isLoading: isMatchingTransactionsLoading,
-  } = useMatchingTransactions();
+  } = useMatchingTransactions(uncategorizedTransactionId);
 
   const provider = {
     isMatchingTransactionsLoading,
-    matchingTransactions,
+    possibleMatches: matchingTransactions?.possibleMatches,
     perfectMatchesCount: 2,
-    perfectMatches: [],
-    matches: [],
+    perfectMatches: matchingTransactions?.perfectMatches,
   } as MatchingTransactionBootValues;
 
   return <RuleFormBootContext.Provider value={provider} {...props} />;

packages/webapp/src/hooks/query/bank-rules.ts

@@ -1,5 +1,7 @@
 // @ts-nocheck
 import {
+  UseMutateFunction,
+  UseMutationResult,
   useInfiniteQuery,
   useMutation,
   useQuery,
@@ -86,15 +88,18 @@ export function useBankRule(bankRuleId: number, props) {
  *
  * @returns
  */
-export function useMatchingTransactions(props?: any) {
+export function useMatchingTransactions(
+  uncategorizedTransactionId: number,
+  props?: any,
+) {
   const apiRequest = useApiRequest();
 
-  return useQuery(
-    ['MATCHING_TRANSACTION'],
+  return useQuery<any>(
+    ['MATCHING_TRANSACTION', uncategorizedTransactionId],
     () =>
       apiRequest
-        .get(`/banking/matches`)
-        .then((res) => transformToCamelCase(res.data.data)),
+        .get(`/cashflow/transactions/${uncategorizedTransactionId}/matches`)
+        .then((res) => transformToCamelCase(res.data)),
     props,
   );
 }
@@ -135,11 +140,18 @@ export function useUnexcludeUncategorizedTransaction(props) {
   );
 }
 
-export function useMatchTransaction(props?: any) {
+interface MatchUncategorizedTransactionValues {
+  id: number;
+  value: any;
+}
+
+export function useMatchTransaction(
+  props?: any,
+): UseMutationResult<MatchUncategorizedTransactionValues> {
   const queryClient = useQueryClient();
   const apiRequest = useApiRequest();
 
-  return useMutation(
+  return useMutation<MatchUncategorizedTransactionValues>(
     ([uncategorizedTransactionId, values]) =>
       apiRequest.post(`/banking/matches/${uncategorizedTransactionId}`, values),
     {