rewards tab added

src/components/History/index.jsx

@@ -10,6 +10,7 @@ import usersService from "../../services/UsersService";
 import PurchasesTable from "../MyWallet/WalletComponent/PurchasesTable";
 import RecentActivityTable from "../MyWallet/WalletComponent/RecentActivityTable";
 import LoadingSpinner from "../Spinners/LoadingSpinner";
+import RewardsTable from "./RewardsTable";
 
 export default function History() {
 
@@ -29,6 +30,12 @@ export default function History() {
         error: false
     })
 
+    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
+
     //FUNCTION TO GET PAYMENT HISTORY
     const getPaymentHistory = ()=>{
       apiCall.getPaymentHx().then((res)=>{
@@ -56,11 +63,31 @@ export default function History() {
       })
   }
 
+    //FUNCTION TO GET FAMILY REWARD HISTORY
+    const getFamilyRewardHistory = ()=>{
+        apiCall.getFamilyRewardHx().then((res)=>{
+            if(res.data.internal_return < 0){ // success but no data
+                setFamilyRewardHistory(prev => ({...prev, loading: false}))
+                return
+            }
+            setFamilyRewardHistory(prev => ({...prev, loading: false, data: res.data.result_list}))
+        }).catch((error)=>{
+            setFamilyRewardHistory(prev => ({...prev, loading: false, error: true}))
+        })
+    }
+
   useEffect(()=>{
     getPaymentHistory()
+  }, [])
+
+  useEffect(()=>{
     getPurchaseHistory()
   }, [])
 
+  useEffect(()=>{
+    getFamilyRewardHistory()
+  }, [])
+
   return (
     <>
       <Layout>
@@ -236,6 +263,15 @@ export default function History() {
                     >
                     Recent Activity
                     </button>
+                    <button
+                    name="reward"
+                    onClick={(e) => setTab(e.target.name)}
+                    className={`px-4 py-1 rounded-t-2xl ${
+                        tab == "reward" ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white" : "bg-white text-[#000] border-t-[2px]"
+                      }`}
+                    >
+                    Rewards
+                    </button>
                 </div>
                 {/* END OF switch button */}
                 <div className="history-tables w-full">
@@ -265,6 +301,20 @@ export default function History() {
                         </div>
                     }
                     {/* END OF RECENT ACTIVITY SECTION */}
+
+                    {/* REWARD SECTION */}
+                    {tab == 'reward' &&
+                        <div className="wallet w-full border-t">
+                            <h1 className="p-2 text-xl font-bold text-dark-gray dark:text-white tracking-wide">Rewards</h1>
+                            {/* <p className='text-base text-slate-500 dark:text-white'>Activity Report</p> */}
+                            {paymentHistory.loading ? 
+                            <LoadingSpinner size='16' color='sky-blue' />
+                            :
+                            <RewardsTable reward={familyRewardHistory} />
+                        }
+                        </div>
+                    }
+                    {/* END OF REWARD SECTION */}
                 </div>
             </div>
             {/*<HistoryTable />*/}