🐛 Validation error handling

src/front/Components/Layouts/Folder/UpdateClient/index.tsx

@@ -5,7 +5,7 @@ import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
-import DefaultNotaryDashboard  from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import { Contact, Customer, OfficeFolder } from "le-coffre-resources/dist/Notary";
 import Link from "next/link";
@@ -14,6 +14,8 @@ import { ChangeEvent } from "react";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import { Address } from "le-coffre-resources/dist/Customer";
+import { ValidationError } from "class-validator";
 
 type IProps = {};
 
@@ -34,6 +36,7 @@ type IState = {
 	inputAddress: string;
 	folder: OfficeFolder | null;
 	customer: Customer | null;
+	validationError: ValidationError[];
 };
 class UpdateClientClass extends BasePage<IPropsClass, IState> {
 	constructor(props: IPropsClass) {
@@ -50,6 +53,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 			inputAddress: "",
 			folder: null,
 			customer: null,
+			validationError: [],
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onChangeNameInput = this.onChangeNameInput.bind(this);
@@ -83,24 +87,28 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 								placeholder="Nom"
 								onChange={this.onChangeNameInput}
 								defaultValue={this.state.customer?.contact?.first_name}
+								validationError={this.state.validationError.find((error) => error.property === "first_name")}
 							/>
 							<TextField
 								name="last_name"
 								placeholder="Prénom"
 								onChange={this.onChangeFirstNameInput}
 								defaultValue={this.state.customer?.contact?.last_name}
+								validationError={this.state.validationError.find((error) => error.property === "last_name")}
 							/>
 							<TextField
 								name="email"
 								placeholder="E-mail"
 								onChange={this.onChangeEmailInput}
 								defaultValue={this.state.customer?.contact?.email}
+								validationError={this.state.validationError.find((error) => error.property === "email")}
 							/>
 							<TextField
 								name="cell_phone_number"
 								placeholder="Numéro de téléphone"
 								onChange={this.onChangePhoneNumberInput}
 								defaultValue={this.state.customer?.contact?.cell_phone_number ?? ""}
+								validationError={this.state.validationError.find((error) => error.property === "cell_phone_number")}
 							/>
 							<TextField
 								name="birthdate"
@@ -108,6 +116,7 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 								required={false}
 								onChange={this.onChangeBirthDateInput}
 								defaultValue={this.state.customer?.contact?.birthdate?.toString() ?? ""}
+								validationError={this.state.validationError.find((error) => error.property === "birthdate")}
 							/>
 							<TextField
 								name="address"
@@ -167,25 +176,33 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 			[key: string]: string;
 		},
 	) {
-		const contact = {
+		const contact = Contact.hydrate<Contact>({
 			first_name: values["first_name"],
 			last_name: values["last_name"],
 			email: values["email"],
 			cell_phone_number: values["cell_phone_number"],
-			birthdate: values["birthdate"] === "" ? null : values["birthdate"],
+			birthdate: values["birthdate"] === "" ? null : new Date(values["birthdate"]!),
-			address:
+			address: values["address"] ? Address.hydrate<Address>({ address: values["address"] }) : undefined,
-				values["address"] === ""
+		});
-					? null
+
-					: {
+		try {
-							address: values["address"],
+			await contact.validateOrReject?.({ groups: ["createCustomer"], forbidUnknownValues: false });
-					  },
+		} catch (validationErrors) {
-		} as Contact;
+			console.log(validationErrors);
+			this.setState({
+				validationError: validationErrors as ValidationError[],
+			});
+			return;
+		}
 
 		try {
 			await Customers.getInstance().put(this.props.customerUid, { contact });
 			this.props.router.push(this.backwardPath);
-		} catch (e) {
+		} catch (backError) {
-			console.error(e);
+			if (!Array.isArray(backError)) return;
+			this.setState({
+				validationError: backError as ValidationError[],
+			});
 		}
 	}