fix(multiple bugs (map, dashboard, carousel)): multiple bugs (map, dashboard, carousel)

src/components/Carousel.tsx

@@ -1,13 +1,13 @@
-import {useState} from 'react';
+import { useState } from "react";
-import {Flex, IconButton} from '@chakra-ui/react';
+import { Flex, IconButton } from "@chakra-ui/react";
-import {BiLeftArrowAlt, BiRightArrowAlt} from 'react-icons/bi';
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
 
 interface Props {
   images: string[];
   borderRadius?: string | number;
 }
 
-const Carousel = ({images, borderRadius: bRadius}: Props) => {
+const Carousel = ({ images, borderRadius: bRadius }: Props) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
   const handleClickPrevious = () => {
@@ -18,22 +18,39 @@ const Carousel = ({images, borderRadius: bRadius}: Props) => {
     setCurrentIndex(currentIndex === images.length - 1 ? 0 : currentIndex + 1);
   };
 
-  if (images.length === 0) images = ['blank_profile_picture.webp'];
+  if (images.length === 0) images = ["blank_profile_picture.webp"];
 
   return (
-      <Flex px={2} align="center" borderRadius={bRadius} overflow={'hidden'}
+    <Flex
-            justify={'space-between'} bgColor={'purple.50'} height={500}
+      px={2}
-            bgImage={images[currentIndex]} bgSize={'cover'}
+      align="center"
-            bgRepeat={'no-repeat'} bgPosition={'center'} width={'100%'}>
+      borderRadius={bRadius}
-        <IconButton aria-label="left-arrow" borderRadius="full"
+      overflow={"hidden"}
-                    onClick={handleClickPrevious}>
+      justify={"space-between"}
-          <BiLeftArrowAlt/>
+      bgColor={"purple.50"}
-        </IconButton>
+      height={500}
+      bgImage={images[currentIndex]}
+      bgSize={"contain"}
+      bgRepeat={"no-repeat"}
+      bgPosition={"center"}
+      width={"100%"}
+    >
+      <IconButton
+        aria-label="left-arrow"
+        borderRadius="full"
+        onClick={handleClickPrevious}
+      >
+        <BiLeftArrowAlt />
+      </IconButton>
 
-        <IconButton aria-label="left-arrow" borderRadius="full" onClick={handleClickNext}>
+      <IconButton
-          <BiRightArrowAlt/>
+        aria-label="left-arrow"
-        </IconButton>
+        borderRadius="full"
-      </Flex>
+        onClick={handleClickNext}
+      >
+        <BiRightArrowAlt />
+      </IconButton>
+    </Flex>
   );
 };
 

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

@@ -17,16 +17,21 @@ import PassionTagList from "@/components/layout/dashboard/card_user/PassionTagLi
 import { useState } from "react";
 import SearchFailCard from "./SearchFailCard";
 import LoadingPage from "@/components/LoadingPage";
-import {User} from '@prisma/client';
+import { User } from "@prisma/client";
 
 type Props = {
-  users: User[]
+  users: User[];
-  loggedUser: User
+  loggedUser: User;
-  setMatch: any
+  setMatch: any;
-  refetchLoggedUser: any
+  refetchLoggedUser: any;
-}
+};
 
-export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser}: Props) {
+export default function CardUser({
+  users,
+  loggedUser,
+  setMatch,
+  refetchLoggedUser,
+}: Props) {
   const toast = useToast({
     position: "top",
     duration: 2000,
@@ -174,7 +179,9 @@ export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser
           <Heading size={"sm"} fontWeight={"bold"} mb="0.5rem">
             A propos :
           </Heading>
-          <Text as="i">&quot;{listUsers[0].bio}&quot;</Text>
+          <Text as="i" fontWeight={"bold"}>
+            {listUsers[0].bio && `"${listUsers[0].bio}"`}
+          </Text>
         </Box>
 
         <Box>

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

@@ -32,11 +32,12 @@ export default function LeftPanel(props) {
       bg={"#faf9ff"}
     >
       <Flex direction={"column"} height={"100%"} margin={"10%"}>
-        <Box>
+        <Flex direction={"column"} align={"center"}>
           <Image
             src={user.images[0] ?? "/blank_profile_picture.webp"}
             objectFit={"contain"}
             borderRadius={"1rem"}
+            maxHeight={"50vh"}
           />
           <Box mt={"2rem"}>
             <Flex align={"center"} justifyContent="space-between" mb={"1rem"}>
@@ -52,29 +53,33 @@ export default function LeftPanel(props) {
               {user.bio && `"${user.bio}"`}
             </Text>
           </Box>
-        </Box>
+        </Flex>
         <Spacer />
         <Flex
           gap={2}
           direction={"column"}
           mt={"1vh"}
           spacing={3.5}
-          alignContent={"bottom"}>
+          alignContent={"bottom"}
+        >
           <LeftPanelButton
             leftIcon={<FaMapMarkedAlt />}
-            onClickHandler={() => router.push("/map")}>
+            onClickHandler={() => router.push("/map")}
+          >
             Carte
           </LeftPanelButton>
 
           <LeftPanelButton
             leftIcon={<BsFillPersonFill />}
-            onClickHandler={() => router.push("/profile")}>
+            onClickHandler={() => router.push("/profile")}
+          >
             Profil
           </LeftPanelButton>
           <LeftPanelButton
             variant={"outline"}
             leftIcon={<BiLogOut />}
-            onClickHandler={() => signOut({ callbackUrl: "/" })}>
+            onClickHandler={() => signOut({ callbackUrl: "/" })}
+          >
             Déconnexion
           </LeftPanelButton>
         </Flex>

src/components/layout/profile/ModalModifyImages.tsx

@@ -138,7 +138,7 @@ export default function ModalModifyImages(props) {
                 <GridItem key={index}>
                   <Flex
                     bg={"purple.100"}
-                    height={"95%"}
+                    height={"60vh"}
                     direction={"column"}
                     gap={"1rem"}
                     justifyContent={"space-between"}

src/pages/dashboard.tsx

@@ -3,32 +3,36 @@ import {
   GridItem,
   Box,
   useToast,
-  useDisclosure,
+  Card,
-  Card, CardBody, CardHeader, Heading,
+  CardBody,
-} from '@chakra-ui/react';
+  CardHeader,
-import {useSession} from 'next-auth/react';
+  Heading,
-import {useRouter} from 'next/router';
+} from "@chakra-ui/react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 
-import type {Session} from '@/models/auth/Session';
+import type { Session } from "@/models/auth/Session";
-import CardUser from '../components/layout/dashboard/card_user/CardUser';
+import CardUser from "../components/layout/dashboard/card_user/CardUser";
-import SearchFailCard
+import SearchFailCard from "../components/layout/dashboard/card_user/SearchFailCard";
-  from '../components/layout/dashboard/card_user/SearchFailCard';
 
-import LeftPanel from '../components/layout/dashboard/left_panel/LeftPanel';
+import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel";
-import ModalMatch
+import ModalMatch from "@/components/layout/dashboard/match_notification/ModalMatch";
-  from '@/components/layout/dashboard/match_notification/ModalMatch';
+import Head from "next/head";
-import Head from 'next/head';
+import { websiteName } from "@/lib/constants";
-import {websiteName} from '@/lib/constants';
+import { useQuery, useQueryClient } from "@tanstack/react-query";
-import {useQuery} from '@tanstack/react-query';
+import LoadingPage from "@/components/LoadingPage";
-import LoadingPage from '@/components/LoadingPage';
+import { Notification, NotificationType, User } from "@prisma/client";
-import {Notification, NotificationType, User} from '@prisma/client';
+import ChatList from "@/components/chat/ChatList";
-import ChatList from '@/components/chat/ChatList';
 
 export default function Dashboard() {
   const router = useRouter();
-  const toast = useToast({position: 'top', isClosable: true});
+  const toast = useToast({ position: "top", isClosable: true });
 
-  const {data: session, status} = useSession({required: true});
+  const { data: session, status } = useSession({ required: true });
+
+  const queryClient = useQueryClient();
+
+  queryClient.invalidateQueries({ queryKey: ["ListUsers"] });
 
   const {
     isLoading,
@@ -37,18 +41,18 @@ export default function Dashboard() {
     error,
     refetch: refetchLoggedUser,
   } = useQuery({
-    queryKey: ['LoggedUser'],
+    queryKey: ["LoggedUser"],
-    enabled: status === 'authenticated',
+    enabled: status === "authenticated",
     queryFn: async () => {
-      const {user} = session as unknown as Session;
+      const { user } = session as unknown as Session;
 
       return fetch(`/api/users/${user.id}?include=Notification`)
-          .then((res) => {
+        .then((res) => {
-            return res.json();
+          return res.json();
-          })
+        })
-          .catch((err) => {
+        .catch((err) => {
-            return err;
+          return err;
-          });
+        });
     },
   });
 
@@ -58,89 +62,104 @@ export default function Dashboard() {
     isLoading: isLoadingListUsers,
     error: errorListUsers,
   } = useQuery({
-    queryKey: ['ListUsers'],
+    queryKey: ["ListUsers"],
-    enabled: status === 'authenticated' && !isLoading,
+    enabled: status === "authenticated" && !isLoading,
     queryFn: async () => {
-      return fetch(
+      return fetch(`/api/user/userDashboard?userID=${loggedUser.id}`) //exclure les profils déjà like ou dislike
-          `/api/user/userDashboard?userID=${loggedUser.id}`) //exclure les profils déjà like ou dislike
+        .then((res) => res.json())
-          .then((res) => res.json())
+        .catch((err) => {
-          .catch((err) => {
+          return err;
-            return err;
+        });
-          });
     },
   });
 
   if (isLoading) {
-    if (status === 'unauthenticated') router.push('/login');
+    if (status === "unauthenticated") router.push("/login");
-    return <LoadingPage/>;
+    return <LoadingPage />;
   }
 
   if (isError) {
     toast({
       title: `Erreur lors de la récupération des données du profil`,
-      status: 'error',
+      status: "error",
-      position: 'top',
+      position: "top",
     });
-    if (status === 'unauthenticated') router.push('/');
+    if (status === "unauthenticated") router.push("/");
   }
 
   let modal;
 
   if (loggedUser?.Notification?.length > 0) {
     const matchNotification = loggedUser.Notification.filter(
-        (notif: Notification) =>
+      (notif: Notification) =>
-            notif.type === NotificationType.NEW_MATCH &&
+        notif.type === NotificationType.NEW_MATCH &&
-            notif.hasBeenConsulted === false,
+        notif.hasBeenConsulted === false
     );
     modal = matchNotification.map((notif: Notification) => {
       return (
-          <ModalMatch notif={notif} key={notif.id} loggedUser={loggedUser}/>
+        <ModalMatch notif={notif} key={notif.id} loggedUser={loggedUser} />
       );
     });
   }
 
-  if (status === 'loading') return <LoadingPage/>;
+  if (status === "loading") return <LoadingPage />;
   return (
-      <>
+    <>
-        {modal}
+      {modal}
 
-        <Head>
+      <Head>
-          <title>{websiteName} | Dashboard</title>
+        <title>{websiteName} | Dashboard</title>
-        </Head>
+      </Head>
 
-        <Grid templateColumns={'repeat(5, 1fr)'}
+      <Grid
-              templateRows={'repeat(2, 1fr)'}
+        templateColumns={"repeat(5, 1fr)"}
-              gap={5}
+        templateRows={"repeat(2, 1fr)"}
-              minH={'100vh'}>
+        gap={5}
-          <GridItem area={'1 / 1 / 3 / 2'}>
+        minH={"100vh"}
-            <LeftPanel user={loggedUser}/>
+      >
-          </GridItem>
+        <GridItem area={"1 / 1 / 3 / 2"}>
-          <GridItem area={'1 / 2 / 3 / 4'}>
+          <LeftPanel user={loggedUser} />
-            <Box py={3}>
+        </GridItem>
-              {isLoadingListUsers
+        <GridItem area={"1 / 2 / 3 / 4"}>
-               ? (<LoadingPage/>)
+          <Box py={3}>
-               : (isErrorListUsers || !listUsers || !listUsers.users ||
+            {isLoadingListUsers ? (
-                   listUsers.users.length === 0)
+              <LoadingPage />
-                ? <SearchFailCard/>
+            ) : isErrorListUsers ||
-                : <CardUser users={listUsers.users} loggedUser={loggedUser}
+              !listUsers ||
-                         refetchLoggedUser={refetchLoggedUser}/>
+              !listUsers.users ||
-              }
+              listUsers.users.length === 0 ? (
-            </Box>
+              <SearchFailCard />
-          </GridItem>
+            ) : (
-          <GridItem area={'1 / 4 / 2 / 6'}>
+              <CardUser
-            <Box py={3} pr={3}>
+                users={listUsers.users}
-              <Card w={"100%"} h={"100%"} borderRadius={"1rem"}>
+                loggedUser={loggedUser}
-                <CardHeader>
+                refetchLoggedUser={refetchLoggedUser}
-                  <Heading cursor={"pointer"} size='md' onClick={() => {router.push('/chat')}}>Conversations</Heading>
+              />
-                </CardHeader>
+            )}
-                <CardBody>
+          </Box>
-                  <ChatList user={session?.user as User}/>
+        </GridItem>
-                </CardBody>
+        <GridItem area={"1 / 4 / 2 / 6"}>
-              </Card>
+          <Box py={3} pr={3}>
-            </Box>
+            <Card w={"100%"} h={"100%"} borderRadius={"1rem"}>
-          </GridItem>
+              <CardHeader>
-          <GridItem area={'2 / 4 / 3 / 6'}>{/*Right Bottom*/}</GridItem>
+                <Heading
-        </Grid>
+                  cursor={"pointer"}
-      </>
+                  size="md"
+                  onClick={() => {
+                    router.push("/chat");
+                  }}
+                >
+                  Conversations
+                </Heading>
+              </CardHeader>
+              <CardBody>
+                <ChatList user={session?.user as User} />
+              </CardBody>
+            </Card>
+          </Box>
+        </GridItem>
+        <GridItem area={"2 / 4 / 3 / 6"}>{/*Right Bottom*/}</GridItem>
+      </Grid>
+    </>
   );
 }

src/pages/map.tsx

@@ -56,7 +56,9 @@ export default function Map() {
   } = useQuery({
     queryKey: ["listBars"],
     refetchOnWindowFocus: false,
-    enabled: Boolean(loggedUser) && loggedUser.location.length > 0,
+    enabled:
+      Boolean(loggedUser) &&
+      (loggedUser.location?.length > 0 || location[0] !== null),
     queryFn: async () => {
       ///Utiliser api de noratim
 

src/pages/profile.tsx

@@ -30,7 +30,7 @@ import CustomSlider from "@/components/layout/profile/CustomSlider";
 
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 
 export default function UserProfile() {
   const router = useRouter();
@@ -45,6 +45,8 @@ export default function UserProfile() {
   const [showTooltipDistance, setShowTooltipDistance] = useState(false);
   const [sliderDistanceValue, setSliderDistanceValue] = useState<number>(0);
 
+  const queryClient = useQueryClient();
+
   const {
     handleSubmit,
     control,
@@ -147,6 +149,7 @@ export default function UserProfile() {
             status: "success",
             isClosable: true,
           });
+          queryClient.invalidateQueries({ queryKey: ["user"] });
         })
         .catch((err) => {
           setCurrentlyLoading(false);