image users

src/components/ModalModifyImages.jsx

@@ -1,204 +0,0 @@
-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 (
-    <>
-      <Button
-        colorScheme={"purple"}
-        onClick={onOpen}
-        leftIcon={<RiEditBoxLine />}
-      >
-        Modifier les images
-      </Button>
-
-      <Modal
-        blockScrollOnMount={false}
-        size={"4xl"}
-        isOpen={isOpen}
-        onClose={onClose}
-        scrollBehavior={"inside"}
-      >
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>Modification des images</ModalHeader>
-          <ModalCloseButton />
-          <ModalBody>
-            <Grid
-              templateColumns={`repeat(${listImage.length + 1}, 1fr)`}
-              gap={5}
-            >
-              {listImage.map((image, index) => (
-                <GridItem key={index}>
-                  <Flex direction={"column"} gap={"1rem"}>
-                    <Image src={image} />
-                    <Button
-                      id={"" + index}
-                      colorScheme={"red"}
-                      onClick={(e) => {
-                        deleteImage(`${listImage[index]}`);
-                      }}
-                    >
-                      Supprimer l'image
-                    </Button>
-                  </Flex>
-                </GridItem>
-              ))}
-              {listImage.length < 5 ? (
-                <GridItem width={"100%"}>
-                  <Input
-                    type={"file"}
-                    height={"100%"}
-                    accept={"image/png, image/jpeg, image/webp"}
-                    onInput={({ target }) => {
-                      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);
-                    }}
-                  ></Input>
-                </GridItem>
-              ) : (
-                <></>
-              )}
-            </Grid>
-          </ModalBody>
-
-          <ModalFooter>
-            <Button
-              colorScheme="purple"
-              mr={3}
-              onClick={(e) => {
-                setUserData({
-                  ...userData,
-                  images: [...listImage],
-                });
-                onClose();
-              }}
-            >
-              Save
-            </Button>
-          </ModalFooter>
-        </ModalContent>
-      </Modal>
-    </>
-  );
-}

src/components/layout/dashboard/left_panel/LeftPanel.jsx

@@ -12,6 +12,11 @@ export default function LeftPanel(props) {
   const router = useRouter();
   const { user } = props;
 
+  const formateDate = (dateString) => {
+    var options = { year: "numeric", month: "long", day: "numeric" };
+    return new Date(dateString).toLocaleDateString([], options);
+  };
+
   return (
     <Card
       width={"20vw"}
@@ -23,12 +28,17 @@ export default function LeftPanel(props) {
       <Flex direction={"column"} height={"100%"} margin={"10%"}>
         <Box>
           <Image src={user.images[0]} borderRadius={"1rem"} />
-          <Box mt={"1vh"}>
-            <Text fontSize={"1.5rem"} fontWeight={"bold"}>
-              {user.firstName} {user.lastName}
-            </Text>
-            <Text as="i" fontWeight={"bold"}>
-              &quot;{user.aPropos}&quot;
+          <Box mt={"1rem"}>
+            <Flex align={"center"} justifyContent="space-between">
+              <Text fontSize={"1.5rem"} fontWeight={"bold"}>
+                {user.firstName} {user.lastName}
+              </Text>
+              <Text fontSize={"1rem"} fontWeight={"bold"}>
+                {formateDate(user.birthdate)}
+              </Text>
+            </Flex>
+            <Text mt={"3rem"} as="i" fontWeight={"bold"}>
+              &quot;{user.bio}&quot;
             </Text>
           </Box>
         </Box>

src/pages/dashboard.tsx

@@ -41,7 +41,7 @@ export default function Dashboard() {
           minH={"100vh"}
         >
           <GridItem area={"1 / 1 / 3 / 2"}>
-            <LeftPanel user={refinedUser} />
+            <LeftPanel user={user} />
           </GridItem>
           <GridItem area={"1 / 2 / 3 / 4"}>
             <Box py={3}>

src/pages/userProfile.tsx

@@ -25,7 +25,9 @@ import {
   useToast,
 } from "@chakra-ui/react";
 
-import ModalModifyImages from "@/components/ModalModifyImages";
+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 { useState } from "react";
 import { useForm, Controller } from "react-hook-form";
@@ -33,6 +35,8 @@ import { useForm, Controller } from "react-hook-form";
 export default function UserProfile() {
   const router = useRouter();
   const toast = useToast();
+
+
   const [isLoading, setIsLoading] = useState(false);
 
   const {
@@ -82,6 +86,7 @@ export default function UserProfile() {
           .then((res) => {
             setIsLoading(false);
             toast({
+              position:'top',
               title: `Modifications effectuées`,
               status: "success",
               isClosable: true,
@@ -92,6 +97,7 @@ export default function UserProfile() {
             setIsLoading(false);
             toast({
               title: `Erreur lors de l'envoi des modifications`,
+              position :'top',
               status: "error",
               isClosable: true,
             });
@@ -299,6 +305,24 @@ export default function UserProfile() {
                 </FormControl>
               </Box>
               <Divider colorScheme={"purple"} />
+              <Box my={"1rem"}>
+                <Box>
+                  <FormLabel as={"legend"} htmlFor={"passion"}>
+                    Centre d'intéret :
+                  </FormLabel>
+                  <Controller
+                    name={"passion"}
+                    control={control}
+                    render={({ field }) => (
+                      <>
+                        <ProfileBadgeList passions={user.passion !== undefined ? user.passion : []}/>
+                        <ModalChoosePassion user={user}/>
+                      </>
+                    )}
+                  />
+                </Box>
+              </Box>
+              <Divider colorScheme={"purple"} />
               <Box my={"1rem"}>
                 <Box>
                   <FormLabel as={"legend"} htmlFor={"gender"}>
@@ -316,9 +340,6 @@ export default function UserProfile() {
                         defaultValue={
                           user.gender === null ? Gender.UNKNOWN : user.gender
                         }
-                        // onChange={(value) => {
-                        //   setUserData({ ...userData, gender: value });
-                        // }}
                       >
                         <HStack spacing={"0.5rem"}>
                           <Radio value={Gender.MALE}>
@@ -372,7 +393,7 @@ export default function UserProfile() {
                 </Flex> */}
               </Box>
               <Divider colorScheme={"purple"} />
-              <Center my={"1rem"}>
+              <Center gap={"1rem"} my={"1rem"}>
                 <Button
                   colorScheme={"purple"}
                   isLoading={isLoading}
@@ -380,6 +401,13 @@ export default function UserProfile() {
                 >
                   Sauvegarder les modifications
                 </Button>
+                <Button
+                  colorScheme={"purple"}
+                  variant='outline'
+                  onClick={() => router.push("/dashboard")}
+                >
+                  Retour
+                </Button>
               </Center>
             </Box>
           </Flex>