From 31a6d3d7954ecb1a5762dda8d07bf9b06de5a6bd Mon Sep 17 00:00:00 2001 From: ardiola Date: Tue, 22 Apr 2025 01:15:39 +0700 Subject: [PATCH] refactor: update ResendTransaction component and remove unused dialog handling --- .../history-transaction/Transaction.tsx | 2 +- .../blocks/DetailTransaction.tsx | 26 +++++- .../blocks/ResendTransaction.tsx | 89 +++++++++++-------- .../hooks/TransactionContext.tsx | 41 +-------- 4 files changed, 82 insertions(+), 76 deletions(-) diff --git a/src/pages/transaction/history-transaction/Transaction.tsx b/src/pages/transaction/history-transaction/Transaction.tsx index ca2dbf8..ee0aeff 100644 --- a/src/pages/transaction/history-transaction/Transaction.tsx +++ b/src/pages/transaction/history-transaction/Transaction.tsx @@ -29,7 +29,7 @@ const Transaction = () => {
- + {/* */} diff --git a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx index 079aaf6..46a9acc 100644 --- a/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx +++ b/src/pages/transaction/history-transaction/blocks/DetailTransaction.tsx @@ -1,12 +1,14 @@ import { useTransactionContext } from '../hooks/useTransactionContext'; import { useCallApi } from '@/hooks'; import { apiConfig } from '@/config/api.config'; -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; +import ResendTransaction from './ResendTransaction'; import { Dialog, DialogBody, DialogContent, DialogDescription, + DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'; @@ -23,6 +25,16 @@ const DetailTransaction = () => { const [transactionDetails, setTransactionDetails] = useState(null); + const [showResend, setResend] = useState(false); + + const handleResendOpen = () => { + setResend(true); + }; + + const handleResendClose = () => { + setResend(false); + }; + useEffect(() => { const fetchTransactionDetails = async () => { if (selectedTransactionId) { @@ -622,10 +634,20 @@ const DetailTransaction = () => { )} + + {/* {showResendDialog} */} + {(transactionDetails?.status === 'F' || transactionDetails?.status === 'P') && transactionDetails?.status_approve !== 'W' && ( +
+ + +
+ )} + + ); }; -export default DetailTransaction; +export default DetailTransaction; \ No newline at end of file diff --git a/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx b/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx index 2b4b13d..3da5a09 100644 --- a/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx +++ b/src/pages/transaction/history-transaction/blocks/ResendTransaction.tsx @@ -19,10 +19,18 @@ import { Input } from '@/components/ui/input'; const API_URL = apiConfig.transaction; -const ResendTransaction = () => { - const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext(); +interface ResendTransactionProps { + isOpen: boolean | null; + onClose: () => void | null; + selectedTransactionForResend: any | null; // Adjust the type as per your requirements +} + +const ResendTransaction = ({ isOpen, onClose, selectedTransactionForResend }: ResendTransactionProps) => { + + + // const { showResendDialog, handleResendDialog, selectedTransactionForResend } = useTransactionContext(); const { GetData, PostData } = useCallApi(); - const { reload } = useDataGrid(); + // const { reload } = useDataGrid(); const [transactionDetails, setTransactionDetails] = useState(null); const [alert, setAlert] = useState({ show: false, @@ -34,38 +42,42 @@ const ResendTransaction = () => { const [formField, setFormField] = useState(initialStatePin); useEffect(() => { - if (showResendDialog) { + // if (showResendDialog) { + if (isOpen) { // Reset form fields when dialog opens setFormField({ pin: '' }); setAlert({ show: false, message: '' }); - setTransactionDetails(null); // Optional reset + // setTransactionDetails(null); // Optional reset } - }, [showResendDialog]); + }, [isOpen]); - useEffect(() => { - const fetchTransactionDetails = async () => { - if (selectedTransactionForResend) { - try { - const response = await GetData( - `${API_URL}/transaction/history/detail/${selectedTransactionForResend}`, - { - id: selectedTransactionForResend, - } - ); - setTransactionDetails(response?.data); - } catch (error) { - console.error('Error fetching transaction', error); - } - } + // useEffect(() => { + // const fetchTransactionDetails = async () => { + // if (selectedTransactionForResend) { + // try { + // const response = await GetData( + // `${API_URL}/transaction/history/detail/${selectedTransactionForResend}`, + // { + // id: selectedTransactionForResend, + // } + // ); + // setTransactionDetails(response?.data); + // } catch (error) { + // console.error('Error fetching transaction', error); + // } + // } - }; + // }; + + // if (isOpen && selectedTransactionForResend) { + // fetchTransactionDetails(); + // } + // }, [isOpen, selectedTransactionForResend, GetData]); + + // console.log(selectedTransactionForResend); - if (showResendDialog && selectedTransactionForResend) { - fetchTransactionDetails(); - } - }, [showResendDialog, selectedTransactionForResend, GetData]); const doResendTransaction = useCallback(async (data: any | null, pintransactiion: string) => { @@ -146,9 +158,9 @@ const ResendTransaction = () => { if (response?.status) { setAlert({ show: false, message: '' }); - handleResendDialog(false, null); + // handleResendDialog(false, null); toast.success('Success Retry Transaction'); - reload(); + // reload(); const createActivity = { module: 'History Transaction', @@ -161,17 +173,20 @@ const ResendTransaction = () => { setAlert({ show: true, message: response?.message }); toast.error('Failed Retry Transaction'); } - }, [selectedTransactionForResend, PostData, handleResendDialog, reload]); + }, [selectedTransactionForResend, PostData]); + + if (!isOpen) return null; + return ( - handleResendDialog(open, null)}> +

Are you sure?

- You will retry this transaction! +

You will retry this transaction!

 {alert.show && ( @@ -188,14 +203,16 @@ const ResendTransaction = () => { type="password" value={formField.pin} onChange={(e) => setFormField({ ...formField, pin: e.target.value })} - /> + /> + - + {/* - */} + + diff --git a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx index 6b02b50..52409ad 100644 --- a/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx +++ b/src/pages/transaction/history-transaction/hooks/TransactionContext.tsx @@ -2,16 +2,11 @@ import { DataGridColumnHeader, DataGridProvider, KeenIcon } from '@/components'; import { Toaster } from '@/components/ui/sonner'; import { apiConfig } from '@/config/api.config'; import { ColumnDef } from '@tanstack/react-table'; -import axios from 'axios'; -import React, { createContext, useCallback, useEffect, useMemo, useState } from 'react'; +import React, { createContext, useCallback, useMemo, useState } from 'react'; import { useCallApi } from '@/hooks'; import ListToolbar from '../blocks/ListToolbar'; -import { Button } from '@/components/ui/button'; import { useNavigate } from 'react-router'; import DetailTransaction from '../blocks/DetailTransaction'; -import { log } from 'console'; -import ResendTransaction from '../blocks/ResendTransaction'; -import { comment } from 'stylis'; interface TransactionProps { id: number; @@ -31,9 +26,6 @@ interface ContextProps { setShowDetailDialog: React.Dispatch>; selectedTransactionId: number | null; setSelectedTransactionId: React.Dispatch>; - showResendDialog: boolean; - handleResendDialog: (show: boolean, selected_transaction: string | null) => void; - selectedTransactionForResend: string | null; } const initialProps: ContextProps = { @@ -41,10 +33,7 @@ const initialProps: ContextProps = { showDetailDialog: false, setShowDetailDialog: () => { }, selectedTransactionId: null, - setSelectedTransactionId: () => { }, - showResendDialog: false, - handleResendDialog: (show: boolean, selected_transaction: string | null) => { }, - selectedTransactionForResend: null + setSelectedTransactionId: () => { } }; const ManageTransactionContext = createContext(initialProps); @@ -59,13 +48,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { const handleNavigate = (path: string) => { const url = navigate(`${API_URL}/transaction/history/${path}`); }; - const [showResendDialog, setShowResendDialog] = useState(false); - const [selectedTransactionForResend, setSelectedTransactionForResend] = useState(null); - - const handleResendDialog = useCallback((show: boolean, selected_transaction: string | null) => { - setSelectedTransactionForResend(show ? selected_transaction : null); - setShowResendDialog(show); - }, []); const columns = useMemo[]>( @@ -217,18 +199,6 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { > - {/* add new button for resend transaction failed */} - {isVisible && - - } ); }, @@ -238,7 +208,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { } } ], - [handleResendDialog]); + []); const getTransactionLists = async (page: number, limit: number, sorting: any, filter: any) => { try { @@ -314,10 +284,7 @@ const TransactionProvider = ({ children }: { children: React.ReactNode }) => { showDetailDialog, setShowDetailDialog, selectedTransactionId, - setSelectedTransactionId, - showResendDialog, - handleResendDialog, - selectedTransactionForResend + setSelectedTransactionId }} >