Update user info

src/components/SettingsModal/SettingsModal.jsx

@@ -4,18 +4,29 @@ import styles from "./SettingsModal.module.css"
 import { useContext, useState } from "react";
 import ThemeSwitcher from "../ui/themeSwitcher/ThemeSwitcher.jsx";
 import { AuthContext } from "../../contexts/auth/AuthContext.js";
+import TextInput from "../ui/input/input.jsx";
+import updateUser from "../../utils/users/updateUser.js";
 
 
 export default function SettingsModal() {
 
+    const { user, logout, update } = useContext(AuthContext);
+
     const [open, setOpen] = useState(false);
 
-    const { logout } = useContext(AuthContext);
+    const [name, setName] = useState(user.name);
+    const [lastname, setLastName] = useState(user.lastname);
+    const [phone, setPhone] = useState(user.phone);
 
     const handleLogout = () => {
         logout();
     }
 
+    const handleSubmit = async () => {
+        await updateUser(name, lastname, phone);
+        update();
+    }
+
     return (
         <>
             <Button variant={"transparent"} onClick={() => setOpen(!open)}>
@@ -28,6 +39,24 @@ export default function SettingsModal() {
                     <div className={styles.section}>
                         <h3>Compte</h3>
                         <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+
+                        <div className={styles.section}>
+                            <h4>Changer de Prénom</h4>
+                            <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de nom</h4>
+                            <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de numéro de téléphone</h4>
+                            <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
+                        </div>
+
+                        <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
+
                     </div>
 
                     <div className={styles.section}>