From 299c40787ef45d3ae2c0c8a6d04a64f753f9e44d Mon Sep 17 00:00:00 2001 From: Petropoulos Evangelos Date: Wed, 9 Jul 2025 23:52:58 +0300 Subject: [PATCH] render transactions from serverside without state --- .../app/api/transactions/deposit/route.ts | 6 +- .../dashboard/transactions/deposits/page.tsx | 23 +++- .../transactions/DepositTransactionsTable.tsx | 107 ++++++++++-------- payment-iq/app/services/transactions.ts | 13 +++ 4 files changed, 95 insertions(+), 54 deletions(-) create mode 100644 payment-iq/app/services/transactions.ts diff --git a/payment-iq/app/api/transactions/deposit/route.ts b/payment-iq/app/api/transactions/deposit/route.ts index 69369bd..2e9ca95 100644 --- a/payment-iq/app/api/transactions/deposit/route.ts +++ b/payment-iq/app/api/transactions/deposit/route.ts @@ -12,10 +12,9 @@ export async function GET(request: NextRequest) { const transactionId = searchParams.get("transactionId"); const dateTime = searchParams.get("dateTime"); - + let filteredTransactions = [...depositTransactionDummyData]; - - console.log(12345, dateTime?.split(" ")[0]); + if (userId) { filteredTransactions = filteredTransactions.filter( (tx) => tx.userId.toString() === userId @@ -44,7 +43,6 @@ export async function GET(request: NextRequest) { ); } - console.log(777, dateTime); if (dateTime) { filteredTransactions = filteredTransactions.filter( (tx) => tx.dateTime.split(" ")[0] === formatToDateTimeString(dateTime).split(" ")[0] diff --git a/payment-iq/app/dashboard/transactions/deposits/page.tsx b/payment-iq/app/dashboard/transactions/deposits/page.tsx index 7ed98ea..8f14822 100644 --- a/payment-iq/app/dashboard/transactions/deposits/page.tsx +++ b/payment-iq/app/dashboard/transactions/deposits/page.tsx @@ -1,7 +1,22 @@ import DepositsTransactionsTable from "@/app/features/Pages/transactions/DepositTransactionsTable"; +import { getTransactions } from "@/app/services/transactions"; -export default function DepositTransactionPage() { - return ( - - ); +export default async function DepositTransactionPage({ + searchParams, +}: { + searchParams: Promise>; +}) { + // Await searchParams before processing + const params = await searchParams; + // Create a safe query string by filtering only string values + const safeParams: Record = {}; + for (const [key, value] of Object.entries(params)) { + if (typeof value === "string") { + safeParams[key] = value; + } + } + const query = new URLSearchParams(safeParams).toString(); + const transactions = await getTransactions({ query }); + + return ; } diff --git a/payment-iq/app/features/Pages/transactions/DepositTransactionsTable.tsx b/payment-iq/app/features/Pages/transactions/DepositTransactionsTable.tsx index ea55be8..a7c6181 100644 --- a/payment-iq/app/features/Pages/transactions/DepositTransactionsTable.tsx +++ b/payment-iq/app/features/Pages/transactions/DepositTransactionsTable.tsx @@ -23,19 +23,28 @@ import AdvancedSearch1 from "../../AdvancedSearch/AdvancedSearch1"; import SearchFilters from "@/app/components/searchFilter/SearchFilters"; import { exportData } from "@/app/utils/exportData"; import { ITransaction } from "./types"; +import { useSearchParams, useRouter } from "next/navigation"; + const paginationModel = { page: 0, pageSize: 50 }; -export default function DepositsTransactionsTable() { - const [form, setForm] = useState({ - userId: "", - transactionId: "", - transactionReferenceId: "", - currency: "", - state: "", - depositMethod: "", - dateTime: "", - }); +interface DepositProps { + data: any +} + +const DepositsTransactionsTable: React.FC = ({ data }) => { + const router = useRouter() + const searchParams = useSearchParams() + + // const [form, setForm] = useState({ + // userId: "", + // transactionId: "", + // transactionReferenceId: "", + // currency: "", + // state: "", + // depositMethod: "", + // dateTime: "", + // }); const [open, setOpen] = useState(false); const [fileType, setFileType] = useState<"csv" | "xls" | "xlsx">("csv"); @@ -43,54 +52,58 @@ export default function DepositsTransactionsTable() { const [transactions, setTransactions] = useState([]); - console.log(777, form) + // console.log(777, form) - - - const fetchTransactions = useCallback(async () => { - try { - const stringForm: Record = Object.fromEntries( - Object.entries(form).map(([key, value]) => [key, value === null ? "" : String(value)]) - ); - const query = new URLSearchParams(stringForm).toString(); - const res = await fetch(`/api/transactions/deposit?${query}`); - const data = await res.json(); - setTransactions(data); - } catch (error) { - console.error('Error fetching transactions:', error); - } - }, [form]); + // const fetchTransactions = useCallback(async () => { + // try { + // const stringForm: Record = Object.fromEntries( + // Object.entries(form).map(([key, value]) => [key, value === null ? "" : String(value)]) + // ); + // const query = new URLSearchParams(stringForm).toString(); + // const res = await fetch(`/api/transactions/deposit?${query}`); + // const data = await res.json(); + // setTransactions(data); + // } catch (error) { + // console.error('Error fetching transactions:', error); + // } + // }, [form]); const resetForm = () => { - setForm({ - userId: "", - transactionId: "", - transactionReferenceId: "", - currency: "", - state: "", - depositMethod: "", - dateTime: "", - }); + // setForm({ + // userId: "", + // transactionId: "", + // transactionReferenceId: "", + // currency: "", + // state: "", + // depositMethod: "", + // dateTime: "", + // }); }; - useEffect(() => { - fetchTransactions(); - }, [form, fetchTransactions]); + // useEffect(() => { + // fetchTransactions(); + // }, [form, fetchTransactions]); const handleDeleteFilter = (key: string) => { - setForm((prev) => ({ ...prev, [key]: '' })); + // setForm((prev) => ({ ...prev, [key]: '' })); }; const handleClearAll = () => { - resetForm() - fetchTransactions() + // resetForm() + // fetchTransactions() }; const handleClickField = (field: string, value: string) => { - setForm((prev) => ({ ...prev, [field]: value })); + // setForm((prev) => ({ ...prev, [field]: value })); + + const params = new URLSearchParams(searchParams.toString()) + params.set(field, value) + router.push(`?${params.toString()}`) + router.refresh() + }; @@ -109,8 +122,8 @@ export default function DepositsTransactionsTable() { onChange={(e) => console.log(`setSearchQuery(${e.target.value})`)} sx={{ width: 300 }} /> - - + {/* */} + {/* */} - @@ -174,3 +187,5 @@ const StyledPaper = styled(Paper)(() => ({ height: "90vh", width: "80vw" })); + +export default DepositsTransactionsTable diff --git a/payment-iq/app/services/transactions.ts b/payment-iq/app/services/transactions.ts new file mode 100644 index 0000000..71827d3 --- /dev/null +++ b/payment-iq/app/services/transactions.ts @@ -0,0 +1,13 @@ +export async function getTransactions({ query }: { query: string }) { + const res = await fetch(`http://localhost:3000/api/transactions/deposit?${query}`, { + cache: "no-store", + }); + + if (!res.ok) { + // You can parse the error message from the response if your API sends one + const errorData = await res.json().catch(() => ({ message: 'Unknown error' })); + throw new Error(errorData.message || `HTTP error! status: ${res.status}`); + } + + return res.json(); +} \ No newline at end of file