Tout ça pour une calis d'adresse
This commit is contained in:
parent
e5d0e9bead
commit
c5cd52e34c
@ -7,23 +7,37 @@ import { Form } from "react-bootstrap";
|
|||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
const { register, handleSubmit, setValue, watch, formState: { errors } } = useForm();
|
const { register, handleSubmit, formState: { errors } } = useForm();
|
||||||
const cookies = new Cookies();
|
const cookies = new Cookies();
|
||||||
const [userAddresses, setUserAddresses] = useState([]);
|
const [userAddresses, setUserAddresses] = useState([]);
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const [currentAdress, setCurrentAdress] = useState({
|
||||||
|
firstName: "",
|
||||||
|
lastName: "",
|
||||||
|
phoneNumber: "",
|
||||||
|
emailAddress: "",
|
||||||
|
civicNumber: "",
|
||||||
|
appartment: "",
|
||||||
|
street: "",
|
||||||
|
city: "",
|
||||||
|
province: "",
|
||||||
|
country: "",
|
||||||
|
postalCode: ""
|
||||||
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
||||||
const userInfo = cookies.get("GMGM");
|
const userInfo = cookies.get("GMGM");
|
||||||
if (userInfo != null && userInfo.LoggedIn == true) {
|
if (userInfo != null && userInfo.LoggedIn == true) {
|
||||||
if (userInfo.firstName != null)
|
if (userInfo.firstName != null)
|
||||||
setValue("firstName", userInfo.firstName);
|
setCurrentAdress((e) => { return { ...e, firstName: userInfo.firstName } });
|
||||||
if (userInfo.lastName != null)
|
if (userInfo.lastName != null)
|
||||||
setValue("lastName", userInfo.lastName);
|
setCurrentAdress((e) => { return { ...e, lastName: userInfo.lastName } });
|
||||||
if (userInfo.phone != null)
|
if (userInfo.phone != null)
|
||||||
setValue("phoneNumber", userInfo.phone);
|
setCurrentAdress((e) => { return { ...e, phoneNumber: userInfo.phone } });
|
||||||
if (userInfo.email != null)
|
if (userInfo.email != null)
|
||||||
setValue("emailAddress", userInfo.email);
|
setCurrentAdress((e) => { return { ...e, emailAddress: userInfo.email } });
|
||||||
|
|
||||||
fetch("https://localhost:7292/api/Address", {
|
fetch("https://localhost:7292/api/Address", {
|
||||||
method: 'GET',
|
method: 'GET',
|
||||||
@ -33,22 +47,27 @@ export default function App() {
|
|||||||
if (response.ok) {
|
if (response.ok) {
|
||||||
const json = await response.json();
|
const json = await response.json();
|
||||||
setUserAddresses(json);
|
setUserAddresses(json);
|
||||||
if (json.length >= 1)
|
if (json.length >= 1) {
|
||||||
setFormAddress(json[0]);
|
setFormAddress(json[0]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const setFormAddress = (address) => {
|
const setFormAddress = (address) => {
|
||||||
|
setCurrentAdress((e) => {
|
||||||
setValue("civicNumber", address.civicNumber);
|
return {
|
||||||
setValue("appartment", address.appartment);
|
...e,
|
||||||
setValue("street", address.street);
|
civicNumber: address.civicNumber,
|
||||||
setValue("city", address.city);
|
appartment: address.appartment,
|
||||||
setValue("province", address.province);
|
street: address.street,
|
||||||
setValue("country", address.country);
|
city: address.city,
|
||||||
setValue("postalCode", address.postalCode);
|
province: address.province,
|
||||||
|
country: address.country,
|
||||||
|
postalCode: address.postalCode
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
const onSubmit = async (data) => {
|
const onSubmit = async (data) => {
|
||||||
@ -68,7 +87,6 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="form-container">
|
<div className="form-container">
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
@ -76,7 +94,9 @@ export default function App() {
|
|||||||
<div className="Error_color">
|
<div className="Error_color">
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Adresse courriel*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.emailAddress && errors.emailAddress.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
|
{errors.emailAddress && errors.emailAddress.type === 'required' && <span>Vous devez entrer une adresse courriel!</span>}
|
||||||
@ -84,7 +104,9 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Prénom*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.firstName && errors.firstName.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
|
{errors.firstName && errors.firstName.type === 'required' && <span>Vous devez entrer votre prénom!</span>}
|
||||||
@ -92,7 +114,9 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Nom*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.lastName && errors.lastName.type === 'required' && <span>Vous devez entrer votre nom!</span>}
|
{errors.lastName && errors.lastName.type === 'required' && <span>Vous devez entrer votre nom!</span>}
|
||||||
@ -100,7 +124,9 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Numéro de téléphone*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.phoneNumber && errors.phoneNumber.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
|
{errors.phoneNumber && errors.phoneNumber.type === 'required' && <span>Vous devez entrer un numéro de téléphone!</span>}
|
||||||
@ -109,22 +135,26 @@ export default function App() {
|
|||||||
<div className="formulaire-address">
|
<div className="formulaire-address">
|
||||||
<h5>
|
<h5>
|
||||||
Adresse
|
Adresse
|
||||||
{/* <Form.Select onSelect={(e) => { setFormAddress(e.target.value); }}>
|
<Form.Select onChange={(e) => setFormAddress(userAddresses[e.target.value])}>
|
||||||
{userAddresses.map((a) => (
|
{userAddresses.map((a, i) => (
|
||||||
<option key={a.id} value={a.id}>{a.civicNumber} {a.street}</option>
|
<option key={a.id} value={i} >{a.civicNumber} {a.street} </option> //{a.civicNumber} {a.street}
|
||||||
))}
|
))}
|
||||||
</Form.Select> */}
|
</Form.Select>
|
||||||
</h5>
|
</h5>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Numéro civique*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.civicNumber && errors.civicNumber.type === 'required' && <span>Vous devez entrer une numéro civique!</span>}
|
{errors.civicNumber && errors.civicNumber.type === 'required' && <span>Vous devez entrer une numéro civique!</span>}
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Rue*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.street && errors.street.type === 'required' && <span>Vous devez entrer votre rue!</span>}
|
{errors.street && errors.street.type === 'required' && <span>Vous devez entrer votre rue!</span>}
|
||||||
@ -134,11 +164,15 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Numéro d'appartement: </label>
|
<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>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Ville*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
|
{errors.city && errors.city.type === 'required' && <span>Vous devez entrer votre ville!</span>}
|
||||||
@ -147,7 +181,9 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Province (abréviation)*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.province && errors.province.type === 'required' && <span>Vous devez entrer votre province!</span>}
|
{errors.province && errors.province.type === 'required' && <span>Vous devez entrer votre province!</span>}
|
||||||
@ -155,7 +191,9 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Pays*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.country && errors.country.type === 'required' && <span>Vous devez entrer votre pays!</span>}
|
{errors.country && errors.country.type === 'required' && <span>Vous devez entrer votre pays!</span>}
|
||||||
@ -164,7 +202,9 @@ export default function App() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group">
|
||||||
<label>Code postal*: </label>
|
<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>
|
||||||
<div>
|
<div>
|
||||||
{errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}
|
{errors.postalCode && errors.postalCode.type === 'required' && <span>Vous devez entrer votre code postal!</span>}
|
||||||
|
Loading…
Reference in New Issue
Block a user