88 lines
2.6 KiB
React
88 lines
2.6 KiB
React
import React, { useState } from "react";
|
|
|
|
import PaginatedList from "../../Pagination/PaginatedList";
|
|
import { handlePagingFunc } from "../../Pagination/HandlePagination";
|
|
|
|
function RecentActivityTable({ payment }) {
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
const indexOfFirstItem = Number(currentPage);
|
|
const indexOfLastItem =
|
|
Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE);
|
|
const currentActivity = payment?.data?.slice(
|
|
indexOfFirstItem,
|
|
indexOfLastItem
|
|
);
|
|
|
|
const handlePagination = (e) => {
|
|
handlePagingFunc(e, setCurrentPage);
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col justify-between overflow-y-auto">
|
|
<table className="wallet-activity w-full table-auto border-collapse text-left">
|
|
<thead className="border-b-2">
|
|
<tr className="text-slate-600">
|
|
<th className="p-2">Date</th>
|
|
<th className="p-4">Trx.</th>
|
|
<th className="p-2">Amnt./Fee</th>
|
|
<th className="p-2">Status</th>
|
|
</tr>
|
|
</thead>
|
|
{payment?.data?.length > 0 ? (
|
|
<tbody>
|
|
{currentActivity.map((item, index) => (
|
|
<tr key={index} className="text-slate-500">
|
|
<td className="p-2">{item.trx_date}</td>
|
|
<td
|
|
className="p-4"
|
|
dangerouslySetInnerHTML={{ __html: item.recipient }}
|
|
></td>
|
|
<td className="p-2">
|
|
{item.amount}
|
|
<br />
|
|
{item.fee}
|
|
</td>
|
|
<td className="p-2">{item.status}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
) : payment?.error ? (
|
|
<tbody>
|
|
<tr className="text-slate-500">
|
|
<td className="p-2" colSpan={4}>
|
|
Opps! an error occurred. Please try again!
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
) : (
|
|
<tbody>
|
|
<tr className="text-slate-500">
|
|
<td className="p-2" colSpan={4}>
|
|
No Payment History Found!
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
)}
|
|
</table>
|
|
|
|
{/* PAGINATION BUTTON */}
|
|
<PaginatedList
|
|
onClick={handlePagination}
|
|
prev={currentPage == 0 ? true : false}
|
|
next={
|
|
currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
|
|
payment?.data?.length
|
|
? true
|
|
: false
|
|
}
|
|
data={payment?.data}
|
|
start={indexOfFirstItem}
|
|
stop={indexOfLastItem}
|
|
/>
|
|
{/* END OF PAGINATION BUTTON */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default RecentActivityTable;
|