refactor: enhance transaction and appointment handling with pagination, status filtering, and improved data display

2025-11-18 22:21:47 +03:30
parent 430e0b3b11
commit e7c8501680
9 changed files with 286 additions and 75 deletions
@@ -1,12 +1,85 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import List from "./List";
+import Head from "./Head";
+import { request } from "@/services/response";
+import Cookies from "js-cookie";

 function Transactions({ user, loading }) {
+  const [payments, setPayments] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [status, setStatus] = useState(undefined); // undefined = all, 'pending', 'success', 'failed'
+
+  useEffect(() => {
+    const fetchPayments = async () => {
+      setIsLoading(true);
+      try {
+        const userInfo = Cookies.get("userInfo");
+        if (!userInfo) {
+          setIsLoading(false);
+          return;
+        }
+
+        const parsedData = JSON.parse(userInfo);
+        const userId = parsedData.id || parsedData.uuid;
+
+        if (!userId) {
+          setIsLoading(false);
+          return;
+        }
+
+        const params = {
+          page,
+          limit: 10,
+        };
+
+        if (status) {
+          params.status = status;
+        }
+
+        const response = await request.getMyPayments(userId, params);
+
+        if (response?.data) {
+          setPayments(response.data);
+          if (response.page) {
+            setTotalPages(response.page.totalPages);
+          }
+        }
+      } catch (error) {
+        console.error("Error fetching payments:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchPayments();
+  }, [page, status]);
+
+  const handlePageChange = (event, value) => {
+    setPage(value);
+  };
+
+  const handleStatusChange = (newStatus) => {
+    setStatus(newStatus);
+    setPage(1); // Reset to first page when status changes
+  };
+
  return (
    <div className="opacity-page">
      <p className="text-[#3B3B3B] hidden md:block text-[16px] font-bold">
        تاریخچه تراکنش ها
      </p>
-      <List user={user} loading={loading} />
+      <Head status={status} setStatus={handleStatusChange} />
+      <List
+        user={{ ...user, turns: { done: payments } }}
+        loading={isLoading}
+        page={page}
+        totalPages={totalPages}
+        onPageChange={handlePageChange}
+      />
    </div>
  );
 }