From 018af6890c68b62da009ada35b05c1c5be140f46 Mon Sep 17 00:00:00 2001 From: Laurian-Dufrechou Date: Mon, 3 Apr 2023 19:17:01 +0200 Subject: [PATCH] feat(Choose passions): Can now choose passion Todo : fetch userData in useEffect and using userData for userProfile --- ...421d8378e4fd27374c7f334_1680519705034.webp | Bin 10706 -> 0 bytes .../layout/user_profile/CustomCheckbox.jsx | 50 +++++ .../user_profile/ModalChoosePassion.jsx | 110 ++++++++++ .../layout/user_profile/ModalModifyImages.jsx | 204 ++++++++++++++++++ .../layout/user_profile/ProfileTagList.jsx | 16 ++ src/pages/userProfile.tsx | 44 ++-- yarn.lock | 11 +- 7 files changed, 411 insertions(+), 24 deletions(-) delete mode 100644 public/imageUsers/6421d8378e4fd27374c7f334_1680519705034.webp create mode 100644 src/components/layout/user_profile/CustomCheckbox.jsx create mode 100644 src/components/layout/user_profile/ModalChoosePassion.jsx create mode 100644 src/components/layout/user_profile/ModalModifyImages.jsx create mode 100644 src/components/layout/user_profile/ProfileTagList.jsx diff --git a/public/imageUsers/6421d8378e4fd27374c7f334_1680519705034.webp b/public/imageUsers/6421d8378e4fd27374c7f334_1680519705034.webp deleted file mode 100644 index 5d89d78ab3d040c5d511a7f971b6a48af07e9173..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 10706 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 diff --git a/src/components/layout/user_profile/CustomCheckbox.jsx b/src/components/layout/user_profile/CustomCheckbox.jsx new file mode 100644 index 0000000..0717359 --- /dev/null +++ b/src/components/layout/user_profile/CustomCheckbox.jsx @@ -0,0 +1,50 @@ +import { + Badge, + useCheckbox, + Text, + Flex, + chakra, + Box, + Tag, + TagLeftIcon, + TagLabel, +} from "@chakra-ui/react"; + +import { IoAdd, IoRemove } from "react-icons/io5"; + +export default function CustomCheckbox(props) { + const { text, checked, value } = props; + const { state, getInputProps, getCheckboxProps, getLabelProps, htmlProps } = + useCheckbox(props); + + return ( + + + {state.isChecked ? ( + + + {text} + + ) : ( + + + {text} + + )} + + ); +} diff --git a/src/components/layout/user_profile/ModalChoosePassion.jsx b/src/components/layout/user_profile/ModalChoosePassion.jsx new file mode 100644 index 0000000..fcf6bb0 --- /dev/null +++ b/src/components/layout/user_profile/ModalChoosePassion.jsx @@ -0,0 +1,110 @@ +import { + Badge, + Box, + Button, + Flex, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Text, + useCheckbox, + useCheckboxGroup, + useDisclosure, + useToast, +} from "@chakra-ui/react"; +import { useEffect } from "react"; +import { useState } from "react"; +import { RiEditBoxLine } from "react-icons/ri"; +import CustomCheckbox from "./CustomCheckbox"; + +export default function ModalChoosePassion(props) { + const { isOpen, onOpen, onClose } = useDisclosure(); + const { user, passions } = props; + const toast = useToast(); + + const { value, getCheckboxProps } = useCheckboxGroup({ + defaultValue: user.PassionID, + }); + + const savePassions = (PassionID) => { + const options = { + method: "PATCH", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ PassionID }), + }; + + fetch(`/api/users/${user.id}`, options) + .then((res) => res.json()) + .then((data) => { + toast({ + title: "Centres d'intérêts mis à jour", + status: "success", + duration: 9000, + isClosable: true, + }); + onClose(); + }) + .catch((err) => { + console.log(err); + }); + }; + + return ( + <> + + + + + + Choix des centres d'intérèts + + + + {passions !== null ? ( + passions.map((passion, index) => { + return ( + + ); + }) + ) : ( + <> + )} + + + + + + + + + + ); +} diff --git a/src/components/layout/user_profile/ModalModifyImages.jsx b/src/components/layout/user_profile/ModalModifyImages.jsx new file mode 100644 index 0000000..f31de9a --- /dev/null +++ b/src/components/layout/user_profile/ModalModifyImages.jsx @@ -0,0 +1,204 @@ +import { + Button, + Flex, + Grid, + GridItem, + Image, + Input, + Modal, + ModalBody, + ModalCloseButton, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + useDisclosure, + useToast, +} 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, user, userData, setUserData } = props; + const [listImage, setlistImage] = useState(images); + const toast = useToast(); + + const uploadImage = async (file) => { + const body = new FormData(); + body.append("file", file); + const imagePostOptions = { + method: "POST", + body, + }; + + const imagePatchOptions = { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + images: [...listImage, `imageUsers/${file.name}`], + }), + }; + + fetch(`/api/file/uploadFile`, imagePostOptions) + .then((res) => { + fetch(`/api/users/${user.id}`, imagePatchOptions) + .then((res) => { + toast({ + title: `Ajout d'image effectué`, + status: "success", + isClosable: true, + }); + setlistImage([...listImage, `imageUsers/${file.name}`]); + // router.reload(); + }) + .catch(() => { + setIsLoading(false); + toast({ + title: `Erreur lors de l'ajout des images`, + status: "error", + isClosable: true, + }); + }); + }) + .catch((err) => { + toast({ + title: `Erreur lors de l'ajout des images`, + status: "error", + isClosable: true, + }); + console.log(err); + }); + }; + + const deleteImage = async (fileName) => { + let newListImage = listImage; + const index = newListImage.indexOf(fileName); + + if (index > -1) { + newListImage.splice(index, 1); + setlistImage([...newListImage]); + } + + const imageDeleteOptions = { + method: "DELETE", + body: JSON.stringify({ fileName: fileName.split("/").pop() }), + }; + + fetch(`/api/file/deleteFile`, imageDeleteOptions).then((res) => { + const imagePatchOptions = { + method: "PUT", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify({ + images: [...listImage], + }), + }; + fetch(`/api/users/${user.id}`, imagePatchOptions) + .then((res) => { + toast({ + title: `Suppression d'image effectué`, + status: "success", + isClosable: true, + }); + }) + .catch(() => { + toast({ + title: `Erreur lors de la suppression des images`, + status: "error", + isClosable: true, + }); + }); + }); + }; + + return ( + <> + + + + + + Modification des images + + + + {listImage.map((image, index) => ( + + + + + + + ))} + {listImage.length < 5 ? ( + + { + const date = new Date(); + const time = date.getTime(); + + const file = target.files[0]; + const extension = file.name.split(".").pop(); + const newFile = new File( + [file], + `${user.id}_${time}.${extension}`, + { + type: file.type, + } + ); + uploadImage(newFile); + }} + > + + ) : ( + <> + )} + + + + + + + + + + ); +} diff --git a/src/components/layout/user_profile/ProfileTagList.jsx b/src/components/layout/user_profile/ProfileTagList.jsx new file mode 100644 index 0000000..2b66100 --- /dev/null +++ b/src/components/layout/user_profile/ProfileTagList.jsx @@ -0,0 +1,16 @@ +import { Flex, Tag } from "@chakra-ui/react"; + +export default function ProfileBadgeList(props) { + const { passions, userPassions } = props; + return ( + + {userPassions.map((idPassion, index) => ( + + {passions !== null && passions !== undefined + ? passions.find((element) => element.id === idPassion).name + : ""} + + ))} + + ); +} diff --git a/src/pages/userProfile.tsx b/src/pages/userProfile.tsx index aa18ccd..c08b0fb 100644 --- a/src/pages/userProfile.tsx +++ b/src/pages/userProfile.tsx @@ -23,21 +23,22 @@ import { RadioGroup, Text, useToast, + VStack, } from "@chakra-ui/react"; import ModalModifyImages from "@/components/layout/user_profile/ModalModifyImages"; import ModalChoosePassion from "@/components/layout/user_profile/ModalChoosePassion"; -import ProfileBadgeList from "@/components/layout/user_profile/ProfileBadgeList"; +import ProfileTagList from "@/components/layout/user_profile/ProfileTagList"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import { useForm, Controller } from "react-hook-form"; export default function UserProfile() { const router = useRouter(); const toast = useToast(); - const [isLoading, setIsLoading] = useState(false); + const [passions, setPassions] = useState(null); const { handleSubmit, @@ -45,6 +46,18 @@ export default function UserProfile() { formState: { errors }, } = useForm(); + useEffect(() => { + fetch(`/api/passions`) + .then((res) => res.json()) + .then((data) => { + setPassions([...data]); + }) + .catch((err) => { + console.log(err); + }); + }, []); + // faire un useEffect ou je fetch user + const [userData, setUserData] = useState({}); const { data: session, status } = useSession(); @@ -86,7 +99,7 @@ export default function UserProfile() { .then((res) => { setIsLoading(false); toast({ - position:'top', + position: "top", title: `Modifications effectuées`, status: "success", isClosable: true, @@ -97,7 +110,7 @@ export default function UserProfile() { setIsLoading(false); toast({ title: `Erreur lors de l'envoi des modifications`, - position :'top', + position: "top", status: "error", isClosable: true, }); @@ -310,16 +323,15 @@ export default function UserProfile() { Centre d'intéret : - ( - <> - - - - )} - /> + + + + @@ -403,7 +415,7 @@ export default function UserProfile() {