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);
+      }, 10000);
-      throw new Response(res);
     } catch (error) {
-      // error &&
-      //   toast.warn("An error occurred while processing your coupon.", {
-      //     autoClose: 3000,
-      //     hideProgressBar: true,
-      //   });
       setLoader(false);
-      console.log(error);
+      if (error?.status !== 200)
-      return;
+        setStatusMsg({
-      // throw new Error(error);
+          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:
             </label>
           </div>
-          <div className=" flex-[0.7] max-w-[150px]">{`${data?.amount} Naira`}</div>
+          <div className=" flex-[0.7] max-w-[150px]">{data?.thePrice}</div>
         </div>
-
         <div className="signin-area w-full">
           <div className="flex justify-end">
             <button
@@ -96,6 +108,12 @@ const CouponPopup = ({ popUpHandler, data }) => {
               )}
             </button>
           </div>
+          {statusMsg.success && (
+            <p className="text-sm text-green-500 italic">{statusMsg.success}</p>
+          )}
+          {statusMsg.error && (
+            <p className="text-sm text-red-500 italic">{statusMsg.error}</p>
+          )}
         </div>
       </form>
       <div className="signin-area w-full px-5 py-4">

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 }) {
         </thead>
         {coupon.data.length ? (
           <tbody>
-            {currentCoupon.map((item, index) => (
+            {currentCoupon.map((item, index) => {
+              let thePrice = PriceFormatter(
+                item?.amount * 0.01,
+                item?.currency_code,
+                item?.currency
+              );
+              return(
               <tr key={index} className="text-slate-500">
                 <td className="p-2 cursor-default">
                   {item.added} <br /> {item.code}
                 </td>
-                <td className="p-2 text-center cursor-default">{`${item.amount} Naira`}</td>
+                <td className="p-2 text-center cursor-default">{thePrice}</td>
                 <td className="p-2 h-20 flex items-center justify-end">
                   <button
                     type="button"
@@ -51,7 +58,7 @@ function CouponTable({ coupon }) {
                     onClick={() => {
                       setCouponPopup((prev) => ({
                         state: !prev.state,
-                        data: item,
+                        data: {...item, thePrice},
                       }));
                     }}
                   >
@@ -59,7 +66,7 @@ function CouponTable({ coupon }) {
                   </button>
                 </td>
               </tr>
-            ))}
+            )})}
           </tbody>
         ) : coupon.error ? (
           <tbody>

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 (
     <>

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 &&
-                    MyJobList.data?.result_list.length > 0 ?
+                  MyJobList.data?.result_list.length > 0 ? (
-                    currentJobList.map((value, index) => (
+                    currentJobList.map((value, index) => {
+                      let thePrice = PriceFormatter(
+                        value?.price * 0.01,
+                        value?.currency_code,
+                        value?.currency
+                      );
+                      return(
                       <tr
                         key={index}
                         className="bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29]  hover:bg-gray-50"
@@ -126,7 +133,7 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                                 <span className="text-sm text-thin-light-gray">
                                   Price:{" "}
                                   <span className="text-purple">
-                                    {value.price * 0.01}
+                                    {thePrice}
                                   </span>
                                 </span>
                                 <span className="text-sm text-thin-light-gray">
@@ -181,14 +188,12 @@ export default function MyJobTable({ MyJobList, reloadJobList, className }) {
                           </button>
                         </td>
                       </tr>
-                    ))
+                    )})
-                    :
+                  ) : (
                     <tr className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                      <td className="p-2">
+                      <td className="p-2">No Jobs Avaliable!</td>
-                        No Jobs Avaliable!
-                      </td>
                     </tr>
-                    }
+                  )}
                 </>
               ) : selectedCategory === "Explore" ? (
                 <></>

src/components/MyJobs/index.jsx

@@ -12,9 +12,7 @@ export default function MyJobs(props) {
 
   return (
     <Layout>
-      <CommonHead
+      <CommonHead commonHeadData={props.commonHeadData} />
-          commonHeadData={props.commonHeadData}
-      />
       <div className="notification-page w-full mb-10">
         <div className="notification-wrapper w-full">
           {/* heading */}
@@ -42,9 +40,7 @@ export default function MyJobs(props) {
               ></div>
             </div>
           </div>
-          <MyJobTable
+          <MyJobTable MyJobList={props.MyJobList} />
-              MyJobList={props.MyJobList}
-          />
         </div>
       </div>
     </Layout>

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 PaginatedList from "../../Pagination/PaginatedList";
-import { handlePagingFunc } from '../../Pagination/HandlePagination';
+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 handlePagination = (e) => {
-    const indexOfFirstItem = Number(currentPage);
+    handlePagingFunc(e, setCurrentPage);
-    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 (
-    <div className='flex flex-col justify-between h-full'>
+    <div className="flex flex-col justify-between h-full">
-    <table className="wallet-activity w-full table-auto border-collapse text-left">
+      <table className="wallet-activity w-full table-auto border-collapse text-left">
-        <thead className='border-b-2'>
+        <thead className="border-b-2">
-            <tr className='text-slate-600'>
+          <tr className="text-slate-600">
             <th className="p-2">Date</th>
             <th className="p-2">Description</th>
             <th className="p-2">Amount</th>
             <th className="p-2">Active</th>
-            </tr>
+          </tr>
         </thead>
-        {coupon.data.length ?
+        {coupon.data.length ? (
-        (
+          <tbody>
-        <tbody>
+            {currentCoupon.map((item, index) => {
-            {currentCoupon.map((item, index) => (
+              let thePrice = PriceFormatter(
-            <tr key={index} className='text-slate-500'>
+                item?.price * 0.01,
-                <td className="p-2">{item.added}</td>
+                item?.currency_code,
-                <td className="p-2">{item.code}</td>
+                item?.currency
-                <td className="p-2">{item.amount}</td>
+              );
-                <td className="p-2">{item.status}</td>
+              return (
+                <tr key={index} className="text-slate-500">
+                  <td className="p-2">{item.added}</td>
+                  <td className="p-2">{item.code}</td>
+                  <td className="p-2">{item.amount}</td>
+                  <td className="p-2">{item.status}</td>
+                </tr>
+              );
+            })}
+          </tbody>
+        ) : coupon.error ? (
+          <tbody>
+            <tr className="text-slate-500">
+              <td className="p-2" colSpan={4}>
+                Opps! an error occurred. Please try again!
+              </td>
             </tr>
-            ))}
+          </tbody>
-        </tbody>
+        ) : (
-        )
+          <tbody>
-        :
+            <tr className="text-slate-500">
-        coupon.error ? 
+              <td className="p-2" colSpan={4}>
-        (
+                No Purchase History Found!
-        <tbody>
+              </td>
-            <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
             </tr>
-        </tbody>
+          </tbody>
-        )
+        )}
-        :
+      </table>
-        <tbody>
-            <tr className='text-slate-500'>
-                <td className="p-2" colSpan={4}>No Purchase History Found!</td>
-            </tr>
-        </tbody>
-        }
-    </table>
 
-    {/* PAGINATION BUTTON */}
+      {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= coupon?.data?.length ? true : false} data={coupon?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+      <PaginatedList
-    {/* END OF PAGINATION BUTTON */}
+        onClick={handlePagination}
+        prev={currentPage == 0 ? true : false}
+        next={
+          currentPage + Number(process.env.REACT_APP_ITEM_PER_PAGE) >=
+          coupon?.data?.length
+            ? true
+            : false
+        }
+        data={coupon?.data}
+        start={indexOfFirstItem}
+        stop={indexOfLastItem}
+      />
+      {/* END OF PAGINATION BUTTON */}
     </div>
-  )
+  );
 }
 
-export default CouponTable
+export default CouponTable;

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){
+      switch (action.payload.type) {
-        case 'JOBTABLE':
+        case "JOBTABLE":
           state.jobListTable = !state.jobListTable;
-          return
+          return;
-        case 'PENDINGTABLE' :
+        case "PENDINGTABLE":
           state.pendingListTable = !state.pendingListTable;
-          return
+          return;
-        case 'MYTASKTABLE' :
+        case "MYTASKTABLE":
           state.myTaskTable = !state.myTaskTable;
-          return
+          return;
-        case 'OTHERSINTERESTEDTABLE' :
+        case "OTHERSINTERESTEDTABLE":
           state.othersInterestedTable = !state.othersInterestedTable;
-          return
+          return;
+        case "COUPONTABLE":
+          state.couponTable = !state.couponTable;
+          return;
         default:
-          return state
+          return state;
       }
     },
   },

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 (
     <>
-      <MyJobs MyJobList={userJobList} commonHeadData={commonHeadBanner.result_list} />
+      <MyJobs
+        MyJobList={userJobList}
+        commonHeadData={commonHeadBanner.result_list}
+      />
     </>
   );
 }