pagination api called react side using material ui
import React,{useState} from 'react'
import { FiArrowLeft } from "react-icons/fi";
import { useNavigate } from "react-router-dom";
import Providercss from './Style/ProviderList.module.css';
import mapicon from '../assets/map-pin.png';
import discounticon from '../assets/DiscountStar.png';
// import { Button} from 'react-bootstrap';
import Button from '@mui/material/Button';
import { ToastContainer, toast } from 'react-toastify';
import Variables from '../global.ts'
// import { Spinner } from 'react-bootstrap';
import CircularProgress from '@mui/material/CircularProgress';
import Box from '@mui/material/Box';
import Pagination from '@mui/material/Pagination';
export default function ProviderList() {
const navigate = useNavigate();
const [pin, setPin] = useState('');
const [loading, setLoading] = useState(false);
const [providerlist,setProviderList]=useState([]);
const [checkbutton,setcheckbutton]=useState(false);
const [page, setpage] = React.useState();
const [datas, setDatas] = React.useState({
centreValue: [],
value: '',
});
const pageChangeHandler=(event,value)=>{
// console.log(value);
getProviderList (value);
}
const getProviderList = async (pageno) => {
setLoading(true)
try {
let response = await fetch(Variables.get_Base_Url() + `/api/hospital-app/discount_card/get_nearest_providers_discount_card_services/` + pageno + '/', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json',
Authorization: 'Token ' + localStorage.getItem('token'),
}, body: JSON.stringify({
"pincode":JSON.parse(JSON.stringify(pin)),
"lat_lng":"",
"service":localStorage.getItem('service'),
"sub_service":localStorage.getItem('subservice')
})
});
let json = await response.json();
setLoading(false);
console.log(json)
if (json.SUCCESS) {
console.log(json.providers);
setProviderList(json.providers);
console.log(providerlist);
setpage(json.total_pages)
console.log(page);
setDatas({
...providerlist,
centreValue: json.providers,
});
}
else {
toast.warn(json.message, { draggable: false });
setDatas({
centreValue: [],
});
setpage(json.total_pages)
setProviderList([])
return false;
}
}
catch (error) {
alert(error);
setpage(0)
}
}
const Checkhandler=()=>{
console.log('checkhandler clicked');
const pat1=/^[1-9]{1}[0-9]{5}$/;//indiapincodevalidation
if(!pat1.test(pin)){
toast.warn('Pin code should be 6 digits', { draggable: false });
return;
}
/*this validation not needed*/
if (pin.length < 6) {
toast.warn('Pin code should be 6 digits', { draggable: false });
return;
}
if(pat1.test(pin) && pin.length ===6 ){
setcheckbutton(true);
getProviderList(1);
console.log('checkhandler clicked');
}
}
return (
<div style={{marginLeft:'2vw',marginRight:'2vw'}}>
<ToastContainer />
<div style={{display:'flex', padding: 20,alignItems: 'flex-end'}}>
<div>
<FiArrowLeft onClick={() => navigate('/discount_card/home')} style={{ height: 25, width: 25, marginRight: 20 }}></FiArrowLeft>
</div>
<div style={{width:'60vw',textAlign: 'center',lineHeight: 1.8}}><span className={Providercss.span} >Chose Your Location</span></div>
</div>
<div className={Providercss.containerSerchbox} style={{display:'flex',columnGap:'1em'}} >
<div className="inputbox" style={{}} >
<input type="text" className={Providercss.inputbox} placeholder='Enter Pincode' maxLength={6}
onChange={(e) => setPin(e.target.value)}
/>
</div>
<div className="serchicon" >
<img src={mapicon} className={Providercss.mapicon} />
</div>
<div style={{}} >
<button className={Providercss.checkbutton} onClick={Checkhandler}>CHECK</button>
</div>
</div>
{(providerlist.length===0&&checkbutton&&page>1)?<div style={{display:'flex',justifyContent:'center',padding:30,backgroundColor:'white'}}>
{/* <Spinner animation="border" /> */}
<Box sx={{ display: 'flex' }}>
<CircularProgress />
</Box>
</div>:
providerlist.map((info,index)=> {
return(
<div key={index} style={{marginTop:'1vh'}}>
{ (index===0)&&<div >
<span className={Providercss.span} style={{fontSize:'16px'}}>Provider List - OPD Consultation</span></div>}
<div className={Providercss.providerListContainer}>
<div className={Providercss.discountcontainer}>
<div style={{position:'relative',top:'10px'}}>
<img src={discounticon}></img>
</div>
<div style={{position:'relative',top:'-40px',left:'12px',color: '#FFFFFF'}}>
{info.discount_percent}%
<br/>
<span style={{position:'relative',left:'6px',top:'-4px'}}>off</span>
</div>
</div>
<div className={Providercss.addresscontainer} >
<div style={{display:'flex',justifyContent:'space-between'}}>
<div className={Providercss.hospitalname}>{info.provider_name}</div> <div className={Providercss.distancename}>~{Math.round(info.distance/1000)}km</div>
</div>
<div className={Providercss.addressname}>
{info.address}
</div>
</div>
</div>
</div>)
}
)}
{ page&&<div >
<Pagination count={page} onChange={pageChangeHandler} shape="rounded" style={{position:'relative',left:'20vw'}} />
</div>}
{/* static design */}
{/* <div ><span className={Providercss.span} style={{fontSize:'16px'}}>Provider List - OPD Consultation</span></div>
<div className={Providercss.providerListContainer}>
<div className={Providercss.discountcontainer}>
<div style={{position:'relative',top:'10px'}}>
<img src={discounticon}></img>
</div>
<div style={{position:'relative',top:'-40px',left:'12px',color: '#FFFFFF'}}>
12%
<br/>
<span style={{position:'relative',left:'6px',top:'-4px'}}>off</span>
</div>
</div>
<div className={Providercss.addresscontainer} >
<div style={{display:'flex',justifyContent:'space-between'}}>
<div className={Providercss.hospitalname}>hospital name</div> <div className={Providercss.distancename}>-2km</div>
</div>
<div className={Providercss.addressname}>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur, voluptas.
</div>
</div>
</div> */}
{/* <div className={Providercss.providerListContainer}>
2ndprovider
</div> */}
</div>
)
}
Comments
Post a Comment