added recent-loans endpoint

src/components/transactions/TransactionsCom.jsx

@@ -1,4 +1,5 @@
 import {useEffect, useState} from 'react'
+import { useQuery } from '@tanstack/react-query'
 import {Link} from 'react-router-dom'
 
 import BreadcrumbCom from '../breadcrumb/BreadcrumbCom'
@@ -10,50 +11,45 @@ import getTimeFromDateString from '../../helpers/GetTimeFromDateString';
 import localImgLoader from '../../helpers/localImageLoader';
 import RouteLinks from '../../RouteLinks';
 import localSiteIcons from '../../helpers/localSiteIcons';
+import queryKeys from '../../services/queryKeys'
 
 export default function TransactionsCom() {
 
     const [page, setPage] = useState(1)
-    const [allTransactions, setAllTransaction] = useState({loading: true, error: '', data: {}})
-
-    const [willFilter, setWillFilter] = useState(false)
     const [filter, setFilter] = useState({type: '', id: ''})
-    const handleFilter = ({target: {name, value}}) => {
-        setFilter(prev => ({...prev, [name]: value}))
+    const [willFilter, setWillFilter] = useState(false)
+
+    const handleFilter = ({target:{name, value}}) => {
+        setFilter(prev => ({...prev, [name]:value}))
     }
 
     const handleFilterByParams = () => {
-        if (filter.type && !filter.id) {
+        if(filter.type && !filter.id){
             return
-        } else if (!filter.type) {
+        }else if(!filter.type){
             setPage(1)
             setWillFilter(prev => !prev)
             setFilter({type: '', id: ''})
-        } else {
+        }else{
             setPage(1)
             setWillFilter(prev => !prev)
         }
     }
 
-    const transactions = allTransactions?.data?.transactions // TRANSACTIONS LIST
-    const pagination = allTransactions?.data?.pagination
-    const isFetching = allTransactions?.loading
-    const isError = allTransactions?.error
-
-    useEffect(() => {
-        setAllTransaction(prev => ({...prev, loading: true}))
-        const payload = filter?.type ? {[filter?.type]: filter.id} : {}
-        getTransactions({...payload, page}).then(res => {
-            if (res?.status != 200) {
-                setAllTransaction(prev => ({...prev, loading: false}))
-                return
+    const {data, isFetching, isError, error} = useQuery({
+        queryKey: [...queryKeys.transactions, page, willFilter],
+        queryFn: () => {
+            const filterData = filter?.type ? {[filter?.type]: filter.id} : {}
+            const reqData = {
+                page,
+                ...filterData
             }
-            setAllTransaction({loading: false, error: '', data: res?.data})
-        }).catch(err => {
-            setAllTransaction({loading: false, error: 'error occurred', data: {}})
-            console.log('ERR', err)
-        })
-    }, [page, willFilter])
+            return getTransactions(reqData)
+        },
+        staleTime: 0 //0 mins
+    })
+    const transactions = data?.data?.transactions // TRANSACTIONS LIST
+    const pagination = data?.data?.pagination
 
     return (
         <div className='w-full flex flex-col gap-8'>
@@ -61,7 +57,7 @@ export default function TransactionsCom() {
 
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 {isError ?
-                    <p className='text-red-500'>{allTransactions?.error}</p>
+                    <p className='text-red-500'>{error?.message}</p>
                     :
                     <>
                         {/* filter section */}