WrenchBoard/Users-Wrench
3
0
Fork 0
Code Issues Pull Requests Releases Activity

rewards API implemented

Browse Source
This commit is contained in:
victorAnumudu
2023-10-31 13:13:58 +01:00
parent 55fe2bf6d2
commit 1a1d59a8c7
2 changed files with 47 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/History/RewardsTable.jsx
+43 -10
View File
@@ -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>
)
src/components/History/index.jsx
+4 -27
View File
@@ -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 */}