WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

Completed conversion to popup

Browse Source
This commit was merged in pull request #288.
This commit is contained in:
Chukwumdiebube Ojinta
2023-07-10 23:21:59 +01:00
parent d274a5c56a
commit cc22e1a458
10 changed files with 819 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+68 -47
View File
@@ -1,66 +1,87 @@
import React, {useState} from 'react'
import React, { useState } from "react";
import PaginatedList from '../../Pagination/PaginatedList';
import {handlePagingFunc} from '../../Pagination/HandlePagination';
import PaginatedList from "../../Pagination/PaginatedList";
import { handlePagingFunc } from "../../Pagination/HandlePagination";
function RecentActivityTable({payment}) {
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 [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)
}
const handlePagination = (e) => {
handlePagingFunc(e, setCurrentPage);
};
return (
<div className='flex flex-col justify-between min-h-[500px]'>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
<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-4">Trx.</th>
<th className="p-2">Amnt./Fee</th>
<th className="p-2">Status</th>
</tr>
</tr>
</thead>
{payment.data.length ?
(
<tbody>
{payment?.data?.length > 0 ? (
<tbody>
{currentActivity.map((item, index) => (
<tr key={index} className='text-slate-500'>
<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-4"
dangerouslySetInnerHTML={{ __html: item.recipient }}
></td>
<td className="p-2">
{item.amount}
<br />
{item.fee}
</td>
<td className="p-2">{item.status}</td>
</tr>
</tr>
))}
</tbody>
)
:
payment.error ?
(
<tbody>
<tr className='text-slate-500'>
<td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
</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>
</tbody>
) : (
<tbody>
<tr className="text-slate-500">
<td className="p-2" colSpan={4}>
No Payment History Found!
</td>
</tr>
</tbody>
}
</table>
</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 */}
{/* 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
export default RecentActivityTable;