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

src/components/layout/profile/ModalChoosePassion.tsx

@@ -13,70 +13,76 @@ 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(() => {
         toast({
-            title: 'Centres d\'intérêts mis à jour',
+          title: "Centres d'intérêts mis à jour",
-            status: 'success',
+          status: "success",
           duration: 9000,
         });
-          client.invalidateQueries('user');
         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
       </Button>
 
-        <Modal blockScrollOnMount={false} size={'4xl'} isOpen={isOpen}
+      <Modal
-               onClose={onClose} scrollBehavior={'inside'}>
+        blockScrollOnMount={false}
-          <ModalOverlay/>
+        size={"4xl"}
+        isOpen={isOpen}
+        onClose={onClose}
+        scrollBehavior={"inside"}
+      >
+        <ModalOverlay />
         <ModalContent>
           <ModalHeader>Choix des centres d'intérêts</ModalHeader>
-            <ModalCloseButton/>
+          <ModalCloseButton />
           <ModalBody>
-              <Flex gap={'1rem'} flexWrap="wrap">
+            <Flex gap={"1rem"} flexWrap="wrap">
-                {passions && (
+              {passions &&
                 passions.map((passion: Passion) => (
-                          <CustomCheckbox key={passion.id} text={passion.name}
+                  <CustomCheckbox
-                                          {...getCheckboxProps({value: passion.id})}/>
+                    key={passion.id}
-                      )
+                    text={passion.name}
-                    )
+                    {...getCheckboxProps({ value: passion.id })}
-                )}
+                  />
+                ))}
             </Flex>
           </ModalBody>
 

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);