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

list pagination implemented

Browse Source
This commit is contained in:
victorAnumudu
2023-05-07 18:42:39 +01:00
parent 26258b0700
commit c17f933537
15 changed files with 1078 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MyWallet/Balance.jsx
+3 -3
View File
@@ -67,7 +67,7 @@ function Balance({wallet, payment, coupon, purchase}) {
{/* RECENT ACTIVITY SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[300px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
{payment.loading ?
@@ -84,7 +84,7 @@ function Balance({wallet, payment, coupon, purchase}) {
<div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
{/* PURCHASE SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[200px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Purchases</h2>
{purchase.loading ?
<LoadingSpinner size='16' color='sky-blue' />
@@ -97,7 +97,7 @@ function Balance({wallet, payment, coupon, purchase}) {
{/* COUPON SECTION */}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[200px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Coupons</h2>
{coupon.loading ?
<LoadingSpinner size='16' color='sky-blue' />
src/components/MyWallet/ConfirmTransfer.jsx
+1 -1
View File
@@ -151,7 +151,7 @@ function ConfirmTransfer({payment, wallet}) {
}
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<div className="wallet w-full px-4 md:px-8 py-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-gray-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-gray-600 dark:text-white'>Activity Report</p>
{payment.loading ?
src/components/MyWallet/TransferFund.jsx
+1 -1
View File
@@ -223,7 +223,7 @@ function TransferFund({payment, wallet}) {
</div>
<div className="lg:w-1/2 w-full mb-10 lg:mb-0">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[800px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<div className="wallet w-full md:p-8 p-4 h-full max-h-[600px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
<h2 className='text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Recent Activity</h2>
<p className='text-base text-slate-500 dark:text-white'>Activity Report</p>
{payment.loading ?
src/components/MyWallet/WalletComponent/CouponTable.jsx
+21 -2
View File
@@ -1,7 +1,21 @@
import React from 'react'
import React, {useState} from 'react'
import PaginatedList from '../../Pagination/PaginatedList'
import { handlePagingFunc } from '../../Pagination/HandlePagination';
function CouponTable({coupon}) {
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
}
return (
<>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
@@ -14,7 +28,7 @@ function CouponTable({coupon}) {
{coupon.data.length ?
(
<tbody>
{coupon.data.map((item, index) => (
{currentCoupon.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-2">{item.added}</td>
<td className="p-2">{item.code}</td>
@@ -41,6 +55,11 @@ function CouponTable({coupon}) {
</tbody>
}
</table>
{/* PAGINATION BUTTON */}
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
{/* END OF PAGINATION BUTTON */}
</>
)
}
src/components/MyWallet/WalletComponent/PurchasesTable.jsx
+21 -2
View File
@@ -1,7 +1,21 @@
import React from 'react'
import React, {useState} from 'react'
import PaginatedList from '../../Pagination/PaginatedList';
import { handlePagingFunc } from '../../Pagination/HandlePagination';
function PurchasesTable({purchase}) {
const [currentPage, setCurrentPage] = useState(0);
const indexOfFirstItem = Number(currentPage);
const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
const currentPurchase = purchase?.data?.slice(indexOfFirstItem, indexOfLastItem);
const handlePagination = (e) => {
handlePagingFunc(e,setCurrentPage)
}
return (
<>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
@@ -14,7 +28,7 @@ function PurchasesTable({purchase}) {
{purchase.data.length ?
(
<tbody>
{purchase.data.map((item, index) => (
{currentPurchase.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-2">{item.added_date}</td>
<td className="p-2">{item.confirmation}</td>
@@ -41,6 +55,11 @@ function PurchasesTable({purchase}) {
</tbody>
}
</table>
{/* PAGINATION BUTTON */}
<PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
{/* END OF PAGINATION BUTTON */}
</>
)
}
src/components/MyWallet/WalletComponent/RecentActivityTable.jsx
+21 -2
View File
@@ -1,7 +1,21 @@
import React from '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 (
<>
<table className="wallet-activity w-full table-auto border-collapse text-left">
<thead className='border-b-2'>
<tr className='text-slate-600'>
@@ -14,7 +28,7 @@ function RecentActivityTable({payment}) {
{payment.data.length ?
(
<tbody>
{payment.data.map((item, index) => (
{currentActivity.map((item, index) => (
<tr key={index} className='text-slate-500'>
<td className="p-2">{item.trx_date}</td>
<td className="p-2" dangerouslySetInnerHTML={{__html:item.recipient}}></td>
@@ -41,6 +55,11 @@ function RecentActivityTable({payment}) {
</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 */}
</>
)
}