render transactions from serverside without state

payment-iq/app/api/transactions/deposit/route.ts

@@ -15,7 +15,6 @@ export async function GET(request: NextRequest) {
 
   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]

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() {
+export default async function DepositTransactionPage({
-  return (
+  searchParams,
-    <DepositsTransactionsTable />
+}: {
-  );
+  searchParams: Promise<Record<string, string | string[] | undefined>>;
+}) {
+  // Await searchParams before processing
+  const params = await searchParams;
+  // Create a safe query string by filtering only string values
+  const safeParams: Record<string, string> = {};
+  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 <DepositsTransactionsTable data={transactions} />;
 }

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() {
+interface DepositProps {
-  const [form, setForm] = useState({
+  data: any
-    userId: "",
+}
-    transactionId: "",
+
-    transactionReferenceId: "",
+const DepositsTransactionsTable: React.FC<DepositProps> = ({ data }) => {
-    currency: "",
+  const router = useRouter()
-    state: "",
+  const searchParams = useSearchParams()
-    depositMethod: "",
+
-    dateTime: "",
+  // 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<ITransaction[]>([]);
 
 
-  console.log(777, form)
+  // console.log(777, form)
 
 
-
+  // const fetchTransactions = useCallback(async () => {
-
+  //   try {
-  const fetchTransactions = useCallback(async () => {
+  //     const stringForm: Record<string, string> = Object.fromEntries(
-    try {
+  //       Object.entries(form).map(([key, value]) => [key, value === null ? "" : String(value)])
-      const stringForm: Record<string, string> = 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 query = new URLSearchParams(stringForm).toString();
+  //     const data = await res.json();
-      const res = await fetch(`/api/transactions/deposit?${query}`);
+  //     setTransactions(data);
-      const data = await res.json();
+  //   } catch (error) {
-      setTransactions(data);
+  //     console.error('Error fetching transactions:', error);
-    } catch (error) {
+  //   }
-      console.error('Error fetching transactions:', error);
+  // }, [form]);
-    }
-  }, [form]);
 
 
   const resetForm = () => {
-    setForm({
+    // setForm({
-      userId: "",
+    //   userId: "",
-      transactionId: "",
+    //   transactionId: "",
-      transactionReferenceId: "",
+    //   transactionReferenceId: "",
-      currency: "",
+    //   currency: "",
-      state: "",
+    //   state: "",
-      depositMethod: "",
+    //   depositMethod: "",
-      dateTime: "",
+    //   dateTime: "",
-    });
+    // });
   };
 
-  useEffect(() => {
+  // useEffect(() => {
-    fetchTransactions();
+  //   fetchTransactions();
-  }, [form, fetchTransactions]);
+  // }, [form, fetchTransactions]);
 
   const handleDeleteFilter = (key: string) => {
-    setForm((prev) => ({ ...prev, [key]: '' }));
+    // setForm((prev) => ({ ...prev, [key]: '' }));
   };
 
   const handleClearAll = () => {
-    resetForm()
+    // resetForm()
-    fetchTransactions()
+    // 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 }}
         />
-        <AdvancedSearch1 form={form} resetForm={resetForm} setForm={setForm} labels={Labels} />
+        {/* <AdvancedSearch1 form={form} resetForm={resetForm} setForm={setForm} labels={Labels} /> */}
-        <SearchFilters filters={form} onDeleteFilter={handleDeleteFilter} onClearAll={handleClearAll} />
+        {/* <SearchFilters filters={form} onDeleteFilter={handleDeleteFilter} onClearAll={handleClearAll} /> */}
         <Button
           variant="outlined"
           startIcon={<FileUploadIcon />}
@@ -121,7 +134,7 @@ export default function DepositsTransactionsTable() {
       </Stack>
 
       <DataGrid
-        rows={transactions}
+        rows={data}
         columns={depositTransactionsColumns}
         initialState={{ pagination: { paginationModel } }}
         pageSizeOptions={[50, 100]}
@@ -161,7 +174,7 @@ export default function DepositsTransactionsTable() {
         </DialogContent>
         <DialogActions>
           <Button onClick={() => setOpen(false)}>Cancel</Button>
-          <Button variant="contained" onClick={() => exportData(transactions, depositTransactionsColumns, fileType, onlyCurrentTable, setOpen)}>
+          <Button variant="contained" onClick={() => exportData(data, depositTransactionsColumns, fileType, onlyCurrentTable, setOpen)}>
             Export
           </Button>
         </DialogActions>
@@ -174,3 +187,5 @@ const StyledPaper = styled(Paper)(() => ({
   height: "90vh",
   width: "80vw"
 }));
+
+export default DepositsTransactionsTable

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();
+}