.

2023-06-12 22:20:41 +01:00
parent bbbfe799a3
commit 7666d78c0b
6 changed files with 321 additions and 173 deletions
@@ -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 (
-        <>
-            <Layout>
-                <div className="my-wallet-wrapper w-full mb-10">
-                    {/* heading */}
-                    <div className="sm:flex justify-between items-center mb-6">
-                        <div className="mb-5 sm:mb-0">
-                            <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
-
-                                Coupons
-
-                            </h1>
-                        </div>
-
-                        <div className="slider-btns flex space-x-4">
-
-                        </div>
-                    </div>
-                    <div className='w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin'>
-
-                    {/* COUPON SECTION */}
-                    <div className="lg:w-4/4 w-full mb-10 lg:mb-0">
-                        <div className="wallet w-full  md:p-8 p-4 h-full max-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow">
-                            {couponHistory.loading ?
-                                <LoadingSpinner size='16' color='sky-blue' />
-                                :
-                                <CouponTable coupon={couponHistory} />
-                            }
-                        </div>
-                    </div>
-                    {/* END OF COUPON SECTION */}
-
-                </div>
-                </div>
-            </Layout>
-        </>
-    );
+  return (
+    <>
+      <Layout>
+        <div className="my-wallet-wrapper w-full mb-10">
+          {/* heading */}
+          <div className="sm:flex justify-start items-center mb-6">
+            <div className="mb-5 sm:mb-0">
+              <h1 className="text-26 font-bold   text-dark-gray dark:text-white">
+                Coupons
+              </h1>
+            </div>
+          </div>
+          <div className="w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
+            {/* COUPON SECTION */}
+            <div className="lg:w-4/4 w-full mb-10 lg:mb-0">
+              <div className="wallet w-full md:p-8 p-4 h-full max-h-[500px] min-h-[500px] bg-white dark:bg-dark-white overflow-y-auto rounded-2xl shadow coupon">
+                {couponHistory.loading ? (
+                  <div className="w-full h-full flex justify-center items-center">
+                    <LoadingSpinner size="16" color="sky-blue" />
+                  </div>
+                ) : (
+                  <CouponTable coupon={couponHistory} />    
+                )}
+              </div>
+            </div>
+            {/* END OF COUPON SECTION */}
+          </div>
+        </div>
+      </Layout>
+    </>
+  );
 }