feat(image des users de la vidéo): image user de la vidéo

src/components/layout/profile/ModalChoosePassion.tsx

@@ -13,80 +13,86 @@ import {
   useCheckboxGroup,
   useDisclosure,
   useToast,
-} from '@chakra-ui/react';
+} from "@chakra-ui/react";
-import {useQueryClient} from '@tanstack/react-query';
+import { useQueryClient } from "@tanstack/react-query";
-import {RiEditBoxLine} from 'react-icons/ri';
+import { RiEditBoxLine } from "react-icons/ri";
-import CustomCheckbox from './CustomCheckbox';
+import CustomCheckbox from "./CustomCheckbox";
-import {Passion} from '@prisma/client';
+import { Passion } from "@prisma/client";
 
 export default function ModalChoosePassion(props) {
-  const {isOpen, onOpen, onClose} = useDisclosure();
+  const { isOpen, onOpen, onClose } = useDisclosure();
-  const {user, passions} = props;
+  const { user, passions } = props;
-  const toast = useToast({position: 'top', isClosable: true});
+  const toast = useToast({ position: "top", isClosable: true });
   const client = useQueryClient();
 
-  const {value, getCheckboxProps} = useCheckboxGroup({
+  const { value, getCheckboxProps } = useCheckboxGroup({
     defaultValue: user.PassionID,
   });
 
   const savePassions = (idPassionList) => {
-    let jsonPassions = {Passion: {connect: []}};
+    let jsonPassions = { Passion: { connect: [] } };
 
     idPassionList.forEach((id) => {
-      jsonPassions.Passion.connect.push({id: id});
+      jsonPassions.Passion.connect.push({ id: id });
     });
 
     const options = {
-      method: 'PATCH',
+      method: "PUT",
-      headers: {'Content-Type': 'application/json'},
+      headers: { "Content-Type": "application/json" },
       body: JSON.stringify(jsonPassions),
     };
 
     fetch(`/api/users/${user.id}`, options)
-        .then(res => res.json())
+      .then((res) => res.json())
-        .then(() => {
+      .then(() => {
-          toast({
+        toast({
-            title: 'Centres d\'intérêts mis à jour',
+          title: "Centres d'intérêts mis à jour",
-            status: 'success',
+          status: "success",
-            duration: 9000,
+          duration: 9000,
-          });
+        });
-          client.invalidateQueries('user');
+        onClose();
-          onClose();
+        client.invalidateQueries({ queryKey: ["userProfile"] });
-        })
+      })
-        .catch(err => console.log(err));
+      .catch((err) => console.log(err));
   };
 
   return (
-      <>
+    <>
-        <Button onClick={onOpen} leftIcon={<RiEditBoxLine/>}>
+      <Button onClick={onOpen} leftIcon={<RiEditBoxLine />}>
-          Choisir les centres d'intérêts
+        Choisir les centres d'intérêts
-        </Button>
+      </Button>
 
-        <Modal blockScrollOnMount={false} size={'4xl'} isOpen={isOpen}
+      <Modal
-               onClose={onClose} scrollBehavior={'inside'}>
+        blockScrollOnMount={false}
-          <ModalOverlay/>
+        size={"4xl"}
-          <ModalContent>
+        isOpen={isOpen}
-            <ModalHeader>Choix des centres d'intérêts</ModalHeader>
+        onClose={onClose}
-            <ModalCloseButton/>
+        scrollBehavior={"inside"}
-            <ModalBody>
+      >
-              <Flex gap={'1rem'} flexWrap="wrap">
+        <ModalOverlay />
-                {passions && (
+        <ModalContent>
-                    passions.map((passion: Passion) => (
+          <ModalHeader>Choix des centres d'intérêts</ModalHeader>
-                          <CustomCheckbox key={passion.id} text={passion.name}
+          <ModalCloseButton />
-                                          {...getCheckboxProps({value: passion.id})}/>
+          <ModalBody>
-                      )
+            <Flex gap={"1rem"} flexWrap="wrap">
-                    )
+              {passions &&
-                )}
+                passions.map((passion: Passion) => (
-              </Flex>
+                  <CustomCheckbox
-            </ModalBody>
+                    key={passion.id}
+                    text={passion.name}
+                    {...getCheckboxProps({ value: passion.id })}
+                  />
+                ))}
+            </Flex>
+          </ModalBody>
 
-            <ModalFooter>
+          <ModalFooter>
-              <Button mr={3} onClick={() => savePassions(value)}>
+            <Button mr={3} onClick={() => savePassions(value)}>
-                Save
+              Save
-              </Button>
+            </Button>
-            </ModalFooter>
+          </ModalFooter>
-          </ModalContent>
+        </ModalContent>
-        </Modal>
+      </Modal>
-      </>
+    </>
   );
 }

src/components/layout/profile/ModalModifyImages.tsx

@@ -192,7 +192,7 @@ export default function ModalModifyImages(props) {
             <Button
               mr={3}
               onClick={() => {
-                client.invalidateQueries("user");
+                client.invalidateQueries({ queryKey: ["userProfile"] });
                 onClose();
               }}
             >

src/pages/profile.tsx

@@ -72,7 +72,7 @@ export default function UserProfile() {
     data: userData,
     error,
   } = useQuery({
-    queryKey: ["user"],
+    queryKey: ["userProfile"],
     enabled: status === "authenticated",
     queryFn: async () => {
       const { user } = session as unknown as Session;
@@ -149,7 +149,7 @@ export default function UserProfile() {
             status: "success",
             isClosable: true,
           });
-          queryClient.invalidateQueries({ queryKey: ["user"] });
+          queryClient.invalidateQueries({ queryKey: ["userProfile"] });
         })
         .catch((err) => {
           setCurrentlyLoading(false);