|
+
+
+
+
+
+
+ + Mullican Computer Joy ++ + Owned by Xoeyam + + |
+
+
+
+
+
+
+ 7473 ETH
+
+
+ |
+
+
+
+
+
+
+ 6392.99$
+
+
+ |
+ + + -24.75 (11.5%) + + | ++ + 343 + + | ++ + 2 Hours 1 min 30s + + | ++ + | +
|
+
+
+
+
+
+
+ + Mullican Computer Joy ++ + Owned by Xoeyam + + |
+
+
+
+
+
+
+ 7473 ETH
+
+
+ |
+
+
+
+
+
+
+ 6392.99$
+
+
+ |
+ + + -24.75 (11.5%) + + | ++ + 343 + + | ++ + 2 Hours 1 min 30s + + | ++ + | +
|
+
+
+
+
+
+
+ + 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 }) { |
+ {MyJobList && MyJobList?.result_list &&
@@ -26,9 +40,8 @@ export default function MyActiveJobTable({MyJobList, className }) {
<>
{MyJobList && MyJobList?.result_list &&
MyJobList.result_list.length > 0 &&
- MyJobList.result_list.map((value) => (
- <>
-
+ {/* 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/MyActiveJobs/index.jsx b/src/components/MyActiveJobs/index.jsx
index 83ade22..1fd766e 100644
--- a/src/components/MyActiveJobs/index.jsx
+++ b/src/components/MyActiveJobs/index.jsx
@@ -12,7 +12,7 @@ export default function MyActiveJobs(props) {
console.log("AMEYE LOC1", props.MyJobList);
return (
|
@@ -72,8 +85,6 @@ export default function MyActiveJobTable({MyJobList, className }) {
|
{/* heading */}
diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx
index 8dde2a5..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 &&
| All Jobs | +All Product | . |
|
-
-
-
-
-
-
- - {value.title} --
- {value.description}
-
-
- Price: {value.price*0.01}
-
-
- Duration: {value.timeline_days} day(s)
-
- |
+ currentJobList.map((value, index) => (
+ ||
|
+
+
+
+
+
+
+ + {value.title} ++
+ {value.description}
+
+
+ Price: {value.price*0.01}
+
+
+ Duration: {value.timeline_days} day(s)
+
+ |
- - - | -+ + | + ))} @@ -95,7 +106,12 @@ export default function MyJobTable({MyJobList, className }) { )}
{/* heading */}
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 &&
|
+
+
+
+
+
+
+ + Mullican Computer Joy ++ + Owned by Xoeyam + + |
+
+
+
+
+
+
+ 7473 ETH
+
+
+ |
+
+
+
+
+
+
+ 6392.99$
+
+
+ |
+ + + -24.75 (11.5%) + + | ++ + 343 + + | ++ + 2 Hours 1 min 30s + + | ++ + | +
|
+
+
+
+
+
+
+ + Mullican Computer Joy ++ + Owned by Xoeyam + + |
+
+
+
+
+
+
+ 7473 ETH
+
+
+ |
+
+
+
+
+
+
+ 6392.99$
+
+
+ |
+ + + -24.75 (11.5%) + + | ++ + 343 + + | ++ + 2 Hours 1 min 30s + + | ++ + | +
|
+
+
+
+
+
+
+ + 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 }) { |
-
+
Recent Activity
Activity Report
{payment.loading ? @@ -84,7 +84,7 @@ function Balance({wallet, payment, coupon, purchase}) {
{/* PURCHASE SECTION */}
-
+
Purchases
{purchase.loading ?
-
+
Coupons
{coupon.loading ?
-
+
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}) {
-
);
+
+
+ {/* 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 (
+ <>
+
+ {/* 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 (
+ <>
+
+ {/* 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..bf6a1c5
--- /dev/null
+++ b/src/components/Pagination/PaginatedList.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { createRoutesFromChildren } from 'react-router-dom';
+
+const PaginatedList = ({ onClick, prev, next, data, start, stop }) => {
+
+ if(data.length){
+ return (
+
- {/*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 ( + <>| {item.added} | {item.code} | @@ -41,6 +55,11 @@ function CouponTable({coupon}) {
| {item.added_date} | {item.confirmation} | @@ -41,6 +55,11 @@ function PurchasesTable({purchase}) {
| {item.trx_date} | @@ -41,6 +55,11 @@ function RecentActivityTable({payment}) { |
+ {/* Render pagination buttons */}
+ {!prev &&
+
+ }
+
+ {
+ data.map((item, index)=>{
+ if(index%process.env.REACT_APP_ITEM_PER_PAGE == 0 && index >= start && index <= stop){
+ return (
+
+ )
+ }
+ })
+ }
+
+ {!next &&
+
+ }
+
+ )
+ }else{
+ return null
+ }
+};
+
+export default PaginatedList;
diff --git a/src/components/Partials/RightSideBar.jsx b/src/components/Partials/RightSideBar.jsx
index 15d821e..585dbe6 100644
--- a/src/components/Partials/RightSideBar.jsx
+++ b/src/components/Partials/RightSideBar.jsx
@@ -13,7 +13,6 @@ import LtcIco from "../Helpers/Icons/LtcIco";
import Usdt from "../Helpers/Icons/Usdt";
import SelectBox from "../Helpers/SelectBox";
import { NavLink } from "react-router-dom";
-import SideStatistics from "./SideStatistics";
export default function RightSideBar() {
const filterDatas = ["Last 15 days", "Last Month", "Last 6 month"];
@@ -202,129 +201,129 @@ export default function RightSideBar() {
*/}
- {/*
*/}
- */}
- {/*
*/}
- {/* */}
- {/*
*/}
- {/* */} - {/* Statistics*/} - {/*
*/} - {/**/}
- {/*
*/}
- {/* */}
- {/* */}
- {/* */}
- {/* */}
- {/* */}
- {/* */}
- {/* */}
- {/* */}
- {/*
*/}
- {/* */}
- {/*
*/}
- {/**/}
- {/*
*/}
- {/* */} - {/* Your All Artwork Statistics*/} - {/*
*/} - {/**/}
- {/*
*/}
- {/* - */}
- {/*
- */}
- {/* */}
- {/* */} - {/* */} - {/* Profit :*/} - {/* */} - {/* */} - {/* /!* don't change variable only change state *!/*/} - {/* {filterDataSet[0]}%*/} - {/* */} - {/**/} - {/* */}
- {/*
- */}
- {/* */}
- {/* */} - {/* */} - {/* Total Sold :*/} - {/* */} - {/* */} - {/* /!* don't change variable only change state *!/*/} - {/* {filterDataSet[1]}%*/} - {/* */} - {/**/} - {/* */}
- {/*
- */}
- {/* */}
- {/* */} - {/* */} - {/* Total Sold :*/} - {/* */} - {/* */} - {/* /!* don't change variable only change state *!/*/} - {/* {filterDataSet[2]}%*/} - {/* */} - {/**/} - {/* */}
- {/*
- */}
- {/* */}
- {/* */} - {/* */} - {/* Total Sold :*/} - {/* */} - {/* */} - {/* /!* don't change variable only change state *!/*/} - {/* {filterDataSet[3]}%*/} - {/* */} - {/**/} - {/* */}
- {/*
+
+
+
+
+
+ + Statistics +
+
+
+
+
+
+
+
+
+
+
+
+ + Your All Artwork Statistics +
+
+
+ -
+
-
+
+ + + Profit : + + + {/* don't change variable only change state */} + {filterDataSet[0]}% + ++
+
-
+
+ + + Total Sold : + + + {/* don't change variable only change state */} + {filterDataSet[1]}% + ++
+
-
+
+ + + Total Sold : + + + {/* don't change variable only change state */} + {filterDataSet[2]}% + ++
+
-
+
+ + + Total Sold : + + + {/* don't change variable only change state */} + {filterDataSet[3]}% + ++
+