import axios from "axios";
import { Modal } from "bootstrap";
import { useRef, useEffect, useState } from "react";
export default function Users()
{
const [users,setUsers]=useState([])
const [user,setUser]=useState({"id":0,"nom":"","ville":""})
const [open,setOpen]=useState(false)
const url="[Link]
const modalRef = useRef(null);
const getusers=async()=>{
await fetch(url).then(response=>[Link]()).
then(data=>setUsers(data)).
catch(error => alert("Problème de connexion avec la
source de données"))
}
const deleteuser =async(id)=>{
if ( [Link]("voulez-vous supprimer cette fiche
utilisateur"))
await [Link](`${url}/${id}`)
getusers()
}
const updateuser=async(id) =>
{
if ( [Link]("voulez-vous modifier les infromations "))
await [Link](`${url}/${id}`,user)
getusers()
}
useEffect(()=>{getusers()},[])
return(
<>
<div style={{marginTop:15,marginLeft:200,marginRight:200}}>
<table className="table">
<thead>
<tr>
<th>N° Utilisateur</th>
<th>Nom Utilisateur</th>
<th>Ville Résidence</th>
<th colSpan={2}>Actions</th>
</tr>
</thead>
<tbody>
{
[Link]((u)=>
<tr key={[Link]}>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td><button className="btn btn-danger"
onClick={()=>deleteuser([Link])
}>Delete</button></td>
<td><button className="btn btn-secondary"
onClick={()=>{ setUser({...user,"id":[Link],"nom":[Link],"ville":[Link]})
const modal = new
Modal([Link]);
[Link]();
}
} >Update</button></td>
</tr>
)
}
</tbody>
</table>
<h2 style={{marginTop:10}}>Nombre d'Utilisateur :{[Link]}</h2>
</div>
<>
{/* Modal */}
<div className="modal fade" tabIndex="-1" ref={modalRef}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Formulaire utilisateur</h5>
<button className="btn-close" data-bs-dismiss="modal"></button>
</div>
<form >
<div className="modal-body">
<div className="mb-3">
<label className="form-label">ID </label>
<input
type="text"
className="form-control"
name="nom"
value={[Link]}
disabled
/>
</div>
<div className="mb-3">
<label className="form-label">Nom</label>
<input
type="text"
className="form-control"
name="nom"
value={[Link]}
onChange={(e)=>setUser({...user,"nom":[Link]})}
required
/>
</div>
<div className="mb-3">
<label className="form-label">Ville</label>
<input
type="text"
className="form-control"
name="ville"
value={[Link]}
onChange={(e)=>setUser({...user,"ville":[Link]})}
required
/>
</div>
</div>
<div className="modal-footer">
<button className="btn btn-secondary" data-bs-dismiss="modal">
Annuler
</button>
<button className="btn btn-primary"
onClick={()=>updateuser([Link])}>
Enregistrer
</button>
</div>
</form>
</div>
</div>
</div>
</>
</>