From 738eb1589ebbc5b2c9c4d6870439903ff5c514d7 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 31 Oct 2023 04:22:50 +0100
Subject: [PATCH 1/3] rewards tab added

---
 src/components/History/RewardsTable.jsx | 81 +++++++++++++++++++++++++
 src/components/History/index.jsx        | 50 +++++++++++++++
 src/services/UsersService.js            | 13 ++++
 3 files changed, 144 insertions(+)
 create mode 100644 src/components/History/RewardsTable.jsx

diff --git a/src/components/History/RewardsTable.jsx b/src/components/History/RewardsTable.jsx
new file mode 100644
index 0000000..7a65412
--- /dev/null
+++ b/src/components/History/RewardsTable.jsx
@@ -0,0 +1,81 @@
+import React, {useState} from 'react'
+import Image from '../../assets/images/taskbanners/default.jpg'
+
+import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
+import PaginatedList from '../../components/Pagination/PaginatedList';
+
+import { AmountTo2DP } from '../Helpers/PriceFormatter';
+
+function RewardsTable({reward}) {
+
+    const [currentPage, setCurrentPage] = useState(0);
+    const indexOfFirstItem = Number(currentPage);
+    const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
+    const currentReward = reward?.data?.slice(indexOfFirstItem, indexOfLastItem);
+  
+    const handlePagination = (e) => {
+      handlePagingFunc(e,setCurrentPage)
+    }
+
+  return (
+    <div className='flex flex-col justify-between min-h-[500px]'>
+    <table className="wallet-activity w-full table-auto border-collapse text-left">
+        <thead className='border-b-2'>
+            <tr className='text-slate-600'>
+            <th className="p-2">Title</th>
+            <th className="p-2">Amount</th>
+            <th className="p-2">Date</th>
+            <th className="p-2">Confirmation</th>
+            </tr>
+        </thead>
+        {reward.data.length ?
+        (
+        <tbody>
+            {currentReward.map((item, index) => {
+                let date = new Date(item.added).toLocaleDateString()
+                return (
+                    <tr key={index} className='text-slate-500'>
+                        <td className="p-2">
+                            <div className='flex items-center gap-2'>
+                                <img src={Image} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full' alt='Reward Logo' />
+                                <div className='flex flex-col'>
+                                    <h1 className='text-lg font-bold'>Title Goes Here</h1>
+                                    <p className='text-sm'>Title Goes Here</p>
+                                </div>
+                            </div>
+                        </td>
+                        <td className="p-2">{AmountTo2DP(item.amount*0.01)} {item.currency}</td>
+                        <td className="p-2">{date}</td>
+                        <td className="p-2">{item.confirmation}</td>
+                    </tr>
+                )
+            }
+            )}
+        </tbody>
+        )
+        :
+        reward.error ? 
+        (
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>Opps! an error occurred. Please try again!</td>
+            </tr>
+        </tbody>
+        )
+        :
+        <tbody>
+            <tr className='text-slate-500'>
+                <td className="p-2" colSpan={4}>No Rewards History Found!</td>
+            </tr>
+        </tbody>
+        }
+    </table>
+
+    {/* PAGINATION BUTTON */}
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= reward?.data?.length ? true : false} data={reward?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    {/* END OF PAGINATION BUTTON */}
+    </div>
+  )
+}
+
+export default RewardsTable
\ No newline at end of file
diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
index cb6a4a8..cb7aaf6 100644
--- a/src/components/History/index.jsx
+++ b/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 />*/}
diff --git a/src/services/UsersService.js b/src/services/UsersService.js
index daa9e38..bb38a78 100644
--- a/src/services/UsersService.js
+++ b/src/services/UsersService.js
@@ -496,6 +496,19 @@ class usersService {
     return this.postAuxEnd("/purchasehx", postData);
   }
 
+  // API FUNCTION TO GET FAMILY REWARD HISTORY
+  getFamilyRewardHx() {
+    var postData = {
+      uid: localStorage.getItem("uid"),
+      member_id: localStorage.getItem("member_id"),
+      sessionid: localStorage.getItem("session_token"),
+      offset: 1,
+      limit: 20,
+      action: 22011,
+    };
+    return this.postAuxEnd("/familyrewardhx", postData);
+  }
+
   // API FUNCTION TO GET PAYMENT HISTORY
   getPaymentHx() {
     var postData = {

From 1a1d59a8c760f372cdaeef11a7766a1024d388a4 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 31 Oct 2023 13:13:58 +0100
Subject: [PATCH 2/3] rewards API implemented

---
 src/components/History/RewardsTable.jsx | 53 ++++++++++++++++++++-----
 src/components/History/index.jsx        | 31 ++-------------
 2 files changed, 47 insertions(+), 37 deletions(-)

diff --git a/src/components/History/RewardsTable.jsx b/src/components/History/RewardsTable.jsx
index 7a65412..edc1b8b 100644
--- a/src/components/History/RewardsTable.jsx
+++ b/src/components/History/RewardsTable.jsx
@@ -1,34 +1,66 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import Image from '../../assets/images/taskbanners/default.jpg'
 
+import usersService from '../../services/UsersService';
 import { handlePagingFunc } from '../../components/Pagination/HandlePagination';
 import PaginatedList from '../../components/Pagination/PaginatedList';
 
+import LoadingSpinner from '../Spinners/LoadingSpinner';
+
 import { AmountTo2DP } from '../Helpers/PriceFormatter';
 
-function RewardsTable({reward}) {
+function RewardsTable() {
+
+    const apiCall = new usersService()
+
+    let [familyRewardHistory, setFamilyRewardHistory] = useState({ // FOR PURCHASE HISTORY
+        loading: true,
+        data: [],
+        error: false
+    })
 
     const [currentPage, setCurrentPage] = useState(0);
     const indexOfFirstItem = Number(currentPage);
     const indexOfLastItem = Number(indexOfFirstItem)+Number(process.env.REACT_APP_ITEM_PER_PAGE);
-    const currentReward = reward?.data?.slice(indexOfFirstItem, indexOfLastItem);
+    const currentReward = familyRewardHistory?.data?.slice(indexOfFirstItem, indexOfLastItem);
   
     const handlePagination = (e) => {
       handlePagingFunc(e,setCurrentPage)
     }
 
+
+    //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(()=>{
+        getFamilyRewardHistory()
+      }, [])
+
   return (
     <div className='flex flex-col justify-between min-h-[500px]'>
+    {familyRewardHistory.loading ? 
+    <LoadingSpinner size='16' color='sky-blue' height='h-full' />
+    :
     <table className="wallet-activity w-full table-auto border-collapse text-left">
         <thead className='border-b-2'>
             <tr className='text-slate-600'>
-            <th className="p-2">Title</th>
+            <th className="p-2">Description</th>
             <th className="p-2">Amount</th>
             <th className="p-2">Date</th>
             <th className="p-2">Confirmation</th>
             </tr>
         </thead>
-        {reward.data.length ?
+        {familyRewardHistory.data.length ?
         (
         <tbody>
             {currentReward.map((item, index) => {
@@ -37,10 +69,10 @@ function RewardsTable({reward}) {
                     <tr key={index} className='text-slate-500'>
                         <td className="p-2">
                             <div className='flex items-center gap-2'>
-                                <img src={Image} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full' alt='Reward Logo' />
+                                <img src={item.icon} className='min-w-[60px] max-w-[60px] min-h-[60px] max-h-[60px] rounded-full bg-slate-500' alt='Reward Logo' />
                                 <div className='flex flex-col'>
-                                    <h1 className='text-lg font-bold'>Title Goes Here</h1>
-                                    <p className='text-sm'>Title Goes Here</p>
+                                    <h1 className='text-lg font-bold'>Reward to {item.rec_firstname} {item.rec_lastname_}</h1>
+                                    <p className='text-sm'>{item.description}</p>
                                 </div>
                             </div>
                         </td>
@@ -54,7 +86,7 @@ function RewardsTable({reward}) {
         </tbody>
         )
         :
-        reward.error ? 
+        familyRewardHistory.error ? 
         (
         <tbody>
             <tr className='text-slate-500'>
@@ -70,9 +102,10 @@ function RewardsTable({reward}) {
         </tbody>
         }
     </table>
+    }
 
     {/* PAGINATION BUTTON */}
-    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= reward?.data?.length ? true : false} data={reward?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
+    <PaginatedList onClick={handlePagination} prev={currentPage == 0 ? true : false} next={currentPage+Number(process.env.REACT_APP_ITEM_PER_PAGE) >= familyRewardHistory?.data?.length ? true : false} data={familyRewardHistory?.data} start={indexOfFirstItem} stop={indexOfLastItem} />
     {/* END OF PAGINATION BUTTON */}
     </div>
   )
diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
index cb7aaf6..9d8726f 100644
--- a/src/components/History/index.jsx
+++ b/src/components/History/index.jsx
@@ -30,12 +30,6 @@ 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)=>{
@@ -63,19 +57,6 @@ 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()
   }, [])
@@ -84,10 +65,6 @@ export default function History() {
     getPurchaseHistory()
   }, [])
 
-  useEffect(()=>{
-    getFamilyRewardHistory()
-  }, [])
-
   return (
     <>
       <Layout>
@@ -307,11 +284,11 @@ export default function History() {
                         <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 ? 
+                            {/* {paymentHistory.loading ? 
                             <LoadingSpinner size='16' color='sky-blue' />
-                            :
-                            <RewardsTable reward={familyRewardHistory} />
-                        }
+                            : */}
+                        {/* } */}
+                            <RewardsTable />
                         </div>
                     }
                     {/* END OF REWARD SECTION */}

From a67d2b7bb4076245db241e0b5c7b6d6128c4f148 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 31 Oct 2023 13:16:33 +0100
Subject: [PATCH 3/3] reward tab clean up

---
 src/components/History/index.jsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/History/index.jsx b/src/components/History/index.jsx
index 9d8726f..9bdc62d 100644
--- a/src/components/History/index.jsx
+++ b/src/components/History/index.jsx
@@ -284,10 +284,6 @@ export default function History() {
                         <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 />
                         </div>
                     }