list pagination implemented

src/components/MyWallet/WalletComponent/RecentActivityTable.jsx

@@ -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 */}
+    </>
   )
 }