added history table to history page

2023-05-08 12:52:21 +01:00
parent e201d4726d
commit 4ff53fbfa1
6 changed files with 148 additions and 70 deletions
@@ -0,0 +1,60 @@
+import React, {useState} from 'react'
+
+import PaginatedList from '../../Pagination/PaginatedList';
+import {handlePagingFunc} from '../../Pagination/HandlePagination';
+
+function ReferralTable({history}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentReferral = history?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+  return (
+    <>
+        <table className="referral-list w-full table-auto border-collapse text-left">
+            <thead className='border-b-2'>
+                <tr className='text-slate-600'>
+                <th className="p-3">Added/Name</th>
+                <th className="p-3">Email</th>
+                <th className="p-3">Status</th>
+                </tr>
+            </thead>
+            <tbody>
+                {history.data.length ? 
+                currentReferral.map((item, index) => (
+                    <tr key={index} className='text-slate-500'>
+                        <td className="p-3">{item.added_date} / {item.firstname} {item.lastname}</td>
+                        <td className="p-3">{item.email}</td>
+                        <td className="p-3">{item.status}</td>
+                    </tr>
+                ))
+                :
+                (
+                history.error ?
+                <tr className='text-slate-500'>
+                    <td colSpan={3}>Opps! couldn't get referral history. Try reloading the page</td>
+                </tr>
+                :
+                (
+                <tr className='text-slate-500'>
+                    <td colSpan={3}>No Item Found on referral List</td>
+                </tr>
+                )
+                )
+                }
+            </tbody>
+        </table>
+
+        {/* PAGINATION BUTTON */}
+        <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= history?.data?.length ? true : false} data={history?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+        {/* END OF PAGINATION BUTTON */}
+    </>
+  )
+}
+
+export default ReferralTable