Import { useState, useEffect } from 'react';
import axios from 'axios';
const ConfirmBooking = () => {
const [data,setData] = useState([])
const Style = {
color: 'rgb(97, 113, 154)',
padding: '5px'
}
useEffect(() => {
axios
.get('http://localhost:5000/api/bookings')
.then(res => {
console.log(res)
setData(res.data)
})
.catch(err => {
console.log(err)
})
}, [])
const deleteHandler =(id) =>{
axios
.delete(`http:
.then(res => {
console.log('deleted',res)
setData(res.data)
})
.catch(error =>{
console.log(error)
})
}
if(!data?.length) return <div>loading...</div>
return (
<div className='bookings'>
<h4 style={Style}>Name:{" "}{data.at(-1).name}</h4>
<h4 style={Style} >Service:{" "}{data.at(-1).service}</h4>
<h4 style={Style} >Date:{" "}{data.at(-1).date}</h4>
<h4 style={Style} >Cost:{" "}{data.at(-1).cost}</h4><br></br>
<button >Edit</button>
<button onClick={ () => deleteHandler(data.at(-1).id)} >Delete</button>
</div>
)
}
export default ConfirmBooking;