From a039d44de40f916fd3d8a36163c1449507ee828f Mon Sep 17 00:00:00 2001 From: Laurian-Dufrechou Date: Tue, 28 Mar 2023 19:09:07 +0200 Subject: [PATCH] Input image userProfile --- package-lock.json | 43 +++++++++++++++++++++++ package.json | 2 ++ src/components/ModalModifyImages.jsx | 44 +++++++++++++++-------- src/pages/api/file/file.js | 35 +++++++++++++++++++ src/pages/userProfile.tsx | 52 +++++++++++++++++++++++++--- yarn.lock | 35 ++++++++++++++++++- 6 files changed, 190 insertions(+), 21 deletions(-) create mode 100644 src/pages/api/file/file.js diff --git a/package-lock.json b/package-lock.json index 0745c30..afee2ad 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 41c81c2..e490ec2 100644 --- a/package.json +++ b/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", diff --git a/src/components/ModalModifyImages.jsx b/src/components/ModalModifyImages.jsx index f8c902b..66e866b 100644 --- a/src/components/ModalModifyImages.jsx +++ b/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 ( <> diff --git a/src/pages/api/file/file.js b/src/pages/api/file/file.js new file mode 100644 index 0000000..472c495 --- /dev/null +++ b/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(""); +}; diff --git a/src/pages/userProfile.tsx b/src/pages/userProfile.tsx index fa9b030..3ed3540 100644 --- a/src/pages/userProfile.tsx +++ b/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() { > - + {userData.images ? ( + + ) : ( + + )} {/* {modal} */} {!userData.images ? ( @@ -102,12 +139,16 @@ export default function UserProfile() { setUserData={setUserData} userData={userData} images={user.images} + files={files} + setFiles={setFiles} /> ) : ( )} @@ -196,6 +237,7 @@ export default function UserProfile() { + {/* préférences / sexe / type de relation recherchés */} diff --git a/yarn.lock b/yarn.lock index 0137191..0568a37 100644 --- a/yarn.lock +++ b/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"