diff --git a/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js b/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js index bb87e7d..f410c27 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/pages/Formulaire.js @@ -7,37 +7,23 @@ import { Form } from "react-bootstrap"; import { useNavigate } from "react-router-dom"; export default function App() { - const { register, handleSubmit, formState: { errors } } = useForm(); + const { register, handleSubmit, setValue, watch, formState: { errors } } = useForm(); const cookies = new Cookies(); const [userAddresses, setUserAddresses] = useState([]); const navigate = useNavigate(); - const [currentAdress, setCurrentAdress] = useState({ - firstName: "", - lastName: "", - phoneNumber: "", - emailAddress: "", - civicNumber: "", - appartment: "", - street: "", - city: "", - province: "", - country: "", - postalCode: "" - }) - useEffect(() => { const userInfo = cookies.get("GMGM"); if (userInfo != null && userInfo.LoggedIn == true) { if (userInfo.firstName != null) - setCurrentAdress((e) => { return { ...e, firstName: userInfo.firstName } }); + setValue("firstName", userInfo.firstName); if (userInfo.lastName != null) - setCurrentAdress((e) => { return { ...e, lastName: userInfo.lastName } }); + setValue("lastName", userInfo.lastName); if (userInfo.phone != null) - setCurrentAdress((e) => { return { ...e, phoneNumber: userInfo.phone } }); + setValue("phoneNumber", userInfo.phone); if (userInfo.email != null) - setCurrentAdress((e) => { return { ...e, emailAddress: userInfo.email } }); + setValue("emailAddress", userInfo.email); fetch("https://localhost:7292/api/Address", { method: 'GET', @@ -47,27 +33,22 @@ export default function App() { if (response.ok) { const json = await response.json(); setUserAddresses(json); - if (json.length >= 1) { + if (json.length >= 1) setFormAddress(json[0]); - } } }); } }, []); const setFormAddress = (address) => { - setCurrentAdress((e) => { - return { - ...e, - civicNumber: address.civicNumber, - appartment: address.appartment, - street: address.street, - city: address.city, - province: address.province, - country: address.country, - postalCode: address.postalCode - } - }); + + setValue("civicNumber", address.civicNumber); + setValue("appartment", address.appartment); + setValue("street", address.street); + setValue("city", address.city); + setValue("province", address.province); + setValue("country", address.country); + setValue("postalCode", address.postalCode); } const onSubmit = async (data) => { @@ -87,6 +68,7 @@ export default function App() { } } + return (
@@ -94,9 +76,7 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, emailAddress: e.target.value } })} /> +
{errors.emailAddress && errors.emailAddress.type === 'required' && Vous devez entrer une adresse courriel!} @@ -104,9 +84,7 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, firstName: e.target.value } })} /> +
{errors.firstName && errors.firstName.type === 'required' && Vous devez entrer votre prénom!} @@ -114,9 +92,7 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, lastName: e.target.value } })} /> +
{errors.lastName && errors.lastName.type === 'required' && Vous devez entrer votre nom!} @@ -124,9 +100,7 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, phoneNumber: e.target.value } })} /> +
{errors.phoneNumber && errors.phoneNumber.type === 'required' && Vous devez entrer un numéro de téléphone!} @@ -135,26 +109,22 @@ export default function App() {
Adresse - setFormAddress(userAddresses[e.target.value])}> - {userAddresses.map((a, i) => ( - //{a.civicNumber} {a.street} + {/* { setFormAddress(e.target.value); }}> + {userAddresses.map((a) => ( + ))} - + */}
- setCurrentAdress((prev) => { return { ...prev, civicNumber: e.target.value } })} /> +
{errors.civicNumber && errors.civicNumber.type === 'required' && Vous devez entrer une numéro civique!}
- setCurrentAdress((prev) => { return { ...prev, street: e.target.value } })} /> +
{errors.street && errors.street.type === 'required' && Vous devez entrer votre rue!} @@ -164,15 +134,11 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, appartment: e.target.value } })} /> +
- setCurrentAdress((prev) => { return { ...prev, city: e.target.value } })} /> +
{errors.city && errors.city.type === 'required' && Vous devez entrer votre ville!} @@ -181,9 +147,7 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, province: e.target.value } })} /> +
{errors.province && errors.province.type === 'required' && Vous devez entrer votre province!} @@ -191,9 +155,7 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, country: e.target.value } })} /> +
{errors.country && errors.country.type === 'required' && Vous devez entrer votre pays!} @@ -202,9 +164,7 @@ export default function App() {
- setCurrentAdress((prev) => { return { ...prev, postalCode: e.target.value } })} /> +
{errors.postalCode && errors.postalCode.type === 'required' && Vous devez entrer votre code postal!}