diff --git a/.env b/.env index 9cf6e84..3efdd7a 100644 --- a/.env +++ b/.env @@ -28,5 +28,8 @@ REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X # Had to change the error time to 3sec cause it took too long REACT_APP_RESET_START_ERROR_TIMEOUT=3000 +#NUMBER OF ITEMS PER PAGE +REACT_APP_ITEM_PER_PAGE=5 + #apigate.lotus.g1.wrenchboard.com:76.209.103.227 #apigate.orion.g1.wrenchboard.com:76.209.103.227 diff --git a/.env.development b/.env.development index 9cf6e84..3efdd7a 100644 --- a/.env.development +++ b/.env.development @@ -28,5 +28,8 @@ REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X # Had to change the error time to 3sec cause it took too long REACT_APP_RESET_START_ERROR_TIMEOUT=3000 +#NUMBER OF ITEMS PER PAGE +REACT_APP_ITEM_PER_PAGE=5 + #apigate.lotus.g1.wrenchboard.com:76.209.103.227 #apigate.orion.g1.wrenchboard.com:76.209.103.227 diff --git a/.env.poduction b/.env.poduction index e20588e..6d4177b 100644 --- a/.env.poduction +++ b/.env.poduction @@ -28,5 +28,8 @@ REACT_APP_FLUTTERWAVE_APIKEY=FLWPUBK_TEST-54c90141b028789d671067bd72f781a9-X # Had to change the error time to 3sec cause it took too long REACT_APP_RESET_START_ERROR_TIMEOUT=3000 +#NUMBER OF ITEMS PER PAGE +REACT_APP_ITEM_PER_PAGE=5 + #apigate.orion.g1.wrenchboard.com:76.209.103.227 #apigate.orion.g1.wrenchboard.com:76.209.103.227 diff --git a/src/components/History/HistoryTable.jsx b/src/components/History/HistoryTable.jsx index 7a203f9..b4642b2 100644 --- a/src/components/History/HistoryTable.jsx +++ b/src/components/History/HistoryTable.jsx @@ -5,9 +5,24 @@ import dataImage3 from "../../assets/images/data-table-user-3.png"; import dataImage4 from "../../assets/images/data-table-user-4.png"; import SelectBox from "../Helpers/SelectBox"; +import PaginatedList from "../Pagination/PaginatedList"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; + export default function HistoryTable({ className }) { const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); + + let data = ['1', '2', '3', '4', '5', '6'] // to be replaced later by result from API CALL + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentTask = data.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => { + handlePagingFunc(e,setCurrentPage) + } + return (
+ {data.length &&
@@ -41,6 +57,395 @@ export default function HistoryTable({ className }) { {selectedCategory === "All Categories" ? ( + currentTask.map((item,index)=>( + + + + + + + + + + )) + ) : selectedCategory === "Explore" ? ( + currentTask.map((item,index)=>( + + + + + + + + + + )) + ) : ( + currentTask.map((item,index)=>( + + + + + + + + + + )) + )} + + {/* {selectedCategory === "All Categories" ? ( <> - )} + )} */}
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
@@ -1057,10 +1462,15 @@ export default function HistoryTable({ className }) {
+ + {/* PAGINATION BUTTON */} + = data.length ? true : false} data={data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */}
+ } ); } diff --git a/src/components/MyActiveJobs/MyActiveJobTable.jsx b/src/components/MyActiveJobs/MyActiveJobTable.jsx index a020042..c942f74 100644 --- a/src/components/MyActiveJobs/MyActiveJobTable.jsx +++ b/src/components/MyActiveJobs/MyActiveJobTable.jsx @@ -5,15 +5,29 @@ import dataImage3 from "../../assets/images/data-table-user-3.png"; import dataImage4 from "../../assets/images/data-table-user-4.png"; import SelectBox from "../Helpers/SelectBox"; +import PaginatedList from "../Pagination/PaginatedList"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; + export default function MyActiveJobTable({MyJobList, className }) { const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentActiveJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => { + handlePagingFunc(e,setCurrentPage) + } + return (
+ {MyJobList && MyJobList?.result_list &&
@@ -26,50 +40,47 @@ export default function MyActiveJobTable({MyJobList, className }) { <> {MyJobList && MyJobList?.result_list && MyJobList.result_list.length > 0 && - MyJobList.result_list.map((value) => ( - <> - - + +
+

+ {value.title} +

+
+ {value.description} +
+ + Price: {value.price*0.01} + + + Duration: {value.timeline_days} day(s) + + + Expire: {value.expire} + +
+ + - - - - + + ))} @@ -77,7 +88,11 @@ export default function MyActiveJobTable({MyJobList, className }) { }
-
-
- data -
-
-

- {value.title} -

-
- {value.description} -
- - Price: {value.price*0.01} - - - Duration: {value.timeline_days} day(s) - - - Expire: {value.expire} - -
+ currentActiveJobList.map((value, index) => ( +
+
+
+ data
-
- -
+ +
+ {/* PAGINATION BUTTON */} + = MyJobList?.result_list.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */}
+ }
); } diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index 97cfe82..3e3effc 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -5,9 +5,22 @@ import dataImage3 from "../../assets/images/data-table-user-3.png"; import dataImage4 from "../../assets/images/data-table-user-4.png"; import SelectBox from "../Helpers/SelectBox"; +import PaginatedList from "../Pagination/PaginatedList"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; + export default function MyJobTable({MyJobList, className }) { const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentJobList = MyJobList?.result_list?.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => { + handlePagingFunc(e,setCurrentPage) + } + return (
+ {MyJobList && MyJobList?.result_list &&
@@ -39,47 +53,44 @@ export default function MyJobTable({MyJobList, className }) { <> {MyJobList && MyJobList?.result_list && MyJobList.result_list.length > 0 && - MyJobList.result_list.map((value) => ( - <> - - + currentJobList.map((value, index) => ( + + - - - - + + ))} @@ -95,7 +106,12 @@ export default function MyJobTable({MyJobList, className }) { )}
-
-
- data -
-
-

- {value.title} -

-
- {value.description} -
- - Price: {value.price*0.01} - - - Duration: {value.timeline_days} day(s) - -
-
-
+
+
+ data +
+
+

+ {value.title} +

+
+ {value.description} +
+ + Price: {value.price*0.01} + + + Duration: {value.timeline_days} day(s) + +
+
+ 		- -
+ +
+ + {/* PAGINATION BUTTON */} + = MyJobList?.result_list?.length ? true : false} data={MyJobList?.result_list} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */}
+ } ); } diff --git a/src/components/MyTasks/MyJobTable.jsx b/src/components/MyTasks/MyJobTable.jsx index 3942b42..b5979a5 100644 --- a/src/components/MyTasks/MyJobTable.jsx +++ b/src/components/MyTasks/MyJobTable.jsx @@ -5,9 +5,24 @@ import dataImage3 from "../../assets/images/data-table-user-3.png"; import dataImage4 from "../../assets/images/data-table-user-4.png"; import SelectBox from "../Helpers/SelectBox"; +import PaginatedList from "../Pagination/PaginatedList"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; + export default function MyJobTable({ className }) { const filterCategories = ["All Categories", "Explore", "Featured"]; const [selectedCategory, setCategory] = useState(filterCategories[0]); + + let data = ['1', '2', '3', '4', '5', '6'] // to be replaced later by result from API CALL + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentTask = data.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => { + handlePagingFunc(e,setCurrentPage) + } + return (
+ {data.length &&
@@ -41,6 +57,395 @@ export default function MyJobTable({ className }) { {selectedCategory === "All Categories" ? ( + currentTask.map((item,index)=>( + + + + + + + + + + )) + ) : selectedCategory === "Explore" ? ( + currentTask.map((item,index)=>( + + + + + + + + + + )) + ) : ( + currentTask.map((item,index)=>( + + + + + + + + + + )) + )} + + {/* {selectedCategory === "All Categories" ? ( <> - )} + )} */}
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
+
+
+ data +
+
+

+ Mullican Computer Joy +

+ + Owned by Xoeyam + +
+
+ 		+
+ + + + + + + + + + + + + 7473 ETH + +
+ 		+
+ + + + + + + + + + 6392.99$ + +
+ 		+ + -24.75 (11.5%) + + + + 343 + + + + 2 Hours 1 min 30s + + + +
@@ -1057,10 +1462,15 @@ export default function MyJobTable({ className }) {
+ + {/* PAGINATION BUTTON */} + = data.length ? true : false} data={data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */}
+ } ); } diff --git a/src/components/MyWallet/Balance.jsx b/src/components/MyWallet/Balance.jsx index a8d3682..8270b2f 100644 --- a/src/components/MyWallet/Balance.jsx +++ b/src/components/MyWallet/Balance.jsx @@ -67,7 +67,7 @@ function Balance({wallet, payment, coupon, purchase}) { {/* RECENT ACTIVITY SECTION */}
-
+

Recent Activity

Activity Report

{payment.loading ? @@ -84,7 +84,7 @@ function Balance({wallet, payment, coupon, purchase}) {
{/* PURCHASE SECTION */}
-
+

Purchases

{purchase.loading ? @@ -97,7 +97,7 @@ function Balance({wallet, payment, coupon, purchase}) { {/* COUPON SECTION */}
-
+

Coupons

{coupon.loading ? diff --git a/src/components/MyWallet/ConfirmTransfer.jsx b/src/components/MyWallet/ConfirmTransfer.jsx index f125bdd..5363634 100644 --- a/src/components/MyWallet/ConfirmTransfer.jsx +++ b/src/components/MyWallet/ConfirmTransfer.jsx @@ -151,7 +151,7 @@ function ConfirmTransfer({payment, wallet}) { }
-
+

Recent Activity

Activity Report

{payment.loading ? diff --git a/src/components/MyWallet/TransferFund.jsx b/src/components/MyWallet/TransferFund.jsx index 0e32309..551911e 100644 --- a/src/components/MyWallet/TransferFund.jsx +++ b/src/components/MyWallet/TransferFund.jsx @@ -223,7 +223,7 @@ function TransferFund({payment, wallet}) {
-
+

Recent Activity

Activity Report

{payment.loading ? diff --git a/src/components/MyWallet/WalletComponent/CouponTable.jsx b/src/components/MyWallet/WalletComponent/CouponTable.jsx index 29a695c..5993df3 100644 --- a/src/components/MyWallet/WalletComponent/CouponTable.jsx +++ b/src/components/MyWallet/WalletComponent/CouponTable.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 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 ( + <> @@ -14,7 +28,7 @@ function CouponTable({coupon}) { {coupon.data.length ? ( - {coupon.data.map((item, index) => ( + {currentCoupon.map((item, index) => ( @@ -41,6 +55,11 @@ function CouponTable({coupon}) { }
{item.added} {item.code}
+ + {/* PAGINATION BUTTON */} + = coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */} + ) } diff --git a/src/components/MyWallet/WalletComponent/PurchasesTable.jsx b/src/components/MyWallet/WalletComponent/PurchasesTable.jsx index 20202ae..6c23ce7 100644 --- a/src/components/MyWallet/WalletComponent/PurchasesTable.jsx +++ b/src/components/MyWallet/WalletComponent/PurchasesTable.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 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 ( + <> @@ -14,7 +28,7 @@ function PurchasesTable({purchase}) { {purchase.data.length ? ( - {purchase.data.map((item, index) => ( + {currentPurchase.map((item, index) => ( @@ -41,6 +55,11 @@ function PurchasesTable({purchase}) { }
{item.added_date} {item.confirmation}
+ + {/* PAGINATION BUTTON */} + = purchase?.data?.length ? true : false} data={purchase?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */} + ) } diff --git a/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx b/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx index 841002d..32067a2 100644 --- a/src/components/MyWallet/WalletComponent/RecentActivityTable.jsx +++ b/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 ( + <> @@ -14,7 +28,7 @@ function RecentActivityTable({payment}) { {payment.data.length ? ( - {payment.data.map((item, index) => ( + {currentActivity.map((item, index) => ( @@ -41,6 +55,11 @@ function RecentActivityTable({payment}) { }
{item.trx_date}
+ + {/* PAGINATION BUTTON */} + = payment?.data?.length ? true : false} data={payment?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> + {/* END OF PAGINATION BUTTON */} + ) } diff --git a/src/components/Pagination/HandlePagination.jsx b/src/components/Pagination/HandlePagination.jsx new file mode 100644 index 0000000..967ca37 --- /dev/null +++ b/src/components/Pagination/HandlePagination.jsx @@ -0,0 +1,17 @@ + + +export const handlePagingFunc = ({target:{name, value}},setCurrentPage) => { + if(name == 'prev'){ + setCurrentPage((prev)=>{ + return prev-Number(process.env.REACT_APP_ITEM_PER_PAGE) + }) + } + if(name == 'next'){ + setCurrentPage((prev)=>{ + return prev+Number(process.env.REACT_APP_ITEM_PER_PAGE) + }) + } + if(name == 'page_num'){ + setCurrentPage(Number(value)) + } + } \ No newline at end of file diff --git a/src/components/Pagination/PaginatedList.jsx b/src/components/Pagination/PaginatedList.jsx new file mode 100644 index 0000000..0df5553 --- /dev/null +++ b/src/components/Pagination/PaginatedList.jsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { createRoutesFromChildren } from 'react-router-dom'; + +const PaginatedList = ({ onClick, prev, next, data, start, stop }) => { + + return ( +
+ {/* Render pagination buttons */} + {!prev && + + } + + { + data.map((item, index)=>{ + if(index%process.env.REACT_APP_ITEM_PER_PAGE == 0 && index >= start && index <= stop){ + return ( + + ) + } + }) + } + + {!next && + + } +
+ ); +}; + +export default PaginatedList;