Revert "Tout ça pour une calis d'adresse"

This reverts commit c5cd52e34c.

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 {
+        setValue("civicNumber", address.civicNumber);
-                ...e,
+        setValue("appartment", address.appartment);
-                civicNumber: address.civicNumber,
+        setValue("street", address.street);
-                appartment: address.appartment,
+        setValue("city", address.city);
-                street: address.street,
+        setValue("province", address.province);
-                city: address.city,
+        setValue("country", address.country);
-                province: address.province,
+        setValue("postalCode", address.postalCode);
-                country: address.country,
-                postalCode: address.postalCode
-            }
-        });
     }
 
     const onSubmit = async (data) => {
@@ -87,6 +68,7 @@ export default function App() {
         }
     }
 
+
     return (
         <div className="form-container">
             <form onSubmit={handleSubmit(onSubmit)}>
@@ -94,9 +76,7 @@ export default function App() {
                 <div className="Error_color">
                     <div className="form-group">
                         <label>Adresse courriel*: </label>
-                        <input {...register("emailAddress", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })}
+                        <input {...register("emailAddress", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
-                            value={currentAdress.emailAddress}
-                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, emailAddress: e.target.value } })} />
                     </div>
                     <div>
                         {errors.emailAddress && errors.emailAddress.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
@@ -104,9 +84,7 @@ export default function App() {
                     </div>
                     <div className="form-group">
                         <label>Prénom*: </label>
-                        <input {...register("firstName", { required: true, minLength: 2 })}
+                        <input {...register("firstName", { required: true, minLength: 2 })} />
-                            value={currentAdress.firstName}
-                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, firstName: e.target.value } })} />
                     </div>
                     <div>
                         {errors.firstName && errors.firstName.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
@@ -114,9 +92,7 @@ export default function App() {
                     </div>
                     <div className="form-group">
                         <label>Nom*: </label>
-                        <input {...register("lastName", { required: true, minLength: 2 })}
+                        <input {...register("lastName", { required: true, minLength: 2 })} />
-                            value={currentAdress.lastName}
-                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, lastName: e.target.value } })} />
                     </div>
                     <div>
                         {errors.lastName && errors.lastName.type === 'required' && <span>Vous devez entrer votre nom!</span>}
@@ -124,9 +100,7 @@ export default function App() {
                     </div>
                     <div className="form-group">
                         <label>Numéro de téléphone*: </label>
-                        <input placeholder="Exemple: 111-111-1111" {...register("phoneNumber", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })}
+                        <input placeholder="Exemple: 111-111-1111" {...register("phoneNumber", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
-                            value={currentAdress.phoneNumber}
-                            onChange={(e) => setCurrentAdress((prev) => { return { ...prev, phoneNumber: e.target.value } })} />
                     </div>
                     <div>
                         {errors.phoneNumber && errors.phoneNumber.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
@@ -135,26 +109,22 @@ export default function App() {
                     <div className="formulaire-address">
                         <h5>
                             Adresse
-                            <Form.Select onChange={(e) => setFormAddress(userAddresses[e.target.value])}>
+                            {/* <Form.Select onSelect={(e) => { setFormAddress(e.target.value); }}>
-                                {userAddresses.map((a, i) => (
+                                {userAddresses.map((a) => (
-                                    <option key={a.id} value={i} >{a.civicNumber} {a.street} </option> //{a.civicNumber} {a.street}
+                                    <option key={a.id} value={a.id}>{a.civicNumber} {a.street}</option>
                                 ))}
-                            </Form.Select>
+                            </Form.Select> */}
                         </h5>
                         <div className="form-group">
                             <label>Numéro civique*: </label>
-                            <input type="number" min="0" {...register("civicNumber", { required: true })}
+                            <input type="number" min="0" {...register("civicNumber", { required: true })} />
-                                value={currentAdress.civicNumber}
-                                onChange={(e) => setCurrentAdress((prev) => { return { ...prev, civicNumber: e.target.value } })} />
                         </div>
                         <div>
                             {errors.civicNumber && errors.civicNumber.type === 'required' && <span>Vous devez entrer une numéro civique!</span>}
                         </div>
                         <div className="form-group">
                             <label>Rue*: </label>
-                            <input {...register("street", { required: true, minLength: 3, maxLength: 50 })}
+                            <input {...register("street", { required: true, minLength: 3, maxLength: 50 })} />
-                                value={currentAdress.street}
-                                onChange={(e) => setCurrentAdress((prev) => { return { ...prev, street: e.target.value } })} />
                         </div>
                         <div>
                             {errors.street && errors.street.type === 'required' && <span>Vous devez entrer votre rue!</span>}
@@ -164,15 +134,11 @@ export default function App() {
                         </div>
                         <div className="form-group">
                             <label>Numéro d'appartement: </label>
-                            <input {...register("appartment", { required: false })}
+                            <input {...register("appartment", { required: false })} />
-                                value={currentAdress.appartment}
-                                onChange={(e) => setCurrentAdress((prev) => { return { ...prev, appartment: e.target.value } })} />
                         </div>
                         <div className="form-group">
                             <label>Ville*: </label>
-                            <input {...register("city", { required: true, minLength: 4, maxLength: 50 })}
+                            <input {...register("city", { required: true, minLength: 4, maxLength: 50 })} />
-                                value={currentAdress.city}
-                                onChange={(e) => setCurrentAdress((prev) => { return { ...prev, city: e.target.value } })} />
                         </div>
                         <div>
                             {errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
@@ -181,9 +147,7 @@ export default function App() {
                         </div>
                         <div className="form-group">
                             <label>Province (abréviation)*: </label>
-                            <input placeholder="Exemple: QC" {...register("province", { required: true, maxLength: 3 })}
+                            <input placeholder="Exemple: QC" {...register("province", { required: true, maxLength: 3 })} />
-                                value={currentAdress.province}
-                                onChange={(e) => setCurrentAdress((prev) => { return { ...prev, province: e.target.value } })} />
                         </div>
                         <div>
                             {errors.province && errors.province.type === 'required' && <span>Vous devez entrer votre province!</span>}
@@ -191,9 +155,7 @@ export default function App() {
                         </div>
                         <div className="form-group">
                             <label>Pays*: </label>
-                            <input {...register("country", { required: true, minLength: 4, maxLength: 30 })}
+                            <input {...register("country", { required: true, minLength: 4, maxLength: 30 })} />
-                                value={currentAdress.country}
-                                onChange={(e) => setCurrentAdress((prev) => { return { ...prev, country: e.target.value } })} />
                         </div>
                         <div>
                             {errors.country && errors.country.type === 'required' && <span>Vous devez entrer votre pays!</span>}
@@ -202,9 +164,7 @@ export default function App() {
                         </div>
                         <div className="form-group">
                             <label>Code postal*: </label>
-                            <input {...register("postalCode", { required: true })}
+                            <input {...register("postalCode", { required: true })} />
-                                value={currentAdress.postalCode}
-                                onChange={(e) => setCurrentAdress((prev) => { return { ...prev, postalCode: e.target.value } })} />
                         </div>
                         <div>
                             {errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}