get loan page products added

src/components/GetLoan.jsx

@@ -1,16 +1,28 @@
 import React, { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
-import { IoIosArrowBack } from "react-icons/io";
+import { useQuery } from "@tanstack/react-query";
+
+import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
 
 import myLinks from '../myLinks'
-import Label from './Label'
-import InputText from './InputText'
+// import Label from './Label'
+// import InputText from './InputText'
+import queryKeys from '../services/queryKeys';
+import { getProducts } from '../services/siteServices';
 
 export default function LoginCom() {
   
   const {state} = useLocation()
   const navigate = useNavigate()
 
+  const {data, isFetching, isError, error} = useQuery({
+      queryKey: queryKeys.products,
+      queryFn: () => getProducts()
+  })
+
+  const products = data?.data?.product_data?.products // PRODUCTS LIST
+  console.log('products', products)
+
   useEffect(()=>{
     if(!state?.user){
       return navigate(myLinks.getStarted, {replace:true})
@@ -19,10 +31,10 @@ export default function LoginCom() {
 
   return (
     <div className={`h-screen bg-sky-300 flex flex-col items-center justify-center bg-[url('./assets/first-background.jpg')] bg-cover bg-center bg-no-repeat`}>
-        <div className='flex flex-col gap-4 w-[80%] sm:w-[400px] min-h-[500px] bg-white rounded-xl p-4 sm:p-8 shadow'>
+        <div className='flex flex-col gap-4 w-[80%] sm:w-[400px] min-h-[600px] bg-white rounded-xl p-4 sm:p-8 shadow'>
             <div className="relative pb-3 card-title w-full border-b-2 flex gap-4 items-center">
               <div className='absolute left-2 top-1/2 -translate-y-1/2 p-1 cursor-pointer' onClick={()=>navigate(myLinks.home, {state:{proceed:'true'}})}>
-                <IoIosArrowBack className='text-3xl sm:text-5xl font-bold text-red-500' />
+                <IoIosArrowBack className='text-3xl sm:text-5xl font-bold text-orange-500' />
               </div>
               <div className='w-full text-center'>
                 <h1 className="mb-[1px] text-2xl font-bold">{state?.user.name}</h1>
@@ -30,9 +42,42 @@ export default function LoginCom() {
               </div>
             </div>
 
-            <div className='mt-3 flex justify-center items-center'>
-            <button onClick={()=>console.log('working')} className='p-4 bg-purple-800 text-lg sm:text-2xl text-white font-bold rounded'>Get Loan</button>
+            <div className='mt-3 flex flex-col gap-3'>
+              {isFetching ? 
+                <>
+                    <div className="w-full py-4">
+                      <p className='text-slate-800 text-center'>Loading...</p>
+                    </div>
+                </>
+                : isError ?
+                <div className="w-full py-4">
+                  <p className='text-red-500 text-center'>{error.message}</p>
+                </div>
+                :
+                <>
+                  {products && products.map(product => {
+                    let isDisabled = product.active == '0' ? true : false
+                    return (
+                      <button 
+                        key={product?.cid} 
+                        disabled={isDisabled} 
+                        onClick={()=>console.log('working')} 
+                        className={`w-full flex gap-2 justify-between items-center p-2 bg-purple-800 text-base sm:text-xl text-white font-bold rounded ${isDisabled && 'opacity-50'}`} 
+                      >
+                        <span>{product?.description}</span>
+                        <IoIosArrowForward />
+                      </button>
+                    )
+                  }
+                  )}
+                </>
+              }
             </div>
+            {products &&
+            <div className='mt-3 w-full h-full flex flex-col justify-end'>
+              <button onClick={()=>console.log('working')} className='w-full p-3 bg-orange-500 text-lg sm:text-2xl text-white font-bold rounded'>Get Loan</button>
+            </div>
+            }
         </div>
     </div>
   )

src/services/queryKeys.js

@@ -1,5 +1,6 @@
 const queryKeys = {
-    demoUsers: ['demo-users']
+    demoUsers: ['demo-users'],
+    products: ['products']
 }
 
 export default queryKeys

src/services/siteServices.js

@@ -50,8 +50,14 @@ export const loginUser = (reqData) => {
     return postAuxEnd('/salary/login', postData, false)
 }
 
-// FUNCTION TO GET MY PRODUCT PROVISION DATA
+// FUNCTION TO GET DEMO USERS
 export const demoUsersList = (reqData) => {
     const postData = { ...reqData }
     return getAuxEnd(`/salary/demousers`, postData)
+}
+
+// FUNCTION TO GET MY PRODUCTS DATA
+export const getProducts = (reqData) => {
+    const postData = { ...reqData }
+    return getAuxEnd(`/salary/products`, postData)
 }