Merge branch 'dev' of https://github.com/LucasVbr/projet-web4 into dev

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() }),

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) => {

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 });
   });
 };
 

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`,
@@ -104,7 +107,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,57 +142,69 @@ export default function UserProfile() {
               Modifiez les champs en les selectionnants
             </Text>
 
-            <form onSubmit={handleSubmit(saveData)}>
-              <FormControl width={"100%"}>
-                <Flex justify={"space-between"} mb={"1rem"}>
+            <Box as="form" onSubmit={handleSubmit(saveData)} width={"80%"}>
+              <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
                       }
+                      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,8 +381,7 @@ export default function UserProfile() {
                   Sauvegarder les modifications
                 </Button>
               </Center>
-              </FormControl>
-            </form>
+            </Box>
           </Flex>
         </Container>
       </Box>