diff --git a/src/components/MyCoupons/CouponPopup.jsx b/src/components/MyCoupons/CouponPopup.jsx index 4c34f50..ac6cfd8 100644 --- a/src/components/MyCoupons/CouponPopup.jsx +++ b/src/components/MyCoupons/CouponPopup.jsx @@ -1,10 +1,17 @@ import { useMemo, useState } from "react"; -import { toast } from "react-toastify"; import usersService from "../../services/UsersService"; +import { useDispatch } from "react-redux"; +import { tableReload } from "../../store/TableReloads"; const CouponPopup = ({ popUpHandler, data }) => { const [loader, setLoader] = useState(false); const apiCall = useMemo(() => new usersService(), []); + const [statusMsg, setStatusMsg] = useState({ + success: "", + error: "", + }); + + const dispatch = useDispatch(); const redeemCouponHandler = async () => { setLoader(true); @@ -14,28 +21,34 @@ const CouponPopup = ({ popUpHandler, data }) => { const reqData = { code_id: Number(coupon_id), code }; const res = await apiCall.getCouponRedeem(reqData); - if (res.statusText === "OK") { - toast.success("Great news! Your coupon has been redeemed.", { - autoClose: 3000, - hideProgressBar: true, - }); - } + if (res.data?.internal_return < 0) + setStatusMsg({ error: "An error occurred" }); + else setStatusMsg({ success: res.data?.status_text }); + + dispatch(tableReload({ type: "COUPONTABLE" })); setTimeout(() => { popUpHandler(); setLoader(false); - }, 3000); - throw new Response(res); + }, 10000); } catch (error) { - // error && - // toast.warn("An error occurred while processing your coupon.", { - // autoClose: 3000, - // hideProgressBar: true, - // }); setLoader(false); - console.log(error); - return; - // throw new Error(error); + if (error?.status !== 200) + setStatusMsg({ + error: { + status: true, + msg: + error?.statusText !== "" + ? error?.statusText + : "An error occurred", + }, + }); + throw new Error(error); + } finally { + setStatusMsg({ + success: "", + error: "", + }); } }; @@ -77,9 +90,8 @@ const CouponPopup = ({ popUpHandler, data }) => { Amount: -
{`${data?.amount} Naira`}
+
{data?.thePrice}
-
+ {statusMsg.success && ( +

{statusMsg.success}

+ )} + {statusMsg.error && ( +

{statusMsg.error}

+ )}
diff --git a/src/components/MyCoupons/CouponTable.jsx b/src/components/MyCoupons/CouponTable.jsx index 1891369..73bc1f0 100644 --- a/src/components/MyCoupons/CouponTable.jsx +++ b/src/components/MyCoupons/CouponTable.jsx @@ -4,6 +4,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination"; import ModalCom from "../Helpers/ModalCom"; import CouponPopup from "./CouponPopup"; import { useNavigate } from "react-router-dom"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; function CouponTable({ coupon }) { const [currentPage, setCurrentPage] = useState(0); @@ -38,12 +39,18 @@ function CouponTable({ coupon }) { {coupon.data.length ? ( - {currentCoupon.map((item, index) => ( + {currentCoupon.map((item, index) => { + let thePrice = PriceFormatter( + item?.amount * 0.01, + item?.currency_code, + item?.currency + ); + return( {item.added}
{item.code} - {`${item.amount} Naira`} + {thePrice} - ))} + )})} ) : coupon.error ? ( diff --git a/src/components/MyCoupons/MyCoupons.jsx b/src/components/MyCoupons/MyCoupons.jsx index bf98567..a43cc7e 100644 --- a/src/components/MyCoupons/MyCoupons.jsx +++ b/src/components/MyCoupons/MyCoupons.jsx @@ -1,11 +1,13 @@ -import React, { useEffect, useState } from "react"; +import React, { useCallback, useEffect, useMemo, useState } from "react"; import Layout from "../Partials/Layout"; import LoadingSpinner from "../Spinners/LoadingSpinner"; import CouponTable from "./CouponTable"; import usersService from "../../services/UsersService"; +import { useSelector } from "react-redux"; export default function MyCoupons() { - const apiCall = new usersService(); + const apiCall = useMemo(() => new usersService(), []); + const {couponTable} = useSelector(state => state.tableReload) let [couponHistory, setCouponHistory] = useState({ // FOR COUPON HISTORY loading: true, @@ -14,7 +16,7 @@ export default function MyCoupons() { }); //FUNCTION TO GET COUPON HISTORY - const getCouponHistory = () => { + const getCouponHistory = useCallback(() => { apiCall .getCouponPending() .then((res) => { @@ -32,11 +34,11 @@ export default function MyCoupons() { .catch((error) => { setCouponHistory((prev) => ({ ...prev, loading: false, error: true })); }); - }; + }, [apiCall]); useEffect(() => { getCouponHistory(); - }, []); + }, [couponTable]); return ( <> @@ -59,7 +61,7 @@ export default function MyCoupons() {
) : ( - + )} diff --git a/src/components/MyJobs/MyJobTable.jsx b/src/components/MyJobs/MyJobTable.jsx index d6ad737..be596aa 100644 --- a/src/components/MyJobs/MyJobTable.jsx +++ b/src/components/MyJobs/MyJobTable.jsx @@ -11,6 +11,7 @@ import usersService from "../../services/UsersService"; import { handlePagingFunc } from "../Pagination/HandlePagination"; import PaginatedList from "../Pagination/PaginatedList"; import EditJobPopOut from "../jobPopout/EditJobPopout"; +import { PriceFormatter } from "../Helpers/PriceFormatter"; export default function MyJobTable({ MyJobList, reloadJobList, className }) { const [myCountry, setCountries] = useState(""); @@ -101,9 +102,15 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { {selectedCategory === "All Categories" ? ( <> {MyJobList && - MyJobList?.data?.result_list && - MyJobList.data?.result_list.length > 0 ? - currentJobList.map((value, index) => ( + MyJobList?.data?.result_list && + MyJobList.data?.result_list.length > 0 ? ( + currentJobList.map((value, index) => { + let thePrice = PriceFormatter( + value?.price * 0.01, + value?.currency_code, + value?.currency + ); + return( Price:{" "} - {value.price * 0.01} + {thePrice} @@ -181,14 +188,12 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) { - )) - : + )}) + ) : ( - - No Jobs Avaliable! - + No Jobs Avaliable! - } + )} ) : selectedCategory === "Explore" ? ( <> diff --git a/src/components/MyJobs/index.jsx b/src/components/MyJobs/index.jsx index 4877726..c209b30 100644 --- a/src/components/MyJobs/index.jsx +++ b/src/components/MyJobs/index.jsx @@ -9,12 +9,10 @@ export default function MyJobs(props) { const filterHandler = (value) => { setValue(value); }; - + return ( - +
{/* heading */} @@ -42,11 +40,9 @@ export default function MyJobs(props) { >
- +
); -} +} \ No newline at end of file diff --git a/src/components/MyWallet/WalletComponent/CouponTable.jsx b/src/components/MyWallet/WalletComponent/CouponTable.jsx index b495dc0..6707059 100644 --- a/src/components/MyWallet/WalletComponent/CouponTable.jsx +++ b/src/components/MyWallet/WalletComponent/CouponTable.jsx @@ -1,66 +1,85 @@ -import React, {useState} from 'react' +import React, { useState } from "react"; -import PaginatedList from '../../Pagination/PaginatedList' -import { handlePagingFunc } from '../../Pagination/HandlePagination'; +import PaginatedList from "../../Pagination/PaginatedList"; +import { handlePagingFunc } from "../../Pagination/HandlePagination"; +import { PriceFormatter } from "../../Helpers/PriceFormatter"; -function CouponTable({coupon}) { +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 [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) - } + const handlePagination = (e) => { + handlePagingFunc(e, setCurrentPage); + }; return ( -
- - - +
+
+ + - + - {coupon.data.length ? - ( - - {currentCoupon.map((item, index) => ( - - - - - + {coupon.data.length ? ( + + {currentCoupon.map((item, index) => { + let thePrice = PriceFormatter( + item?.price * 0.01, + item?.currency_code, + item?.currency + ); + return ( + + + + + + + ); + })} + + ) : coupon.error ? ( + + + - ))} - - ) - : - coupon.error ? - ( - - - + + ) : ( + + + - - ) - : - - - - - - } -
Date Description Amount Active
{item.added}{item.code}{item.amount}{item.status}
{item.added}{item.code}{item.amount}{item.status}
+ Opps! an error occurred. Please try again! +
Opps! an error occurred. Please try again!
+ No Purchase History Found! +
No Purchase History Found!
+ + )} + - {/* PAGINATION BUTTON */} - = coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} /> - {/* END OF PAGINATION BUTTON */} + {/* PAGINATION BUTTON */} + = + coupon?.data?.length + ? true + : false + } + data={coupon?.data} + start={indexOfFirstItem} + stop={indexOfLastItem} + /> + {/* END OF PAGINATION BUTTON */}
- ) + ); } -export default CouponTable \ No newline at end of file +export default CouponTable; diff --git a/src/store/TableReloads.js b/src/store/TableReloads.js index 587cb13..592971a 100644 --- a/src/store/TableReloads.js +++ b/src/store/TableReloads.js @@ -4,7 +4,8 @@ const initialState = { jobListTable: false, pendingListTable: false, myTaskTable: false, - othersInterestedTable: false + othersInterestedTable: false, + couponTable: false }; export const tableReloadSlice = createSlice({ @@ -12,21 +13,24 @@ export const tableReloadSlice = createSlice({ initialState, reducers: { tableReload: (state, action) => { - switch(action.payload.type){ - case 'JOBTABLE': + switch (action.payload.type) { + case "JOBTABLE": state.jobListTable = !state.jobListTable; - return - case 'PENDINGTABLE' : + return; + case "PENDINGTABLE": state.pendingListTable = !state.pendingListTable; - return - case 'MYTASKTABLE' : + return; + case "MYTASKTABLE": state.myTaskTable = !state.myTaskTable; - return - case 'OTHERSINTERESTEDTABLE' : + return; + case "OTHERSINTERESTEDTABLE": state.othersInterestedTable = !state.othersInterestedTable; - return + return; + case "COUPONTABLE": + state.couponTable = !state.couponTable; + return; default: - return state + return state; } }, }, @@ -34,4 +38,4 @@ export const tableReloadSlice = createSlice({ export const { tableReload } = tableReloadSlice.actions; -export default tableReloadSlice.reducer; \ No newline at end of file +export default tableReloadSlice.reducer; diff --git a/src/views/MyJobsPage.jsx b/src/views/MyJobsPage.jsx index d98adb4..14b5195 100644 --- a/src/views/MyJobsPage.jsx +++ b/src/views/MyJobsPage.jsx @@ -1,41 +1,16 @@ -//import React from "react"; -import React, { useContext, useState, useEffect } from "react"; -// import MyTasks from "../components/MyTasks"; -// import UsersService from "../services/UsersService"; -import usersService from "../services/UsersService"; import MyJobs from "../components/MyJobs"; import { useSelector } from "react-redux"; export default function MyJobsPage() { - let {commonHeadBanner} = useSelector(state => state.commonHeadBanner) + let { commonHeadBanner } = useSelector((state) => state.commonHeadBanner); + const { userJobList } = useSelector((state) => state.userJobList); - const {userJobList} = useSelector((state) => state.userJobList) - - // const { jobListTable } = useSelector((state) => state.tableReload); - // const userApi = new usersService(); - // const activeJobList = userApi.getMyJobList(); - // const [myJobList, setMyJobList] = useState({ loading: true, data: [] }); - // const api = new usersService(); - - // const getMyJobList = async () => { - // setMyJobList({ loading: true, data: [] }); - // try { - // const res = await api.getMyJobList(); - // setMyJobList({ loading: false, data: res.data }); - // // setMyJobList(res.data); - // } catch (error) { - // setMyJobList({ loading: false, data: [] }); - // console.log("Error getting mode"); - // } - // }; - // useEffect(() => { - // getMyJobList(); - // }, [jobListTable]); - - // debugger; return ( <> - + ); }