Input image userProfile

package-lock.json

@@ -18,7 +18,9 @@
         "bcrypt": "^5.1.0",
         "eslint": "8.35.0",
         "eslint-config-next": "13.2.3",
+        "formidable": "^2.1.1",
         "framer-motion": "^10.8.5",
+        "fs": "^0.0.1-security",
         "next": "13.2.3",
         "next-auth": "^4.20.1",
         "react": "18.2.0",
@@ -2695,6 +2697,11 @@
         "get-intrinsic": "^1.1.3"
       }
     },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+    },
     "node_modules/ast-types-flow": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz",
@@ -3339,6 +3346,15 @@
       "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
       "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
     },
+    "node_modules/dezalgo": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
+      "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+      "dependencies": {
+        "asap": "^2.0.0",
+        "wrappy": "1"
+      }
+    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
@@ -4149,6 +4165,20 @@
         "is-callable": "^1.1.3"
       }
     },
+    "node_modules/formidable": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-2.1.1.tgz",
+      "integrity": "sha512-0EcS9wCFEzLvfiks7omJ+SiYJAiD+TzK4Pcw1UlUoGnhUxDcMKjt0P7x8wEb0u6OHu8Nb98WG3nxtlF5C7bvUQ==",
+      "dependencies": {
+        "dezalgo": "^1.0.4",
+        "hexoid": "^1.0.0",
+        "once": "^1.4.0",
+        "qs": "^6.11.0"
+      },
+      "funding": {
+        "url": "https://ko-fi.com/tunnckoCore/commissions"
+      }
+    },
     "node_modules/fp-ts": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/fp-ts/-/fp-ts-2.13.1.tgz",
@@ -4206,6 +4236,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
       "integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -4624,6 +4659,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/hexoid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
+      "integrity": "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",

package.json

@@ -19,7 +19,9 @@
     "bcrypt": "^5.1.0",
     "eslint": "8.35.0",
     "eslint-config-next": "13.2.3",
+    "formidable": "^2.1.1",
     "framer-motion": "^10.8.5",
+    "fs": "^0.0.1-security",
     "next": "13.2.3",
     "next-auth": "^4.20.1",
     "react": "18.2.0",

src/components/ModalModifyImages.jsx

@@ -12,13 +12,17 @@ import {
   ModalFooter,
   ModalHeader,
   ModalOverlay,
+  Text,
   useDisclosure,
 } from "@chakra-ui/react";
+import { useState } from "react";
 import { RiEditBoxLine } from "react-icons/ri";
 
 export default function ModalModifyImages(props) {
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const { images, userData, setUserData } = props;
+  const { images, userData, setUserData, files, setFiles } = props;
+  const [listImage, setlistImage] = useState(images);
+
   return (
     <>
       <Button
@@ -41,20 +45,21 @@ export default function ModalModifyImages(props) {
           <ModalHeader>Modification des images</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <Grid templateColumns={`repeat(${images.length + 1}, 1fr)`} gap={5}>
+            <Grid
-              {images.map((image, index) => (
+              templateColumns={`repeat(${listImage.length + 1}, 1fr)`}
+              gap={5}
+            >
+              {listImage.map((image, index) => (
                 <GridItem key={index}>
+                  <Text>{image}</Text>
                   <Flex direction={"column"} gap={"1rem"}>
                     <Image src={image} />
                     <Button
                       id={"" + index}
                       colorScheme={"red"}
                       onClick={(e) => {
-                        images.splice(index, 1);
+                        setlistImage(listImage.filter((_, i) => i !== index));
-                        setUserData({
+                        setFiles(files.filter((_, i) => i !== index));
-                          ...userData,
-                          images: [...images],
-                        });
                       }}
                     >
                       Supprimer l'image
@@ -62,17 +67,16 @@ export default function ModalModifyImages(props) {
                   </Flex>
                 </GridItem>
               ))}
-              {images.length < 5 ? (
+              {listImage.length < 5 ? (
                 <GridItem width={"100%"}>
                   <Input
                     type={"file"}
                     height={"100%"}
                     accept={"image/png, image/jpeg, image/webp"}
-                    onChange={(e) => {
+                    onChange={({ target }) => {
-                      setUserData({
+                      const file = target.files[0];
-                        ...userData,
+                      setlistImage([...listImage, URL.createObjectURL(file)]);
-                        images: [...images, e.target.files[0].name],
+                      setFiles([...files, file]);
-                      });
                     }}
                   ></Input>
                 </GridItem>
@@ -83,7 +87,17 @@ export default function ModalModifyImages(props) {
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme="purple" mr={3} onClick={onClose}>
+            <Button
+              colorScheme="purple"
+              mr={3}
+              onClick={(e) => {
+                setUserData({
+                  ...userData,
+                  images: [...listImage],
+                });
+                onClose();
+              }}
+            >
               Save
             </Button>
           </ModalFooter>

src/pages/api/file/file.js

@@ -0,0 +1,35 @@
+import fs from "fs";
+import formidable from "formidable";
+export const config = {
+  api: {
+    bodyParser: false,
+  },
+};
+
+const post = async (req, res) => {
+  const form = new formidable.IncomingForm();
+  console.log(form);
+  form.parse(req, async function (err, fields, files) {
+    await saveFile(files.file);
+    return res.status(201).send("");
+  });
+};
+
+const saveFile = async (file) => {
+  const data = fs.readFileSync(file.path);
+  fs.writeFileSync(`./public/imageUsers/${file.name}`, data);
+  await fs.unlinkSync(file.path);
+  return;
+};
+
+export default (req, res) => {
+  req.method === "POST"
+    ? post(req, res)
+    : req.method === "PUT"
+    ? console.log("PUT")
+    : req.method === "DELETE"
+    ? console.log("DELETE")
+    : req.method === "GET"
+    ? console.log("GET")
+    : res.status(404).send("");
+};

src/pages/userProfile.tsx

@@ -28,13 +28,12 @@ import { useState } from "react";
 export default function UserProfile() {
   const router = useRouter();
   const toast = useToast();
-  const { data: session, status } = useSession();
   const [isLoading, setIsLoading] = useState(false);
-  const { isOpen, onOpen, onClose } = useDisclosure();
 
-  // faire un model avec toutes les infos de user
   const [userData, setUserData] = useState({});
+  const [files, setFiles] = useState([]);
 
+  const { data: session, status } = useSession();
   if (status === "unauthenticated") router.push("/login");
 
   if (status === "authenticated") {
@@ -49,6 +48,37 @@ export default function UserProfile() {
 
       setIsLoading(true);
 
+      // if (files.length > 0) {
+      //   files.forEach((file) => {
+      //     const body = new FormData();
+      //     body.append("file", file);
+      //     const imagePostOptions = {
+      //       method: "POST",
+      //       headers: { "Content-Type": "application/json" },
+      //       body,
+      //     };
+
+      //     fetch(`/api/file/file`, imagePostOptions)
+      //       .then((res) => {
+      //         console.log(res);
+      //         setIsLoading(false);
+      //         toast({
+      //           title: `Ajout d'image effectué`,
+      //           status: "success",
+      //           isClosable: true,
+      //         });
+      //       })
+      //       .catch(() => {
+      //         setIsLoading(false);
+      //         toast({
+      //           title: `Erreur lors de l'envoi des images`,
+      //           status: "error",
+      //           isClosable: true,
+      //         });
+      //       });
+      //   });
+      // }
+
       fetch(`/api/users/${user.id}`, options)
         .then(() => {
           setIsLoading(false);
@@ -57,7 +87,7 @@ export default function UserProfile() {
             status: "success",
             isClosable: true,
           });
-          router.reload();
+          // router.reload();
         })
         .catch(() => {
           setIsLoading(false);
@@ -94,7 +124,14 @@ export default function UserProfile() {
         >
           <Flex flexDirection={"column"} alignItems={"center"} gap={"1rem"}>
             <Box width={"50%"}>
-              <Carousel images={user.images} borderRadius={"1rem"}></Carousel>
+              {userData.images ? (
+                <Carousel
+                  images={userData.images}
+                  borderRadius={"1rem"}
+                ></Carousel>
+              ) : (
+                <Carousel images={user.images} borderRadius={"1rem"}></Carousel>
+              )}
             </Box>
             {/* {modal} */}
             {!userData.images ? (
@@ -102,12 +139,16 @@ export default function UserProfile() {
                 setUserData={setUserData}
                 userData={userData}
                 images={user.images}
+                files={files}
+                setFiles={setFiles}
               />
             ) : (
               <ModalModifyImages
                 setUserData={setUserData}
                 userData={userData}
                 images={userData.images}
+                files={files}
+                setFiles={setFiles}
               />
             )}
             <Divider />
@@ -196,6 +237,7 @@ export default function UserProfile() {
                   <EditableTextarea />
                 </Editable>
               </Flex>
+              {/* préférences / sexe / type de relation recherchés */}
             </Box>
             <BottomBar variant={"fixed"} saveData={saveData} />
           </Flex>

yarn.lock

@@ -1664,6 +1664,11 @@
     "es-shim-unscopables" "^1.0.0"
     "get-intrinsic" "^1.1.3"
 
+"asap@^2.0.0":
+  "integrity" "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
+  "resolved" "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz"
+  "version" "2.0.6"
+
 "ast-types-flow@^0.0.7":
   "integrity" "sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag=="
   "resolved" "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
@@ -2104,6 +2109,14 @@
   "resolved" "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz"
   "version" "1.1.0"
 
+"dezalgo@^1.0.4":
+  "integrity" "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig=="
+  "resolved" "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz"
+  "version" "1.0.4"
+  dependencies:
+    "asap" "^2.0.0"
+    "wrappy" "1"
+
 "diff@^4.0.1":
   "integrity" "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A=="
   "resolved" "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz"
@@ -2610,6 +2623,16 @@
   dependencies:
     "is-callable" "^1.1.3"
 
+"formidable@^2.1.1":
+  "integrity" "sha512-0EcS9wCFEzLvfiks7omJ+SiYJAiD+TzK4Pcw1UlUoGnhUxDcMKjt0P7x8wEb0u6OHu8Nb98WG3nxtlF5C7bvUQ=="
+  "resolved" "https://registry.npmjs.org/formidable/-/formidable-2.1.1.tgz"
+  "version" "2.1.1"
+  dependencies:
+    "dezalgo" "^1.0.4"
+    "hexoid" "^1.0.0"
+    "once" "^1.4.0"
+    "qs" "^6.11.0"
+
 "fp-ts@2.13.1":
   "integrity" "sha512-0eu5ULPS2c/jsa1lGFneEFFEdTbembJv8e4QKXeVJ3lm/5hyve06dlKZrpxmMwJt6rYen7sxmHHK2CLaXvWuWQ=="
   "resolved" "https://registry.npmjs.org/fp-ts/-/fp-ts-2.13.1.tgz"
@@ -2664,6 +2687,11 @@
   "resolved" "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   "version" "1.0.0"
 
+"fs@^0.0.1-security":
+  "integrity" "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+  "resolved" "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz"
+  "version" "0.0.1-security"
+
 "function-bind@^1.1.1":
   "integrity" "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
   "resolved" "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
@@ -2903,6 +2931,11 @@
     "is-stream" "^2.0.0"
     "type-fest" "^0.8.0"
 
+"hexoid@^1.0.0":
+  "integrity" "sha512-QFLV0taWQOZtvIRIAdBChesmogZrtuXvVWsFHZTk2SU+anspqZ2vMnoLg7IE1+Uk16N19APic1BuF8bC8c2m5g=="
+  "resolved" "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz"
+  "version" "1.0.0"
+
 "hoist-non-react-statics@^3.3.1":
   "integrity" "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw=="
   "resolved" "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
@@ -3998,7 +4031,7 @@
   "resolved" "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
   "version" "2.3.0"
 
-"qs@^6.9.4":
+"qs@^6.11.0", "qs@^6.9.4":
   "integrity" "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ=="
   "resolved" "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz"
   "version" "6.11.1"