react-version #1
@ -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 (
|
||||
<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+_.-]+@(.+)$/ })}
|
||||
value={currentAdress.emailAddress}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, emailAddress: e.target.value } })} />
|
||||
<input {...register("emailAddress", { required: true, pattern: /^[A-Za-z0-9+_.-]+@(.+)$/ })} />
|
||||
</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 })}
|
||||
value={currentAdress.firstName}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, firstName: e.target.value } })} />
|
||||
<input {...register("firstName", { required: true, minLength: 2 })} />
|
||||
</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 })}
|
||||
value={currentAdress.lastName}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, lastName: e.target.value } })} />
|
||||
<input {...register("lastName", { required: true, minLength: 2 })} />
|
||||
</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}$/ })}
|
||||
value={currentAdress.phoneNumber}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, phoneNumber: e.target.value } })} />
|
||||
<input placeholder="Exemple: 111-111-1111" {...register("phoneNumber", { required: true, pattern: /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/ })} />
|
||||
</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])}>
|
||||
{userAddresses.map((a, i) => (
|
||||
<option key={a.id} value={i} >{a.civicNumber} {a.street} </option> //{a.civicNumber} {a.street}
|
||||
{/* <Form.Select onSelect={(e) => { setFormAddress(e.target.value); }}>
|
||||
{userAddresses.map((a) => (
|
||||
<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 })}
|
||||
value={currentAdress.civicNumber}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, civicNumber: e.target.value } })} />
|
||||
<input type="number" min="0" {...register("civicNumber", { required: true })} />
|
||||
</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 })}
|
||||
value={currentAdress.street}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, street: e.target.value } })} />
|
||||
<input {...register("street", { required: true, minLength: 3, maxLength: 50 })} />
|
||||
</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 })}
|
||||
value={currentAdress.appartment}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, appartment: e.target.value } })} />
|
||||
<input {...register("appartment", { required: false })} />
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Ville*: </label>
|
||||
<input {...register("city", { required: true, minLength: 4, maxLength: 50 })}
|
||||
value={currentAdress.city}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, city: e.target.value } })} />
|
||||
<input {...register("city", { required: true, minLength: 4, maxLength: 50 })} />
|
||||
</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 })}
|
||||
value={currentAdress.province}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, province: e.target.value } })} />
|
||||
<input placeholder="Exemple: QC" {...register("province", { required: true, maxLength: 3 })} />
|
||||
</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 })}
|
||||
value={currentAdress.country}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, country: e.target.value } })} />
|
||||
<input {...register("country", { required: true, minLength: 4, maxLength: 30 })} />
|
||||
</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 })}
|
||||
value={currentAdress.postalCode}
|
||||
onChange={(e) => setCurrentAdress((prev) => { return { ...prev, postalCode: e.target.value } })} />
|
||||
<input {...register("postalCode", { required: true })} />
|
||||
</div>
|
||||
<div>
|
||||
{errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user