fix(deleteImage): image not showing after deleted

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

@@ -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>