fix: show notification when pay transaction

gatherloop · Oct 10, 2024 · 1e15199 · 1e15199
1 parent 0315b69
commit 1e15199
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 11 deletions.
diff --git a/libs/ui/src/app/ExpenseListScreen.tsx b/libs/ui/src/app/ExpenseListScreen.tsx
@@ -12,8 +12,15 @@ import { dehydrate, QueryClient, useQueryClient } from '@tanstack/react-query';
 export async function getExpenseListScreenDehydratedState() {
   const client = new QueryClient();
   await client.prefetchQuery({
-    queryKey: expenseListQueryKey(),
-    queryFn: () => expenseList(),
+    queryKey: expenseListQueryKey({
+      sortBy: 'created_at',
+      order: 'desc',
+    }),
+    queryFn: () =>
+      expenseList({
+        sortBy: 'created_at',
+        order: 'desc',
+      }),
   });
   return dehydrate(client);
 }

diff --git a/libs/ui/src/app/WalletTransferListScreen.tsx b/libs/ui/src/app/WalletTransferListScreen.tsx
@@ -24,8 +24,15 @@ export async function getWalletTransferListScreenDehydratedState(
       queryFn: () => walletFindById(walletId),
     }),
     client.prefetchQuery({
-      queryKey: walletTransferListQueryKey(walletId),
-      queryFn: () => walletTransferList(walletId),
+      queryKey: walletTransferListQueryKey(walletId, {
+        sortBy: 'created_at',
+        order: 'desc',
+      }),
+      queryFn: () =>
+        walletTransferList(walletId, {
+          sortBy: 'created_at',
+          order: 'desc',
+        }),
     }),
   ]);
 

diff --git a/libs/ui/src/data/openApi/wallet.ts b/libs/ui/src/data/openApi/wallet.ts
@@ -31,11 +31,17 @@ export class OpenAPIWalletRepository implements WalletRepository {
     walletId
   ) => {
     const res = this.client.getQueryState<WalletTransferList200>(
-      walletTransferListQueryKey(walletId)
+      walletTransferListQueryKey(walletId, {
+        sortBy: 'created_at',
+        order: 'desc',
+      })
     )?.data;
 
     this.client.removeQueries({
-      queryKey: walletTransferListQueryKey(walletId),
+      queryKey: walletTransferListQueryKey(walletId, {
+        sortBy: 'created_at',
+        order: 'desc',
+      }),
     });
 
     return res?.data.map(transformers.walletTransfer) ?? [];
@@ -46,8 +52,15 @@ export class OpenAPIWalletRepository implements WalletRepository {
   ) => {
     return this.client
       .fetchQuery({
-        queryKey: walletTransferListQueryKey(walletId),
-        queryFn: () => walletTransferList(walletId),
+        queryKey: walletTransferListQueryKey(walletId, {
+          sortBy: 'created_at',
+          order: 'desc',
+        }),
+        queryFn: () =>
+          walletTransferList(walletId, {
+            sortBy: 'created_at',
+            order: 'desc',
+          }),
       })
       .then((data) => data.data.map(transformers.walletTransfer));
   };

diff --git a/libs/ui/src/domain/usecases/transactionPay.ts b/libs/ui/src/domain/usecases/transactionPay.ts
@@ -14,6 +14,7 @@ export type TransactionPayState = (
   | { type: 'shown' }
   | { type: 'paying' }
   | { type: 'payingSuccess' }
+  | { type: 'payingError' }
 ) &
   Context;
 
@@ -23,7 +24,8 @@ export type TransactionPayAction =
   | { type: 'HIDE_CONFIRMATION' }
   | { type: 'PAY'; walletId: number }
   | { type: 'PAY_SUCCESS' }
-  | { type: 'PAY_ERROR' };
+  | { type: 'PAY_ERROR' }
+  | { type: 'PAY_CANCEL' };
 
 export class TransactionPayUsecase extends Usecase<
   TransactionPayState,
@@ -86,6 +88,10 @@ export class TransactionPayUsecase extends Usecase<
         walletId,
       }))
       .with([{ type: 'paying' }, { type: 'PAY_ERROR' }], ([state]) => ({
+        ...state,
+        type: 'payingError',
+      }))
+      .with([{ type: 'payingError' }, { type: 'PAY_CANCEL' }], ([state]) => ({
         ...state,
         type: 'shown',
       }))
@@ -128,6 +134,9 @@ export class TransactionPayUsecase extends Usecase<
       .with({ type: 'payingSuccess' }, () => {
         dispatch({ type: 'HIDE_CONFIRMATION' });
       })
+      .with({ type: 'payingError' }, () => {
+        dispatch({ type: 'PAY_CANCEL' });
+      })
       .otherwise(() => {
         // TODO: IMPLEMENT SOMETHING
       });

diff --git a/.../views/transactions/widgets/TransactionPaymentAlert/TransactionPaymentAlert.presenter.tsx b/.../views/transactions/widgets/TransactionPaymentAlert/TransactionPaymentAlert.presenter.tsx
@@ -3,10 +3,21 @@ import { toFormikValidationSchema } from 'zod-formik-adapter';
 import { TransactionPaymentAlertView } from './TransactionPaymentAlert.view';
 import { useTransactionPayController } from '../../../../controllers';
 import { z } from 'zod';
+import { useEffect } from 'react';
+import { useToastController } from '@tamagui/toast';
 
 export const TransactionPaymentAlert = () => {
   const { state, dispatch } = useTransactionPayController();
 
+  const toast = useToastController();
+  useEffect(() => {
+    if (state.type === 'payingSuccess') {
+      toast.show('Payment Success');
+    } else if (state.type === 'payingError') {
+      toast.show('Payment Error');
+    }
+  }, [state.type, toast]);
+
   const formik = useFormik<{ walletId: number }>({
     initialValues: { walletId: NaN },
     onSubmit: ({ walletId }) => dispatch({ type: 'PAY', walletId }),
@@ -16,12 +27,15 @@ export const TransactionPaymentAlert = () => {
   });
 
   const isButtonDisabled =
-    state.type === 'paying' || state.type === 'payingSuccess';
+    state.type === 'paying' ||
+    state.type === 'payingSuccess' ||
+    state.type === 'payingError';
 
   const isOpen =
     state.type === 'shown' ||
     state.type === 'paying' ||
-    state.type === 'payingSuccess';
+    state.type === 'payingSuccess' ||
+    state.type === 'payingError';
 
   const onCancel = () => dispatch({ type: 'HIDE_CONFIRMATION' });