From 7666d78c0bbbe0561197f108609a35e02cd61354 Mon Sep 17 00:00:00 2001 From: Ebube Date: Mon, 12 Jun 2023 22:20:41 +0100 Subject: [PATCH] . --- src/components/MyCoupons/CouponPopup.jsx | 96 ++++++++++++ src/components/MyCoupons/CouponTable.jsx | 163 +++++++++++++------- src/components/MyCoupons/MyCoupons.jsx | 123 ++++++++------- src/components/Pagination/PaginatedList.jsx | 92 +++++------ src/index.css | 8 +- src/views/MyCouponPage.jsx | 12 +- 6 files changed, 321 insertions(+), 173 deletions(-) create mode 100644 src/components/MyCoupons/CouponPopup.jsx diff --git a/src/components/MyCoupons/CouponPopup.jsx b/src/components/MyCoupons/CouponPopup.jsx new file mode 100644 index 0000000..e247a68 --- /dev/null +++ b/src/components/MyCoupons/CouponPopup.jsx @@ -0,0 +1,96 @@ + + +const CouponPopup = ({ popUpHandler, data }) => { + return ( +
+
+

+ Redeem Coupon +

+ +
+
+
+ {/* Coupon */} +
+ +
+
{data?.code}
+
+ +
+ {/* Amount */} +
+ +
+
{`${data?.amount} Naira`}
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+ ); +}; + +export default CouponPopup; + +const CloseIcon = () => ( + + + + +); diff --git a/src/components/MyCoupons/CouponTable.jsx b/src/components/MyCoupons/CouponTable.jsx index c8b318b..1891369 100644 --- a/src/components/MyCoupons/CouponTable.jsx +++ b/src/components/MyCoupons/CouponTable.jsx @@ -1,67 +1,110 @@ -import React, {useState} from 'react' +import React, { useEffect, useState } from "react"; +import PaginatedList from "../Pagination/PaginatedList"; +import { handlePagingFunc } from "../Pagination/HandlePagination"; +import ModalCom from "../Helpers/ModalCom"; +import CouponPopup from "./CouponPopup"; +import { useNavigate } from "react-router-dom"; -//import PaginatedList from '../../Pagination/PaginatedList' -import PaginatedList from '../Pagination/PaginatedList'; -import { handlePagingFunc } from '../Pagination/HandlePagination'; +function CouponTable({ coupon }) { + const [currentPage, setCurrentPage] = useState(0); + const [couponPopup, setCouponPopup] = useState({ state: false, data: null }); + const indexOfFirstItem = Number(currentPage); + const indexOfLastItem = + Number(indexOfFirstItem) + Number(process.env.REACT_APP_ITEM_PER_PAGE); + const currentCoupon = coupon?.data?.slice(indexOfFirstItem, indexOfLastItem); -function CouponTable({coupon}) { + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; - 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 navigate = useNavigate(); - const handlePagination = (e) => { - handlePagingFunc(e,setCurrentPage) - } + const handleCouponPopUp = () => + setCouponPopup((prev) => ({ state: !prev.state })); - return ( -
- - - - - {/**/} - {/**/} - - - - {coupon.data.length ? - ( - - {currentCoupon.map((item, index) => ( - - - {/**/} - {/**/} - - - ))} - - ) - : - coupon.error ? - ( - - - - - - ) - : - - - - - - } -
CouponDescriptionAmountStatus
{item.added}
{item.code}
{item.amount}		{item.status}
Opps! an error occurred. Please try again!
No Purchase History Found!
+ useEffect(() => { + if (!coupon) navigate("/my-coupon", { replace: true }); + }, []); - {/* PAGINATION BUTTON */} - = coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> - {/* END OF PAGINATION BUTTON */} -
- ) + return ( +
+ + + + + + + + + {coupon.data.length ? ( + + {currentCoupon.map((item, index) => ( + + + + + + ))} + + ) : coupon.error ? ( + + + + + + ) : ( + + + + + + )} +
CouponAmount
+ {item.added}
{item.code} + 		{`${item.amount} Naira`} + +
+ Opps! an error occurred. Please try again! +
+ No Purchase History Found! +
+ + {/* PAGINATION BUTTON */} + = + coupon?.data?.length + ? true + : false + } + data={coupon?.data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */} + + {couponPopup.state && ( + + + + )} +
+ ); } - -export default CouponTable \ No newline at end of file +export default CouponTable; diff --git a/src/components/MyCoupons/MyCoupons.jsx b/src/components/MyCoupons/MyCoupons.jsx index b5fc7cb..560747f 100644 --- a/src/components/MyCoupons/MyCoupons.jsx +++ b/src/components/MyCoupons/MyCoupons.jsx @@ -1,69 +1,72 @@ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useState } from "react"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import CouponTable from "./CouponTable"; -import usersService from '../../services/UsersService' +import usersService from "../../services/UsersService"; export default function MyCoupons() { - const apiCall = new usersService() - let [couponHistory, setCouponHistory] = useState({ // FOR COUPON HISTORY - loading: true, - data: [], - error: false - }) + const apiCall = new usersService(); + let [couponHistory, setCouponHistory] = useState({ + // FOR COUPON HISTORY + loading: true, + data: [], + error: false, + }); - //FUNCTION TO GET COUPON HISTORY - const getCouponHistory = ()=>{ - apiCall.getCouponHx().then((res)=>{ - if(res.data.internal_return < 0){ // success but no data - setCouponHistory(prev => ({...prev, loading: false})) - return - } - setCouponHistory(prev => ({...prev, loading: false, data: res.data.result_list})) - }).catch((error)=>{ - setCouponHistory(prev => ({...prev, loading: false, error: true})) - }) - } + //FUNCTION TO GET COUPON HISTORY + const getCouponHistory = () => { + apiCall + .getCouponHx() + .then((res) => { + if (res.data.internal_return < 0) { + // success but no data + setCouponHistory((prev) => ({ ...prev, loading: false })); + return; + } + setCouponHistory((prev) => ({ + ...prev, + loading: false, + data: res.data.result_list, + })); + }) + .catch((error) => { + setCouponHistory((prev) => ({ ...prev, loading: false, error: true })); + }); + }; - useEffect(()=>{ - getCouponHistory() - }, []) + useEffect(() => { + getCouponHistory(); + }, []); - return ( - <> - -
- {/* heading */} -
-
-

- - Coupons - -

-
- -
- -
-
-
- - {/* COUPON SECTION */} -
-
- {couponHistory.loading ? - - : - - } -
-
- {/* END OF COUPON SECTION */} - -
-
- - - ); + return ( + <> + +
+ {/* heading */} +
+
+

+ Coupons +

+
+
+
+ {/* COUPON SECTION */} +
+
+ {couponHistory.loading ? ( +
+ +
+ ) : ( + + )} +
+
+ {/* END OF COUPON SECTION */} +
+
+ + + ); } diff --git a/src/components/Pagination/PaginatedList.jsx b/src/components/Pagination/PaginatedList.jsx index 47e9c40..11af0fd 100644 --- a/src/components/Pagination/PaginatedList.jsx +++ b/src/components/Pagination/PaginatedList.jsx @@ -1,54 +1,60 @@ -import React from 'react'; -import { createRoutesFromChildren } from 'react-router-dom'; - const PaginatedList = ({ onClick, prev, next, data, start, stop }) => { - - if(data.length > process.env.REACT_APP_ITEM_PER_PAGE){ + if (data.length > process.env.REACT_APP_ITEM_PER_PAGE) { return ( -
+
{/* Render pagination buttons */} - {!prev && - - } + {!prev && ( + + )} - { - data.map((item, index)=>{ - if(index%process.env.REACT_APP_ITEM_PER_PAGE == 0 && index >= start && index <= stop){ - return ( - - ) - } - }) - } - - {!next && + {data.map((item, index) => { + if ( + index % process.env.REACT_APP_ITEM_PER_PAGE == 0 && + index >= start && + index <= stop + ) { + return ( - } -
- ) - }else{ - return null + ); + } + })} + + {!next && ( + + )} +
+ ); + } else { + return null; } }; diff --git a/src/index.css b/src/index.css index 93c3d14..f4fc442 100644 --- a/src/index.css +++ b/src/index.css @@ -833,19 +833,21 @@ TODO: Responsive =========================== /* Update table scrollbar */ .update-table::-webkit-scrollbar-track, .update-table > *::-webkit-scrollbar-track, -.market-pop::-webkit-scrollbar-track{ +.market-pop::-webkit-scrollbar-track, +.wallet.coupon::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color: transparent; border-radius: 10px; } .update-table::-webkit-scrollbar, .update-table > *::-webkit-scrollbar, -.market-pop::-webkit-scrollbar { +.market-pop::-webkit-scrollbar, +.wallet.coupon::-webkit-scrollbar { width: 10px; background-color: transparent; } -.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb { +.update-table::-webkit-scrollbar-thumb, .update-table > *::-webkit-scrollbar-thumb, .wallet.coupon::-webkit-scrollbar-thumb { border-radius: 10px; border-top-right-radius: 50px; border-bottom-right-radius: 50px; diff --git a/src/views/MyCouponPage.jsx b/src/views/MyCouponPage.jsx index 2e29492..4f09533 100644 --- a/src/views/MyCouponPage.jsx +++ b/src/views/MyCouponPage.jsx @@ -1,11 +1,9 @@ -import React from "react"; -//import WalletRoutes from "../components/MyWallet/Wallet"; import MyCoupons from "../components/MyCoupons/MyCoupons"; export default function MyCouponPage() { - return ( - <> - - - ); + return ( + <> + + + ); }