feat(Error display form userProfile): Error is displayed on wrong input of Editable

rules : 240 car max on bio, firstName and lastName required

src/pages/userProfile.tsx

@@ -35,7 +35,11 @@ export default function UserProfile() {
   const toast = useToast();
   const [isLoading, setIsLoading] = useState(false);
 
-  const { handleSubmit, control } = useForm();
+  const {
+    handleSubmit,
+    control,
+    formState: { errors },
+  } = useForm();
 
   const [userData, setUserData] = useState({});
 
@@ -76,7 +80,6 @@ export default function UserProfile() {
         setIsLoading(true);
         fetch(`/api/users/${user.id}`, options)
           .then((res) => {
-            console.log(res);
             setIsLoading(false);
             toast({
               title: `Modifications effectuées`,
@@ -140,56 +143,68 @@ export default function UserProfile() {
             </Text>
 
             <Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
-              <FormControl width={"100%"}>
+              <Flex width={"100%"} justify={"space-between"} mb={"1rem"}>
-                <Flex justify={"space-between"} mb={"1rem"}>
                 <Box>
+                  <FormControl id="firstName" isInvalid={errors.firstName}>
                     <FormLabel as="legend" htmlFor={"firstName"}>
                       Prénom :
                     </FormLabel>
                     <Controller
                       name={"firstName"}
                       control={control}
-                      render={({ field }) => (
-                        <Editable
-                          {...field}
-                          id={"firstName"}
-                          placeholder={"Non renseigné"}
-                          as={"b"}
                       defaultValue={
                         user.firstName === null ? "" : user.firstName
                       }
+                      rules={{
+                        required: { value: true, message: "Prénom requis" },
+                      }}
+                      render={({ field }) => {
+                        return (
+                          <Editable
+                            {...field}
+                            id={"firstName"}
+                            as={"b"}
+                            placeholder={"Non renseigné"}
                           >
                             <EditablePreview />
                             <EditableInput />
                           </Editable>
-                      )}
+                        );
+                      }}
                     />
+                    <FormErrorMessage as="b">
+                      {errors.firstName?.message}
+                    </FormErrorMessage>
+                  </FormControl>
                 </Box>
                 <Box>
+                  <FormControl id="lastName" isInvalid={errors.lastName}>
                     <FormLabel as={"legend"} htmlFor={"lastName"}>
                       Nom :
                     </FormLabel>
                     <Controller
                       name={"lastName"}
                       control={control}
+                      defaultValue={user.lastName === null ? "" : user.lastName}
+                      rules={{
+                        required: { value: true, message: "Nom requis" },
+                      }}
                       render={({ field }) => (
                         <Editable
                           {...field}
                           id={"lastName"}
                           as={"b"}
                           placeholder={"Non renseigné"}
-                          defaultValue={
-                            user.lastName === null ? "" : user.lastName
-                          }
-                          // onSubmit={(value) => {
-                          //   setUserData({ ...userData, lastName: value });
-                          // }}
                         >
                           <EditablePreview />
                           <EditableInput />
                         </Editable>
                       )}
                     />
+                    <FormErrorMessage as={"b"}>
+                      {errors.lastName?.message}
+                    </FormErrorMessage>
+                  </FormControl>
                 </Box>
                 <Box>
                   <FormLabel as={"legend"} htmlFor={"birthdate"}>
@@ -247,12 +262,20 @@ export default function UserProfile() {
               </Flex>
               <Divider colorScheme={"purple"} />
               <Box my={"1rem"}>
+                <FormControl id="lastName" isInvalid={errors.bio}>
                   <FormLabel as={"legend"} htmlFor={"bio"}>
                     À propos :
                   </FormLabel>
                   <Controller
                     name={"bio"}
                     control={control}
+                    defaultValue={user.bio === null ? "" : user.bio}
+                    rules={{
+                      maxLength: {
+                        value: 240,
+                        message: "240 caractères maximum",
+                      },
+                    }}
                     render={({ field }) => (
                       <Editable
                         {...field}
@@ -270,6 +293,10 @@ export default function UserProfile() {
                       </Editable>
                     )}
                   />
+                  <FormErrorMessage as="b">
+                    {errors.bio?.message}
+                  </FormErrorMessage>
+                </FormControl>
               </Box>
               <Divider colorScheme={"purple"} />
               <Box my={"1rem"}>
@@ -354,7 +381,6 @@ export default function UserProfile() {
                   Sauvegarder les modifications
                 </Button>
               </Center>
-              </FormControl>
             </Box>
           </Flex>
         </Container>