Ajout de l'api update user et formulaire fonctionelle

server-api/api.js

@@ -150,19 +150,16 @@ app.post('/User/Add', (req, res) => {
     });
 });
 
-app.put('/User/Update', (req, res) => {
+app.put('/User/Update/:id', (req, res) => {
 
     const id = req.params.id;
-    
     let form = req.body;
 
-    console.log(req.body);
-
-    const sql = `UPDATE users SET "lastname" = ?, firstname = ?, idrole = ?, login = ?, password = ?, phone = ?, mail = ? WHERE (iduser = ?)`;
-    db.query(sql ,[form.lastname,form.firstname,form.idrole,form.login,form.password,form.phone,form.mail,form.id], (err, result) => { 
+    const sql = `UPDATE users SET lastname = ?, firstname = ?, idrole = ?, login = ?, password = ?, phone = ?, mail = ? WHERE (iduser = ?)`;
+    db.query(sql, [form.lastname, form.firstname, form.idrole, form.login, form.password, form.phone, form.mail, id], (err, result) => { 
         if (err) throw err;
         console.log(result);
-        res.send('Post added...' + result.insertId);
+        res.send('Post added...');
     });
 });
 

src/pages/Admin_modif.js

@@ -15,21 +15,32 @@ function Admin_modif() {
     const location = useLocation();
     const { iduser } = location.state;
 
-    const [currentUser, setCurrentUser] = useState([]);
     const [roles, setRoles] = useState([]);
     const [selectedIdRole, setSelectedIdRole] = useState(1);
+    
+    const [lastName, setLastName] = useState();
+    const [firstName, setFirstName] = useState();
+    const [phone, setPhone] = useState();
+    const [mail, setMail] = useState();
+    const [login, setLogin] = useState();
 
     useEffect(() =>{
-        const apiString = '/User/Id/' + iduser;
-        api.get(apiString).then((response) => {
-            setCurrentUser(response.data[0]);
-            setSelectedIdRole(response.data[0].idrole);
+        api.get('/Role/All/').then((response) => {
+            setRoles(response.data);
         });
     }, []);
 
     useEffect(() =>{
-        api.get('/Role/All/').then((response) => {
-            setRoles(response.data);
+        const apiString = '/User/Id/' + iduser;
+        api.get(apiString).then((response) => {
+            console.log(response.data[0]);
+            setSelectedIdRole(response.data[0].idrole);
+
+            setLastName(response.data[0].lastname);
+            setFirstName(response.data[0].firstname);
+            setPhone(response.data[0].phone);
+            setMail(response.data[0].mail);
+            setLogin(response.data[0].login);
         });
     }, []);
 
@@ -38,6 +49,26 @@ function Admin_modif() {
         setSelectedIdRole(event.target.value);
     };
 
+    function handleChangeLastName(event){
+        setLastName(event.target.value);
+    };
+
+    function handleChangeFirstName(event){
+        setFirstName(event.target.value);
+    };
+
+    function handleChangePhone(event){
+        setPhone(event.target.value);
+    };
+
+    function handleChangeMail(event){
+        setMail(event.target.value);
+    };
+
+    function handleChangeLogin(event){
+        setLogin(event.target.value);
+    };
+
     function checkModif(event){
         
         event.preventDefault();
@@ -46,11 +77,10 @@ function Admin_modif() {
         const values = Object.fromEntries(formData.entries());
         console.log(values.firstname);
 
-        const apiString = '/User/Update/' + currentUser.iduser;
-        api.put(apiString).then((response) => {
+        const apiString = '/User/Update/' + iduser;
+        api.put(apiString, values).then((response) => {
             console.log(response.data);
         });
-
     }
 
     return (
@@ -74,11 +104,10 @@ function Admin_modif() {
                                 </div>
                             </tr>
                             <tr>
-                                <input id="id" value={currentUser.iduser} name='id' type="hidden" required/>
-                                <input id="nom" value={currentUser.lastname} name='lastname' className="texte_zone" type="text" placeholder="Nom..." required/>
-                                <input id="prenom" value={currentUser.firstname} name="firstname" className="texte_zone" type="text" placeholder="Prénom..." required/>
+                                <input id="nom" value={lastName} onChange={handleChangeLastName} name="lastname" className="texte_zone" type="text" placeholder="Nom..." required/>
+                                <input id="prenom" value={firstName} onChange={handleChangeFirstName} name="firstname" className="texte_zone" type="text" placeholder="Prénom..." required/>
                                 <Select
-                                    name='idrole'
+                                    name="idrole"
                                     value={selectedIdRole}
                                     onChange={handleChangeRole}
                                 >
@@ -86,10 +115,10 @@ function Admin_modif() {
                                         <MenuItem value={role.idRole}>{role.name}</MenuItem>    
                                     ))}
                                 </Select>
-                                <input id="phone" value={currentUser.phone} name="phone" className="texte_zone" type="tel" 
+                                <input id="phone" value={phone} onChange={handleChangePhone} name="phone" className="texte_zone" type="tel" 
                                     placeholder="Téléphone..." pattern="[0-9]{10}" required/>
-                                <input id="email" value={currentUser.mail} name="mail" className="texte_zone" type="email" placeholder="Email..." required/>
-                                <input id="identifiant" value={currentUser.login} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
+                                <input id="email" value={mail} onChange={handleChangeMail} name="mail" className="texte_zone" type="email" placeholder="Email..." required/>
+                                <input id="identifiant" value={login} onChange={handleChangeLogin} name="login" className="texte_zone" type="text" placeholder="Identifiant..." required/>
                             </tr>
                             <tr>
                                 <div className="button_submit">