lucasvbr/meeting-app
1
0
Fork 0
mirror of https://github.com/LucasVbr/meeting-app.git synced 2026-05-13 17:21:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Input image userProfile

Browse Source
This commit is contained in:
Laurian-Dufrechou
2023-03-28 19:09:07 +02:00
parent caabf0ac7a
commit a039d44de4
6 changed files with 190 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+43
View File
@@ -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
+2
View File
@@ -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
+29 -15
View File
@@ -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}>
{images.map((image, index) => (
<Grid
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);
setUserData({
...userData,
images: [...images],
});
setlistImage(listImage.filter((_, i) => i !== index));
setFiles(files.filter((_, i) => i !== index));
}}
>
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) => {
setUserData({
...userData,
images: [...images, e.target.files[0].name],
});
onChange={({ target }) => {
const file = target.files[0];
setlistImage([...listImage, URL.createObjectURL(file)]);
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
+35
View File
@@ -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
+47 -5
View File
@@ -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
+34 -1
View File
@@ -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"