From 01054d5c50f9338c61215e820398ae53685d7e37 Mon Sep 17 00:00:00 2001
From: Laurian-Dufrechou <lauriandugers@hotmail.fr>
Date: Sun, 2 Apr 2023 22:50:26 +0200
Subject: [PATCH 1/2] fix(deleteImage): image not showing after deleted

---
 src/components/ModalModifyImages.jsx | 4 +---
 src/pages/api/file/deleteFile.js     | 2 +-
 src/pages/api/file/uploadFile.js     | 2 +-
 src/pages/userProfile.tsx            | 6 +++---
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/ModalModifyImages.jsx b/src/components/ModalModifyImages.jsx
index 4f475cc..f31de9a 100644
--- a/src/components/ModalModifyImages.jsx
+++ b/src/components/ModalModifyImages.jsx
@@ -77,11 +77,9 @@ export default function ModalModifyImages(props) {
 
     if (index > -1) {
       newListImage.splice(index, 1);
-      setlistImage(newListImage);
+      setlistImage([...newListImage]);
     }
 
-    // setlistImage(listImage.filter((image) => image !== fileName));
-
     const imageDeleteOptions = {
       method: "DELETE",
       body: JSON.stringify({ fileName: fileName.split("/").pop() }),
diff --git a/src/pages/api/file/deleteFile.js b/src/pages/api/file/deleteFile.js
index 5d6af83..fb8c7d2 100644
--- a/src/pages/api/file/deleteFile.js
+++ b/src/pages/api/file/deleteFile.js
@@ -11,7 +11,7 @@ export const config = {
 const deleteImage = async (req, res) => {
   const body = await JSON.parse(req.body);
   await fs.unlinkSync(`./public/imageUsers/${body.fileName}`);
-  res.status(200).send("image deleted");
+  res.status(204).send({ message: "File deleted", file: body.fileName });
 };
 
 export default (req, res) => {
diff --git a/src/pages/api/file/uploadFile.js b/src/pages/api/file/uploadFile.js
index c96648d..3b60a83 100644
--- a/src/pages/api/file/uploadFile.js
+++ b/src/pages/api/file/uploadFile.js
@@ -20,7 +20,7 @@ const post = async (req, res) => {
       return;
     }
     saveFile(files.file);
-    return res.status(201).send("image saved");
+    return res.status(201).send({ message: "File uploaded", file: files.file });
   });
 };
 
diff --git a/src/pages/userProfile.tsx b/src/pages/userProfile.tsx
index 55c2cf5..d1ff00e 100644
--- a/src/pages/userProfile.tsx
+++ b/src/pages/userProfile.tsx
@@ -104,7 +104,7 @@ export default function UserProfile() {
 
     return (
       <Box bgColor={"purple.50"}>
-        <Container justifyContent={"center"} maxWidth={"70rem"} mt={"1rem"}>
+        <Container justifyContent={"center"} maxW={"70rem"} mt={"1rem"}>
           <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
             <Box width={"50%"}>
               {userData.images ? (
@@ -139,7 +139,7 @@ export default function UserProfile() {
               Modifiez les champs en les selectionnants
             </Text>
 
-            <form onSubmit={handleSubmit(saveData)}>
+            <Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
               <FormControl width={"100%"}>
                 <Flex justify={"space-between"} mb={"1rem"}>
                   <Box>
@@ -355,7 +355,7 @@ export default function UserProfile() {
                   </Button>
                 </Center>
               </FormControl>
-            </form>
+            </Box>
           </Flex>
         </Container>
       </Box>

From 912ac833b99347a0213d0a74a8a8c075be2bf647 Mon Sep 17 00:00:00 2001
From: Laurian-Dufrechou <lauriandugers@hotmail.fr>
Date: Sun, 2 Apr 2023 23:40:41 +0200
Subject: [PATCH 2/2] 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 | 300 +++++++++++++++++++++-----------------
 1 file changed, 163 insertions(+), 137 deletions(-)

diff --git a/src/pages/userProfile.tsx b/src/pages/userProfile.tsx
index d1ff00e..3a9cf66 100644
--- a/src/pages/userProfile.tsx
+++ b/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,119 +143,139 @@ export default function UserProfile() {
             </Text>
 
             <Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
-              <FormControl width={"100%"}>
-                <Flex justify={"space-between"} mb={"1rem"}>
-                  <Box>
+              <Flex width={"100%"} 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
-                          }
-                        >
-                          <EditablePreview />
-                          <EditableInput />
-                        </Editable>
-                      )}
+                      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>
+                        );
+                      }}
                     />
-                  </Box>
-                  <Box>
+                    <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>
                       )}
                     />
-                  </Box>
-                  <Box>
-                    <FormLabel as={"legend"} htmlFor={"birthdate"}>
-                      Date de naissance :
-                    </FormLabel>
-                    <Editable
-                      id={"birthdate"}
-                      as="b"
-                      color={"grey"}
-                      isDisabled={true}
-                      defaultValue={
-                        user.birthdate === null
-                          ? "Non renseigné"
-                          : formateDate(user.birthdate.toString())
-                      }
-                    >
-                      <EditablePreview />
-                    </Editable>
-                  </Box>
-                </Flex>
-                <Divider colorScheme={"purple"} />
-                <Flex justify={"space-between"} my={"1rem"}>
-                  <Box>
-                    <FormLabel as={"legend"} htmlFor={"location"}>
-                      Ville :
-                    </FormLabel>
-                    <Editable
-                      id={"location"}
-                      as="b"
-                      color={"grey"}
-                      isDisabled={true}
-                      defaultValue={
-                        user.location === null || user.location === ""
-                          ? "Rendez vous sur la carte"
-                          : user.location
-                      }
-                    >
-                      <EditablePreview />
-                    </Editable>
-                  </Box>
-                  <Box>
-                    <FormLabel as={"legend"} htmlFor={"email"}>
-                      Adresse mail :
-                    </FormLabel>
-                    <Editable
-                      id={"email"}
-                      as="b"
-                      color={"grey"}
-                      isDisabled={true}
-                      defaultValue={user.email}
-                    >
-                      <EditablePreview />
-                    </Editable>
-                  </Box>
-                </Flex>
-                <Divider colorScheme={"purple"} />
-                <Box my={"1rem"}>
+                    <FormErrorMessage as={"b"}>
+                      {errors.lastName?.message}
+                    </FormErrorMessage>
+                  </FormControl>
+                </Box>
+                <Box>
+                  <FormLabel as={"legend"} htmlFor={"birthdate"}>
+                    Date de naissance :
+                  </FormLabel>
+                  <Editable
+                    id={"birthdate"}
+                    as="b"
+                    color={"grey"}
+                    isDisabled={true}
+                    defaultValue={
+                      user.birthdate === null
+                        ? "Non renseigné"
+                        : formateDate(user.birthdate.toString())
+                    }
+                  >
+                    <EditablePreview />
+                  </Editable>
+                </Box>
+              </Flex>
+              <Divider colorScheme={"purple"} />
+              <Flex justify={"space-between"} my={"1rem"}>
+                <Box>
+                  <FormLabel as={"legend"} htmlFor={"location"}>
+                    Ville :
+                  </FormLabel>
+                  <Editable
+                    id={"location"}
+                    as="b"
+                    color={"grey"}
+                    isDisabled={true}
+                    defaultValue={
+                      user.location === null || user.location === ""
+                        ? "Rendez vous sur la carte"
+                        : user.location
+                    }
+                  >
+                    <EditablePreview />
+                  </Editable>
+                </Box>
+                <Box>
+                  <FormLabel as={"legend"} htmlFor={"email"}>
+                    Adresse mail :
+                  </FormLabel>
+                  <Editable
+                    id={"email"}
+                    as="b"
+                    color={"grey"}
+                    isDisabled={true}
+                    defaultValue={user.email}
+                  >
+                    <EditablePreview />
+                  </Editable>
+                </Box>
+              </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,48 +293,52 @@ export default function UserProfile() {
                       </Editable>
                     )}
                   />
+                  <FormErrorMessage as="b">
+                    {errors.bio?.message}
+                  </FormErrorMessage>
+                </FormControl>
+              </Box>
+              <Divider colorScheme={"purple"} />
+              <Box my={"1rem"}>
+                <Box>
+                  <FormLabel as={"legend"} htmlFor={"gender"}>
+                    Genre :
+                  </FormLabel>
+                  <Controller
+                    name={"gender"}
+                    control={control}
+                    render={({ field }) => (
+                      <RadioGroup
+                        {...field}
+                        colorScheme={"purple"}
+                        id={"gender"}
+                        as="b"
+                        defaultValue={
+                          user.gender === null ? Gender.UNKNOWN : user.gender
+                        }
+                        // onChange={(value) => {
+                        //   setUserData({ ...userData, gender: value });
+                        // }}
+                      >
+                        <HStack spacing={"0.5rem"}>
+                          <Radio value={Gender.MALE}>
+                            {getTextGender(Gender.MALE)}
+                          </Radio>
+                          <Radio value={Gender.FEMALE}>
+                            {getTextGender(Gender.FEMALE)}
+                          </Radio>
+                          <Radio value={Gender.OTHER}>
+                            {getTextGender(Gender.OTHER)}
+                          </Radio>
+                          <Radio value={Gender.UNKNOWN}>
+                            {getTextGender(Gender.UNKNOWN)}
+                          </Radio>
+                        </HStack>
+                      </RadioGroup>
+                    )}
+                  />
                 </Box>
-                <Divider colorScheme={"purple"} />
-                <Box my={"1rem"}>
-                  <Box>
-                    <FormLabel as={"legend"} htmlFor={"gender"}>
-                      Genre :
-                    </FormLabel>
-                    <Controller
-                      name={"gender"}
-                      control={control}
-                      render={({ field }) => (
-                        <RadioGroup
-                          {...field}
-                          colorScheme={"purple"}
-                          id={"gender"}
-                          as="b"
-                          defaultValue={
-                            user.gender === null ? Gender.UNKNOWN : user.gender
-                          }
-                          // onChange={(value) => {
-                          //   setUserData({ ...userData, gender: value });
-                          // }}
-                        >
-                          <HStack spacing={"0.5rem"}>
-                            <Radio value={Gender.MALE}>
-                              {getTextGender(Gender.MALE)}
-                            </Radio>
-                            <Radio value={Gender.FEMALE}>
-                              {getTextGender(Gender.FEMALE)}
-                            </Radio>
-                            <Radio value={Gender.OTHER}>
-                              {getTextGender(Gender.OTHER)}
-                            </Radio>
-                            <Radio value={Gender.UNKNOWN}>
-                              {getTextGender(Gender.UNKNOWN)}
-                            </Radio>
-                          </HStack>
-                        </RadioGroup>
-                      )}
-                    />
-                  </Box>
-                  {/* <Box>
+                {/* <Box>
                  <FormLabel as={"legend"} htmlFor={"preference"}>
                     Préference :
                   </FormLabel>
@@ -343,18 +370,17 @@ export default function UserProfile() {
                     </HStack>
                   </RadioGroup>
                 </Flex> */}
-                </Box>
-                <Divider colorScheme={"purple"} />
-                <Center my={"1rem"}>
-                  <Button
-                    colorScheme={"purple"}
-                    isLoading={isLoading}
-                    type="submit"
-                  >
-                    Sauvegarder les modifications
-                  </Button>
-                </Center>
-              </FormControl>
+              </Box>
+              <Divider colorScheme={"purple"} />
+              <Center my={"1rem"}>
+                <Button
+                  colorScheme={"purple"}
+                  isLoading={isLoading}
+                  type="submit"
+                >
+                  Sauvegarder les modifications
+                </Button>
+              </Center>
             </Box>
           </Flex>
         </Container>