|
1 | 1 | "use client";
|
2 | 2 |
|
3 | 3 | import { useEffect, useRef, useState, useCallback } from "react";
|
4 |
| -import { |
5 |
| - Table, |
6 |
| - TableBody, |
7 |
| - TableCell, |
8 |
| - TableHead, |
9 |
| - TableHeader, |
10 |
| - TableRow, |
11 |
| -} from "@/components/ui/table"; |
| 4 | +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; |
| 5 | +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; |
12 | 6 | import { Input } from "@/components/ui/input";
|
13 | 7 | import { Loader2, Search } from "lucide-react";
|
14 | 8 | import axios from "axios";
|
15 | 9 | import debounce from "lodash.debounce";
|
16 |
| - |
17 |
| -interface TableData { |
18 |
| - user: { |
19 |
| - name: string; |
20 |
| - email: string; |
21 |
| - }; |
22 |
| - usn?: string; |
23 |
| - razorpayPaymentId: string; |
24 |
| - contactNumber: string; |
25 |
| - amount: number; |
| 10 | +import getPaymentCount from "@/app/actions/get-payment-count"; |
| 11 | + |
| 12 | +interface PaymentData { |
| 13 | + user: { |
| 14 | + name: string; |
| 15 | + email: string; |
| 16 | + image: string; |
| 17 | + forms: [{ photo: string }]; |
| 18 | + }; |
| 19 | + usn?: string; |
| 20 | + razorpayPaymentId: string; |
| 21 | + contactNumber: string; |
| 22 | + amount: number; |
26 | 23 | }
|
27 | 24 |
|
28 |
| -export function SearchableInfiniteScrollTable() { |
29 |
| - const [data, setData] = useState<TableData[]>([]); |
30 |
| - const [filteredData, setFilteredData] = useState<TableData[]>([]); |
31 |
| - const [isLoading, setIsLoading] = useState(false); |
32 |
| - const [page, setPage] = useState(1); |
33 |
| - const [searchTerm, setSearchTerm] = useState(""); |
34 |
| - const [hasMoreData, setHasMoreData] = useState(true); |
35 |
| - const loaderRef = useRef<HTMLDivElement>(null); |
36 |
| - const observerRef = useRef<IntersectionObserver | null>(null); |
37 |
| - |
38 |
| - const getPaymentDetails = async (page: number, query: string) => { |
39 |
| - if (isLoading || !hasMoreData) return; |
40 |
| - |
41 |
| - setIsLoading(true); |
42 |
| - try { |
43 |
| - const response = await axios.get( |
44 |
| - `/api/users/payment?page=${page}&search=${encodeURIComponent(query)}`, |
45 |
| - ); |
46 |
| - const users = response.data.users; |
47 |
| - |
48 |
| - if (users.length === 0) { |
49 |
| - setHasMoreData(false); // No more data to load |
50 |
| - } |
51 |
| - |
52 |
| - setData((prevData) => { |
53 |
| - const newData = [...prevData, ...users]; |
54 |
| - // Remove duplicates |
55 |
| - const uniqueData = Array.from( |
56 |
| - new Map( |
57 |
| - newData.map((item) => [item.razorpayPaymentId, item]), |
58 |
| - ).values(), |
59 |
| - ); |
60 |
| - return uniqueData; |
61 |
| - }); |
62 |
| - setPage((prevPage) => prevPage + 1); |
63 |
| - } catch (error) { |
64 |
| - console.error("Error fetching payment details:", error); |
65 |
| - } finally { |
66 |
| - setIsLoading(false); |
67 |
| - } |
68 |
| - }; |
69 |
| - |
70 |
| - const loadMoreData = () => { |
71 |
| - if (searchTerm === "") { |
72 |
| - getPaymentDetails(page, ""); |
73 |
| - } |
74 |
| - }; |
75 |
| - |
76 |
| - const fetchSearchResults = useCallback(async (query: string) => { |
77 |
| - setPage(1); // Reset page number |
78 |
| - setHasMoreData(true); // Reset hasMoreData |
79 |
| - try { |
80 |
| - const response = await axios.get( |
81 |
| - `/api/users/payment?page=1&search=${encodeURIComponent(query)}`, |
82 |
| - ); |
83 |
| - const users = response.data.users; |
84 |
| - setData(users); // Set new data from search |
85 |
| - setFilteredData(users); // Set filtered data to the same as new data |
86 |
| - } catch (error) { |
87 |
| - console.error("Error fetching payment details:", error); |
88 |
| - } |
89 |
| - }, []); |
90 |
| - |
91 |
| - // eslint-disable-next-line react-hooks/exhaustive-deps |
92 |
| - const debouncedFetch = useCallback( |
93 |
| - debounce((query: string) => { |
94 |
| - fetchSearchResults(query); |
95 |
| - }, 500), |
96 |
| - [], |
97 |
| - ); |
98 |
| - |
99 |
| - const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => { |
100 |
| - const value = event.target.value; |
101 |
| - setSearchTerm(value); |
102 |
| - debouncedFetch(value); // Use debounced fetch function |
103 |
| - }; |
104 |
| - |
105 |
| - useEffect(() => { |
106 |
| - loadMoreData(); // Initial load |
107 |
| - // eslint-disable-next-line react-hooks/exhaustive-deps |
108 |
| - }, []); |
109 |
| - |
110 |
| - useEffect(() => { |
111 |
| - const observer = new IntersectionObserver( |
112 |
| - (entries) => { |
113 |
| - if (entries[0].isIntersecting && !isLoading) { |
114 |
| - loadMoreData(); |
| 25 | +export function PaymentCards() { |
| 26 | + const [data, setData] = useState<PaymentData[]>([]); |
| 27 | + const [filteredData, setFilteredData] = useState<PaymentData[]>([]); |
| 28 | + const [isLoading, setIsLoading] = useState(false); |
| 29 | + const [totalNumberOfPayments, setTotalNumberOfPayments] = useState(0); |
| 30 | + const [page, setPage] = useState(1); |
| 31 | + const [searchTerm, setSearchTerm] = useState(""); |
| 32 | + const [hasMoreData, setHasMoreData] = useState(true); |
| 33 | + const loaderRef = useRef<HTMLDivElement>(null); |
| 34 | + const observerRef = useRef<IntersectionObserver | null>(null); |
| 35 | + |
| 36 | + const getPaymentDetails = async (page: number, query: string) => { |
| 37 | + if (isLoading || !hasMoreData) return; |
| 38 | + |
| 39 | + setIsLoading(true); |
| 40 | + try { |
| 41 | + const response = await axios.get( |
| 42 | + `/api/users/payment?page=${page}&search=${encodeURIComponent(query)}` |
| 43 | + ); |
| 44 | + const users = response.data.users; |
| 45 | + |
| 46 | + if (users.length === 0) { |
| 47 | + setHasMoreData(false); |
| 48 | + } |
| 49 | + |
| 50 | + setData((prevData) => { |
| 51 | + const newData = [...prevData, ...users]; |
| 52 | + const uniqueData = Array.from( |
| 53 | + new Map(newData.map((item) => [item.razorpayPaymentId, item])).values() |
| 54 | + ); |
| 55 | + return uniqueData; |
| 56 | + }); |
| 57 | + setPage((prevPage) => prevPage + 1); |
| 58 | + } catch (error) { |
| 59 | + console.error("Error fetching payment details:", error); |
| 60 | + } finally { |
| 61 | + setIsLoading(false); |
115 | 62 | }
|
116 |
| - }, |
117 |
| - { threshold: 1.0 }, |
118 |
| - ); |
| 63 | + }; |
| 64 | + |
| 65 | + const loadMoreData = () => { |
| 66 | + if (searchTerm === "") { |
| 67 | + getPaymentDetails(page, ""); |
| 68 | + } |
| 69 | + }; |
| 70 | + |
| 71 | + const fetchSearchResults = useCallback(async (query: string) => { |
| 72 | + setPage(1); |
| 73 | + setHasMoreData(true); |
| 74 | + try { |
| 75 | + const response = await axios.get(`/api/users/payment?page=1&search=${encodeURIComponent(query)}`); |
| 76 | + const users = response.data.users; |
| 77 | + setData(users); |
| 78 | + setFilteredData(users); |
| 79 | + } catch (error) { |
| 80 | + console.error("Error fetching payment details:", error); |
| 81 | + } |
| 82 | + }, []); |
119 | 83 |
|
120 |
| - if (loaderRef.current) { |
121 |
| - observer.observe(loaderRef.current); |
122 |
| - } |
| 84 | + const debouncedFetch = useCallback( |
| 85 | + debounce((query: string) => { |
| 86 | + fetchSearchResults(query); |
| 87 | + }, 500), |
| 88 | + [] |
| 89 | + ); |
123 | 90 |
|
124 |
| - return () => { |
125 |
| - if (loaderRef.current) { |
126 |
| - // eslint-disable-next-line react-hooks/exhaustive-deps |
127 |
| - observer.unobserve(loaderRef.current); |
128 |
| - } |
129 |
| - observer.disconnect(); |
| 91 | + const handleSearch = (event: React.ChangeEvent<HTMLInputElement>) => { |
| 92 | + const value = event.target.value; |
| 93 | + setSearchTerm(value); |
| 94 | + debouncedFetch(value); |
130 | 95 | };
|
131 |
| - // eslint-disable-next-line react-hooks/exhaustive-deps |
132 |
| - }, [isLoading]); |
133 |
| - |
134 |
| - return ( |
135 |
| - <div className="container mx-auto py-10"> |
136 |
| - <div className="mb-4 relative"> |
137 |
| - <Input |
138 |
| - type="text" |
139 |
| - placeholder="Search..." |
140 |
| - value={searchTerm} |
141 |
| - onChange={handleSearch} |
142 |
| - className="pl-10" |
143 |
| - /> |
144 |
| - <Search |
145 |
| - className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" |
146 |
| - size={20} |
147 |
| - /> |
148 |
| - </div> |
149 |
| - <Table> |
150 |
| - <TableHeader> |
151 |
| - <TableRow> |
152 |
| - <TableHead>Name</TableHead> |
153 |
| - <TableHead>Email</TableHead> |
154 |
| - <TableHead>Payment ID</TableHead> |
155 |
| - <TableHead>Amount</TableHead> |
156 |
| - </TableRow> |
157 |
| - </TableHeader> |
158 |
| - <TableBody> |
159 |
| - {(searchTerm ? filteredData : data).map((item, index) => ( |
160 |
| - <TableRow key={index}> |
161 |
| - <TableCell>{item.user.name}</TableCell> |
162 |
| - <TableCell>{item.user.email}</TableCell> |
163 |
| - <TableCell>{item.razorpayPaymentId}</TableCell> |
164 |
| - <TableCell>₹{item.amount.toFixed(2)}</TableCell> |
165 |
| - </TableRow> |
166 |
| - ))} |
167 |
| - </TableBody> |
168 |
| - </Table> |
169 |
| - {searchTerm === "" && hasMoreData && ( |
170 |
| - <div ref={loaderRef} className="flex justify-center py-4"> |
171 |
| - {isLoading && <Loader2 className="h-6 w-6 animate-spin" />} |
| 96 | + |
| 97 | + useEffect(() => { |
| 98 | + loadMoreData(); |
| 99 | + async function getNumberOfPayments() { |
| 100 | + const count = await getPaymentCount(); |
| 101 | + setTotalNumberOfPayments(count ?? 0); |
| 102 | + } |
| 103 | + getNumberOfPayments(); |
| 104 | + }, []); |
| 105 | + |
| 106 | + useEffect(() => { |
| 107 | + const observer = new IntersectionObserver( |
| 108 | + (entries) => { |
| 109 | + if (entries[0].isIntersecting && !isLoading) { |
| 110 | + loadMoreData(); |
| 111 | + } |
| 112 | + }, |
| 113 | + { threshold: 1.0 } |
| 114 | + ); |
| 115 | + |
| 116 | + if (loaderRef.current) { |
| 117 | + observer.observe(loaderRef.current); |
| 118 | + } |
| 119 | + |
| 120 | + return () => { |
| 121 | + if (loaderRef.current) { |
| 122 | + observer.unobserve(loaderRef.current); |
| 123 | + } |
| 124 | + observer.disconnect(); |
| 125 | + }; |
| 126 | + }, [isLoading]); |
| 127 | + |
| 128 | + return ( |
| 129 | + <div className="container mx-auto py-10"> |
| 130 | + <h1 className="text-3xl font-bold text-primary py-4">Payments ({totalNumberOfPayments})</h1> |
| 131 | + <div className="mb-4 relative"> |
| 132 | + <Input |
| 133 | + type="text" |
| 134 | + placeholder="Search..." |
| 135 | + value={searchTerm} |
| 136 | + onChange={handleSearch} |
| 137 | + className="pl-10" |
| 138 | + /> |
| 139 | + <Search |
| 140 | + className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" |
| 141 | + size={20} |
| 142 | + /> |
| 143 | + </div> |
| 144 | + <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> |
| 145 | + {(searchTerm ? filteredData : data).map((item, index) => ( |
| 146 | + <Card key={index} className="overflow-hidden"> |
| 147 | + <CardHeader className="p-0"> |
| 148 | + <div className="relative pb-[100%]"> |
| 149 | + <Avatar className="absolute inset-0 w-full h-full rounded-none"> |
| 150 | + <AvatarImage |
| 151 | + src={item.user.forms?.[0]?.photo || ""} |
| 152 | + alt={item.user.name} |
| 153 | + className="object-cover" |
| 154 | + /> |
| 155 | + <AvatarFallback>{item.user.name.charAt(0)}</AvatarFallback> |
| 156 | + </Avatar> |
| 157 | + </div> |
| 158 | + </CardHeader> |
| 159 | + <CardContent className="p-4"> |
| 160 | + <CardTitle className="text-xl mb-2">{item.user.name}</CardTitle> |
| 161 | + <p className="text-sm text-muted-foreground mb-1">{item.user.email}</p> |
| 162 | + <p className="text-sm text-muted-foreground mb-1">ID: {item.razorpayPaymentId}</p> |
| 163 | + <p className="text-sm font-semibold">Amount: ₹{item.amount.toFixed(2)}</p> |
| 164 | + </CardContent> |
| 165 | + </Card> |
| 166 | + ))} |
| 167 | + </div> |
| 168 | + {searchTerm === "" && hasMoreData && ( |
| 169 | + <div ref={loaderRef} className="flex justify-center py-4"> |
| 170 | + {isLoading && <Loader2 className="h-6 w-6 animate-spin" />} |
| 171 | + </div> |
| 172 | + )} |
172 | 173 | </div>
|
173 |
| - )} |
174 |
| - </div> |
175 |
| - ); |
| 174 | + ); |
176 | 175 | }
|
0 commit comments