From 6d693a3d23e2d59d25531b9a79153964378246a4 Mon Sep 17 00:00:00 2001 From: DavidBelisle <79233327+DavidBelisle@users.noreply.github.com> Date: Mon, 7 Nov 2022 16:28:11 -0500 Subject: [PATCH] =?UTF-8?q?Un=20bon=20d=C3=A9but?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Ajouter.js | 57 +++++++-- .../src/components/Modify.js | 56 +++++++-- .../src/pages/ContactUs.js | 108 +++++++++--------- .../src/pages/Formulaire.js | 2 +- .../src/pages/Inventaire.js | 8 +- .../src/stylesheets/site.css | 7 ++ 6 files changed, 159 insertions(+), 79 deletions(-) diff --git a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js index 5a909e1..464e73b 100644 --- a/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js +++ b/GrossesMitaines/grosses-mitaines-ui/src/components/Ajouter.js @@ -1,9 +1,12 @@ import { useState, useEffect } from "react"; import { Dropdown } from "react-bootstrap"; import { Button } from "react-bootstrap"; +import { useForm } from "react-hook-form"; const Ajouter = ({ onCreation }) => { + const { register, handleSubmit, formState: { errors } } = useForm(); + const [currentStatus, setStatus] = useState("Disponible"); const [title, setTitle] = useState(""); @@ -27,9 +30,7 @@ const Ajouter = ({ onCreation }) => { }, [imageFile]); - const handleSubmit = (e) => { - e.preventDefault(); // Empêcher de reloader la page au submit. - + const onSubmit = () => { // Appeler le comportement onCreation onCreation({ title: title, @@ -63,50 +64,86 @@ const Ajouter = ({ onCreation }) => { return (
-
+

Ajouter un morceau

+
- setTitle(e.target.value)} />
+
+ {errors.title && errors.title.type === 'required' && Veuillez entrer un titre de morceaux.} + {errors.title && errors.title.type === 'maxLength' && Ne doit pas dépasser 255 caractères!} +
+
- setDescription(e.target.value)} />
+
+ {errors.description && errors.description.type === 'required' && Veuillez écrire une description.} +
+
- setCategory(e.target.value)} />
+
+ {errors.category && errors.category.type === 'required' && Veuillez inscrire une catégorie.} +
+
- setPrice(e.target.value)} />
+
+ {errors.price && errors.price.type === 'required' && Veuillez entrer un prix.} + {errors.price && errors.price.type === 'min' && Minimum 0.01$.} + {errors.price && errors.price.type === 'max' && Trop cher... voyons donc!} +
+
- setPromoPrice(e.target.value)} />
+
+ {errors.promoPrice && errors.promoPrice.type === 'required' && Veuillez entrer un prix promotionnel.} + {errors.promoPrice && errors.promoPrice.type === 'min' && Minimum 0$.} + {errors.promoPrice && errors.promoPrice.type === 'max' && Trop cher... voyons donc!} +
+
- setQuantity(e.target.value)} />
+
+ {errors.quantity && errors.quantity.type === 'min' && Minimum 0.} +
+
{ + const { register, handleSubmit, formState: { errors } } = useForm(); + const [currentStatus, setStatus] = useState(renderStatus(morceau.status)); const [title, setTitle] = useState(morceau.title); const [description, setDescription] = useState(morceau.description); @@ -57,9 +60,7 @@ const Modify = ({ morceau, onModify }) => { const id = morceau.id; - const handleSubmit = (e) => { - e.preventDefault(); // Empêcher de reloader la page au submit. - + const onSubmit = (e) => { // Appeler le comportement onModify({ id: morceau.id, @@ -87,50 +88,85 @@ const Modify = ({ morceau, onModify }) => { return (
- +

Modifier morceau: {morceau.title}

- setTitle(e.target.value)} />
+
+ {errors.title && errors.title.type === 'required' && Veuillez entrer un titre de morceaux.} + {errors.title && errors.title.type === 'maxLength' && Ne doit pas dépasser 255 caractères!} +
+
- setDescription(e.target.value)} />
+
+ {errors.description && errors.description.type === 'required' && Veuillez écrire une description.} +
+
- setCategory(e.target.value)} />
+
+ {errors.category && errors.category.type === 'required' && Veuillez inscrire une catégorie.} +
+
- setPrice(e.target.value)} />
+
+ {errors.price && errors.price.type === 'required' && Veuillez entrer un prix.} + {errors.price && errors.price.type === 'min' && Minimum 0.01$.} + {errors.price && errors.price.type === 'max' && Trop cher... voyons donc!} +
+
- setPromoPrice(e.target.value)} />
+
+ {errors.promoPrice && errors.promoPrice.type === 'required' && Veuillez entrer un prix promotionnel.} + {errors.promoPrice && errors.promoPrice.type === 'min' && Minimum 0$.} + {errors.promoPrice && errors.promoPrice.type === 'max' && Trop cher... voyons donc!} +
+
- setQuantity(e.target.value)} />
+
+ {errors.quantity && errors.quantity.type === 'min' && Minimum 0.} +
+
console.log(data); + const { register, handleSubmit, watch, formState: { errors } } = useForm(); + const onSubmit = data => console.log(data); - return ( - /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ - -
-

Contacter-nous!

-
-
-
- -
- {/* include validation with required or other standard HTML validation rules */} - - {/* errors will return when field validation fails */} -
- {errors.Nom && errors.Nom.type === 'required' && Vous devez entrer votre nom!} - {errors.Nom && errors.Nom.type === 'minLength' && Votre nom doit avoir au moins 2 lettres!} -
-
+ return ( + /* "handleSubmit" will validate your inputs before invoking "onSubmit" */ + +
+

Contacter-nous!

+
+
+
+ +
+ {/* include validation with required or other standard HTML validation rules */} + + {/* errors will return when field validation fails */} +
+ {errors.Nom && errors.Nom.type === 'required' && Vous devez entrer votre nom!} + {errors.Nom && errors.Nom.type === 'minLength' && Votre nom doit avoir au moins 2 lettres!} +
+
-
-
- -
- -
- {errors.Email && errors.Email.type === 'required' && Vous devez entrer une adresse!} - {errors.Email && errors.Email.type === 'pattern' && Adresse non valide!} +
+
+ +
+ +
+ {errors.Email && errors.Email.type === 'required' && Vous devez entrer une adresse!} + {errors.Email && errors.Email.type === 'pattern' && Adresse non valide!} +
+
+ +
+
+ +
+ +
+ {errors.Téléphone && errors.Téléphone.type === 'required' && Vous devez entrer un numéro de téléphone!} + {errors.Téléphone && errors.Téléphone.type === 'pattern' && Téléphone non valide!} +
+
+ +
+
+ +
+