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"}>

src/pages/api/user/userDashboard.js

@@ -0,0 +1,22 @@
+const { PrismaClient } = require("@prisma/client");
+
+const get = async (req, res) => {
+  const { preference, excludedId } = req.query;
+  const prisma = new PrismaClient();
+  // a terme mettre l'age, la distance
+  const users = await prisma.user.findMany({
+    where: {
+      AND: [
+        { gender: { equals: preference } },
+        { images: { isEmpty: false }, NOT: { id: { equals: excludedId } } },
+      ],
+    },
+  });
+  res.status(200).send(users);
+};
+
+export default (req, res) => {
+  req.method === "GET"
+    ? get(req, res)
+    : res.status(404).send({ message: "Wrong method, please use GET" });
+};

src/pages/dashboard.tsx

@@ -1,57 +1,118 @@
-import { Grid, GridItem, Text, Box } from "@chakra-ui/react";
+import { Grid, GridItem, Text, Box, useToast } from "@chakra-ui/react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import { useState } from "react";
 
 import type { Session } from "@/models/auth/Session";
 import CardUser from "../components/layout/dashboard/card_user/CardUser";
+import SearchFailCard from "../components/layout/dashboard/card_user/SearchFailCard";
+
 import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel";
 import Head from "next/head";
 import { websiteName } from "@/lib/constants";
-import Navbar from "@/components/Navbar";
+import { useQuery } from "@tanstack/react-query";
+import LoadingPage from "@/components/LoadingPage";
 
 export default function Dashboard() {
   const router = useRouter();
+  const toast = useToast({ position: "top", isClosable: true });
+  const [liked, setLiked] = useState(null);
+  const [disliked, setDisliked] = useState(null);
+
   const { data: session, status } = useSession();
 
-  if (status === "loading") return <Text>Loading...</Text>;
-  if (status === "unauthenticated") router.push("/login");
+  const {
+    isLoading,
+    isError,
+    data: loggedUser,
+    error,
+  } = useQuery({
+    queryKey: ["LoggedUser"],
+    enabled: status === "authenticated",
+    queryFn: async () => {
+      const { user } = session as unknown as Session;
 
-  if (status === "authenticated") {
-    const { user } = session as unknown as Session;
+      return fetch(`/api/users/${user.id}`)
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
 
-    // il faudra l'enlever
-    const refinedUser = {
-      ...user,
-      age: 21,
-      aPropos: "Je suis la personne fictive la plus fictive",
-      images: ["135538.webp"],
-      passions: ["Sport", "Voiture", "Cuisine"],
-    };
+  const {
+    data: listUsers,
+    isError: isErrorListUsers,
+    isLoading: isLoadingListUsers,
+    error: errorListUsers,
+  } = useQuery({
+    queryKey: ["ListUsers"],
+    enabled: status === "authenticated" && !isLoading,
+    queryFn: async () => {
+      return fetch(
+        `/api/user/userDashboard?preference=${loggedUser.gender}&excludedId=${loggedUser.id}`
+      ) //exclure les profils déjà like ou dislike
+        .then((res) => res.json())
+        .catch((err) => {
+          return err;
+        });
+    },
+  });
 
-    return (
-      <>
-        <Head>
-          <title>{websiteName} | Dashboard</title>
-        </Head>
-
-        <Grid
-          templateColumns={"repeat(5, 1fr)"}
-          templateRows={"repeat(2, 1fr)"}
-          gap={5}
-          minH={"100vh"}
-        >
-          <GridItem area={"1 / 1 / 3 / 2"}>
-            <LeftPanel user={user} />
-          </GridItem>
-          <GridItem area={"1 / 2 / 3 / 4"}>
-            <Box py={3}>
-              <CardUser user={refinedUser} />
-            </Box>
-          </GridItem>
-          <GridItem area={"1 / 4 / 2 / 6"}>{/*Right top*/}</GridItem>
-          <GridItem area={"2 / 4 / 3 / 6"}>{/*Right Bottom*/}</GridItem>
-        </Grid>
-      </>
-    );
+  if (isLoading) {
+    if (status === "unauthenticated") router.push("/login");
+    return <LoadingPage />;
   }
+
+  if (isError) {
+    toast({
+      title: `Erreur lors de la récupération des données du profil`,
+      status: "error",
+      position: "top",
+    });
+    if (status === "unauthenticated") router.push("/");
+    return <span>Error: {error.message}</span>;
+  }
+
+  return (
+    <>
+      <Head>
+        <title>{websiteName} | Dashboard</title>
+      </Head>
+
+      <Grid
+        templateColumns={"repeat(5, 1fr)"}
+        templateRows={"repeat(2, 1fr)"}
+        gap={5}
+        minH={"100vh"}
+      >
+        <GridItem area={"1 / 1 / 3 / 2"}>
+          <LeftPanel user={loggedUser} />
+        </GridItem>
+        <GridItem area={"1 / 2 / 3 / 4"}>
+          <Box py={3}>
+            {isLoadingListUsers ? (
+              <LoadingPage />
+            ) : listUsers.length === 0 && !isErrorListUsers ? (
+              <SearchFailCard />
+            ) : (
+              listUsers.map((user: any) => (
+                <CardUser
+                  key={user.id}
+                  user={user}
+                  loggedUser={loggedUser}
+                  userLiked={liked}
+                  setLiked={setLiked}
+                  userDisliked={disliked}
+                  setDisliked={setDisliked}
+                />
+              ))
+            )}
+          </Box>
+        </GridItem>
+        <GridItem area={"1 / 4 / 2 / 6"}>{/*Right top*/}</GridItem>
+        <GridItem area={"2 / 4 / 3 / 6"}>{/*Right Bottom*/}</GridItem>
+      </Grid>
+    </>
+  );
 }

src/pages/userProfile.tsx

@@ -57,7 +57,6 @@ export default function UserProfile() {
         console.log(err);
       });
   }, []);
-  // faire un useEffect ou je fetch user
 
   const { data: session, status } = useSession();
 
@@ -170,21 +169,11 @@ export default function UserProfile() {
               ></Carousel>
             )}
           </Box>
-          {/* {modal} */}
-
-          {!userData.images ? (
-            <ModalModifyImages
-              userData={userData}
-              user={userData}
-              images={userData.images}
-            />
-          ) : (
-            <ModalModifyImages
-              userData={userData}
-              user={userData}
-              images={userData.images}
-            />
-          )}
+          <ModalModifyImages
+            userData={userData}
+            user={userData}
+            images={userData.images}
+          />
 
           <Divider colorScheme={"purple"} />
           <Text align={"center"} as="i" color={"grey"}>
@@ -267,7 +256,8 @@ export default function UserProfile() {
                   color={"grey"}
                   isDisabled={true}
                   defaultValue={
-                    userData.birthdate === undefined
+                    userData.birthdate === undefined ||
+                    userData.birthdate === null
                       ? "Non renseigné"
                       : formateDate(userData.birthdate.toString())
                   }