diff --git a/src/components/Settings/Tabs/CardList.jsx b/src/components/Settings/Tabs/CardList.jsx new file mode 100644 index 0000000..c08ca0f --- /dev/null +++ b/src/components/Settings/Tabs/CardList.jsx @@ -0,0 +1,91 @@ +import React, {useEffect, useState} from 'react' +import method1 from "../../../assets/images/payment-method-1.png"; +import LoadingSpinner from '../../Spinners/LoadingSpinner'; +import usersService from "../../../services/UsersService"; +import { handlePagingFunc } from '../../Pagination'; +import PaginatedList from '../../Pagination/PaginatedList'; + +function CardList() { + const api = new usersService(); + const [cardList, setCardList] = useState({loading: true, data: []}) + + const [currentPage, setCurrentPage] = useState(0); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentCardList = cardList?.data?.slice(indexOfFirstItem, indexOfLastItem); + + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; + + useEffect(()=>{ + api.payListCard().then(res=>{ + setCardList({loading: false, data:res.data?.result_list}) + }).catch(err => { + setCardList({loading: false, data:[]}) + console.log('ERROR', err) + }) + },[]) + return ( +
+ + + {/* PAGINATION BUTTON */} + = + cardList?.data?.length + ? true + : false + } + data={cardList?.data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} +
+ ) +} + +export default CardList \ No newline at end of file diff --git a/src/components/Settings/Tabs/PaymentMathodsTab.jsx b/src/components/Settings/Tabs/PaymentMathodsTab.jsx index 2e34a82..540aa2d 100644 --- a/src/components/Settings/Tabs/PaymentMathodsTab.jsx +++ b/src/components/Settings/Tabs/PaymentMathodsTab.jsx @@ -1,120 +1,17 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import method1 from "../../../assets/images/payment-method-1.png"; import method2 from "../../../assets/images/payment-method-2.png"; import method3 from "../../../assets/images/payment-method-3.png"; import method4 from "../../../assets/images/payment-method-4.png"; +import CardList from "./CardList"; + export default function PaymentMathodsTab() { return ( <>
- +