feat(cardUser with listOfUserFetched): cardUser with listOfUserFetched

users fetched using following parameters :

preference (HOMME en dur

src/components/layout/dashboard/card_user/CardUser.jsx

@@ -11,41 +11,75 @@ import {
 import Carousel from "../../../Carousel";
 import { BiHeart } from "react-icons/bi";
 import { RxCross1 } from "react-icons/rx";
+import { useQuery } from "@tanstack/react-query";
 import PassionTagList from "@/components/layout/dashboard/card_user/PassionTagList";
+import { useState } from "react";
 
 export default function CardUser(props) {
-  const { user } = props;
+  const { user, loggedUser, userLiked, setLiked, userDisliked, setDisliked } =
+    props;
 
-  const interestingUser = {
-    lastName: "dujardin",
-    firstName: "jean",
-    age: 19,
-    aPropos: "Je suis une personne fictive, pas tres fictive",
-    images: ["/401446.webp", "/135538.webp"],
-    passions: ["Sport", "Piscine", "Formule1"],
+  const [hidden, setHidden] = useState(false);
+
+  const {
+    isLoading: passionLoading,
+    isError: passionIsError,
+    data: listPassions,
+    error: passionError,
+  } = useQuery({
+    queryKey: ["passions"],
+    queryFn: async () => {
+      return fetch(`/api/passions/`)
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
+
+  const formateDateToAge = (birthdate) => {
+    const date = new Date(birthdate);
+    var ageDifMs = Date.now() - date.getTime();
+    var ageDate = new Date(ageDifMs); // miliseconds from epoch
+    return Math.abs(ageDate.getUTCFullYear() - 1970);
   };
 
   return (
-    <Card w={"100%"} h={"100%"} borderRadius={"1rem"} overflow={"hidden"}>
+    <Card
+      // position={"absolute"}
+      w={"100%"}
+      h={"100%"}
+      borderRadius={"1rem"}
+      overflow={"hidden"}
+      hidden={hidden}
+    >
       <CardHeader>
-        <Carousel borderRadius={"1rem"} images={interestingUser.images} />
+        <Carousel borderRadius={"1rem"} images={user.images} />
       </CardHeader>
 
       <CardBody>
         <Flex justify={"space-between"} mb={"20px"}>
           <Heading fontSize={"1.5rem"} fontWeight={"bold"} flexBasis={"70%"}>
-            {interestingUser.firstName} {interestingUser.lastName},{" "}
-            {interestingUser.age}ans
+            {user.firstName} {user.lastName}, {formateDateToAge(user.birthdate)}{" "}
+            ans
           </Heading>
 
           <Flex gap={1}>
-            <IconButton borderRadius={"1rem"} colorScheme={"purple"}>
+            <IconButton
+              borderRadius={"1rem"}
+              colorScheme={"purple"}
+              onClick={() => {
+                // setLiked([...userLiked, user.id]);
+                setHidden(true);
+              }}
+            >
               <BiHeart />
             </IconButton>
             <IconButton
               borderRadius={"1rem"}
               colorScheme={"purple"}
               variant={"outline"}
+              // onClick={setDisiked([...userDisliked, user.id])}
             >
               <RxCross1 />
             </IconButton>
@@ -53,20 +87,27 @@ export default function CardUser(props) {
         </Flex>
 
         <Box mb={"20px"}>
-          <Heading size={"sm"} fontWeight={"bold"}>
+          <Heading size={"sm"} fontWeight={"bold"} mb="0.5rem">
             A propos :
           </Heading>
-          <Text>{interestingUser.aPropos}</Text>
+          <Text as="i">&quot;{user.bio}&quot;</Text>
         </Box>
 
         <Box>
           <Heading size={"sm"} fontWeight={"bold"}>
             Passions :
           </Heading>
-          <PassionTagList
-            passions={interestingUser.passions}
-            userPassions={user.passions}
-          />
+          {passionLoading ? (
+            <Text>Chargement des passions...</Text>
+          ) : passionIsError ? (
+            <Text>Erreur lors du chargement des passions</Text>
+          ) : (
+            <PassionTagList
+              passions={user.PassionID}
+              userPassions={loggedUser.PassionID}
+              listPassions={listPassions}
+            />
+          )}
         </Box>
       </CardBody>
     </Card>

src/components/layout/dashboard/card_user/PassionTagList.tsx

@@ -3,18 +3,23 @@ import { Badge, Flex, Tag } from "@chakra-ui/react";
 type Props = {
   passions: string[];
   userPassions?: string[];
+  listPassions?: Object[];
 };
 
-export default function PassionTagList({ passions, userPassions = [] }: Props) {
+export default function PassionTagList({
+  passions,
+  userPassions = [],
+  listPassions,
+}: Props) {
   return (
-    <Flex gap={"0.5rem"} mt={"1vh"}>
-      {passions.map((passion, index) => (
+    <Flex gap={"0.5rem"} mt={"1vh"} flexWrap="wrap">
+      {passions.map((passionID, index) => (
         <Tag
           key={index}
-          variant={userPassions.includes(passion) ? "subtle" : "outline"}
+          variant={userPassions.includes(passionID) ? "subtle" : "outline"}
           colorScheme={"purple"}
         >
-          {passion}
+          {listPassions?.find((passion) => passion.id === passionID)?.name}
         </Tag>
       ))}
     </Flex>

src/components/layout/dashboard/card_user/SearchFailCard.jsx

@@ -0,0 +1,14 @@
+import { Card, Text, CardBody, CardHeader } from "@chakra-ui/react";
+
+export default function SearchFailCard(props) {
+  return (
+    <Card w={"100%"} h={"100%"} borderRadius={"1rem"} overflow={"hidden"}>
+      <CardHeader> Aucun profil correspondant à vos critères </CardHeader>
+      <CardBody>
+        <Text as="b">
+          Modifiez vos critères de recherche ou attendez de nouveaux inscrits
+        </Text>
+      </CardBody>
+    </Card>
+  );
+}

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

@@ -36,7 +36,11 @@ export default function LeftPanel(props) {
     >
       <Flex direction={"column"} height={"100%"} margin={"10%"}>
         <Box>
-          <Image src={user.images[0]} borderRadius={"1rem"} />
+          {user.images.length === 0 ? (
+            <Image src={"/blank_profile_picture.webp"} borderRadius={"1rem"} />
+          ) : (
+            <Image src={user.images[0]} borderRadius={"1rem"} />
+          )}
           <Box mt={"2rem"}>
             <Flex align={"center"} justifyContent="space-between" mb={"1rem"}>
               <Text fontSize={"1.5rem"} fontWeight={"bold"}>