Merge remote-tracking branch 'origin/dev' into dev

# Conflicts:
#	src/pages/graphique.tsx
#	src/pages/map.tsx

src/components/Carousel.tsx

@@ -1,6 +1,6 @@
-import {useState} from 'react';
-import {Flex, IconButton} from '@chakra-ui/react';
-import {BiLeftArrowAlt, BiRightArrowAlt} from 'react-icons/bi';
+import { useState } from "react";
+import { Flex, IconButton } from "@chakra-ui/react";
+import { BiLeftArrowAlt, BiRightArrowAlt } from "react-icons/bi";
 
 interface Props {
   images: string[];
@@ -18,19 +18,36 @@ 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'}
-            justify={'space-between'} bgColor={'purple.50'} height={500}
-            bgImage={images[currentIndex]} bgSize={'cover'}
-            bgRepeat={'no-repeat'} bgPosition={'center'} width={'100%'}>
-        <IconButton aria-label="left-arrow" borderRadius="full"
-                    onClick={handleClickPrevious}>
+    <Flex
+      px={2}
+      align="center"
+      borderRadius={bRadius}
+      overflow={"hidden"}
+      justify={"space-between"}
+      bgColor={"purple.50"}
+      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
+        aria-label="left-arrow"
+        borderRadius="full"
+        onClick={handleClickNext}
+      >
         <BiRightArrowAlt />
       </IconButton>
     </Flex>

src/components/chat/MapBar.tsx

@@ -1,31 +1,28 @@
-import { Flex } from "@chakra-ui/react";
-import { MapContainer, TileLayer } from "react-leaflet";
-import SimpleMarkerBar from "./SimpleMarkerBar";
-import "leaflet/dist/leaflet.css";
+import {Flex} from '@chakra-ui/react';
+import {MapContainer, TileLayer} from 'react-leaflet';
+import SimpleMarkerBar from './SimpleMarkerBar';
+import 'leaflet/dist/leaflet.css';
 
 type MapBarProps = {
   lat: string;
   lon: string;
   name: string;
-  align: "left" | "right";
+  align: 'left' | 'right';
 };
 
-export default function MapBar({ lat, lon, name, align }: MapBarProps) {
+export default function MapBar({lat, lon, name}: MapBarProps) {
   return (
-    <Flex justifyContent={align}>
       <MapContainer
           center={[Number(lat), Number(lon)]}
           zoom={13}
           minZoom={6}
           zoomControl={false}
-        style={{ width: "100%", height: "20rem" }}
-      >
+          style={{width: '100%', height: '20rem'}}>
         <TileLayer
             url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
             attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         />
         <SimpleMarkerBar lat={lat} lon={lon} name={name}/>
       </MapContainer>
-    </Flex>
   );
 }

src/components/chat/Message.tsx

@@ -1,4 +1,4 @@
-import type {Message as MessageType} from '@prisma/client';
+import type {Message as MessageType, User} from '@prisma/client';
 import MessageText from '@/components/chat/MessageText';
 import React from 'react';
 import MessageMap from '@/components/chat/MessageMap';
@@ -6,9 +6,10 @@ import MessageMap from '@/components/chat/MessageMap';
 type Props = {
   align: "left" | 'right'
   message: MessageType
+  user?: User
 }
 
-const Message = ({message, align}: Props) => {
+const Message = ({message, align, user}: Props) => {
   if (message.text.match(/<!.+>/g)) {
     const regex = /<!lon=(?<lon>-?\d+\.\d+),lat=(?<lat>-?\d+\.\d+),name=(?<name>.+)>/g;
     const p = regex.exec(message.text)?.groups as unknown as {
@@ -16,12 +17,10 @@ const Message = ({message, align}: Props) => {
       lat: number
       name: string
     }
-    if (p) return <MessageMap align={align} point={p}/>
+    if (p) return <MessageMap user={user} align={align} point={p}/>
   }
 
-  return (
-      <MessageText message={message} align={align} />
-  )
+  return <MessageText user={user} message={message} align={align} />
 }
 
 export default Message;

src/components/chat/MessageList.tsx

@@ -1,19 +1,24 @@
-import type {Message as MessageType, User} from '@prisma/client';
+import type {Message as MessageType, User, Chat} from '@prisma/client';
 import Message from '@/components/chat/Message';
 import {Flex} from '@chakra-ui/react';
 
 type Props = {
   user: User,
   messages: MessageType[]
+  chat: Chat & { User: User[] }
 }
 
-const MessageList = ({messages, user}: Props) => (
+const MessageList = ({messages, user, chat}: Props) => {
+  if (chat?.User)
+    return (
         <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
-      {messages.map((message, index) => <Message
-          align={user.id === message.UserID ? 'right' : 'left'} key={index}
-          message={message}/>,
+          {messages.map((message, index) =>
+              <Message user={chat.User.find(u => u.id === message.UserID)}
+                       align={user.id === message.UserID ? 'right' : 'left'}
+                       key={index} message={message}/>,
           )}
         </Flex>
     );
+};
 
 export default MessageList;

src/components/chat/MessageMap.tsx

@@ -1,6 +1,7 @@
-import {Box, Flex, Text} from '@chakra-ui/react';
+import {Avatar, Box, Flex, Text} from '@chakra-ui/react';
 
 import dynamic from 'next/dynamic';
+import {User} from '@prisma/client';
 
 const MapBarWithNoSSR = dynamic(() => import('./MapBar'), {
   ssr: false,
@@ -13,16 +14,18 @@ type Props = {
     lat: string;
     name: string;
   };
+  user?: User
 };
 
-export default function MessageMap({align, point}: Props) {
+export default function MessageMap({align, point, user}: Props) {
   const {lon, lat, name} = point;
   return (
-      <Flex justifyContent={align}>
+      <Flex justifyContent={align} gap={2}>
+        {user && align === "left" && <Avatar src={`/${user.images[0]}`} name={`${user.firstName} ${user.lastName}`}/>}
         <Box w={'50%'} bg={'purple.500'} borderRadius={10} p={2}>
           <MapBarWithNoSSR lon={lon} lat={lat} name={name}/>
-          {/*<Text align={align}>{lon}, {lat}, {name}</Text>*/}
         </Box>
+        {user && align === "right" && <Avatar src={`/${user.images[0]}`} name={`${user.firstName} ${user.lastName}`}/>}
       </Flex>
   );
 }

src/components/chat/MessageText.tsx

@@ -1,17 +1,21 @@
-import {Flex, Text} from '@chakra-ui/react';
+import {Avatar, Flex, Text} from '@chakra-ui/react';
 import type {Message as MessageType, User} from '@prisma/client';
 
 type Props = {
   align: 'left' | 'right'
-  message: MessageType
+  message: MessageType,
+  user?: User
 }
 
-const MessageText = ({message, align}: Props) => (
-    <Flex justifyContent={align}>
+const MessageText = ({message, align, user}: Props) => (
+
+    <Flex justifyContent={align} gap={2}>
+      {user && align === "left" && <Avatar src={`/${user.images[0]}`} name={`${user.firstName} ${user.lastName}`}/>}
       <Text maxW={'70%'} w={'fit-content'} bg={'purple.500'} borderRadius={10}
             color={'white'} px={'10px'} py={'5px'}>
         {message.text}
       </Text>
+      {user && align === "right" && <Avatar src={`/${user.images[0]}`} name={`${user.firstName} ${user.lastName}`}/>}
     </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[]
-  loggedUser: User
-  setMatch: any
-  refetchLoggedUser: any
-}
+  users: User[];
+  loggedUser: User;
+  setMatch: 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

@@ -33,11 +33,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"}>
@@ -53,23 +54,26 @@ 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>
 
@@ -82,7 +86,8 @@ export default function LeftPanel(props) {
           <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/admin/settings.tsx

@@ -1,6 +1,6 @@
 import {
   Box,
-  Button,
+  Button, Container,
   FormControl,
   FormErrorMessage,
   FormLabel,
@@ -60,7 +60,7 @@ export default function settings() {
     };
 
     return (
-        <>
+        <Container>
           <Box as="form" id="form_passion" width={'80%'}
                onSubmit={handleSubmit(savePassion)}>
             <FormControl isInvalid={errors.name as boolean | undefined}>
@@ -77,7 +77,7 @@ export default function settings() {
               Submit
             </Button>
           </Box>
-        </>
+        </Container>
     );
   }
 }

src/pages/chat/[id].tsx

@@ -1,11 +1,10 @@
 import {
-  Box,
+  Box, Button,
   Container,
   Flex,
   FormControl,
   IconButton,
   Input,
-  Text
 } from '@chakra-ui/react';
 import Head from 'next/head';
 import {websiteName} from '@/lib/constants';
@@ -19,7 +18,8 @@ import {io, Socket} from 'socket.io-client';
 import {Chat, Message, User} from '@prisma/client';
 import LoadingPage from '@/components/LoadingPage';
 import Navbar from '@/components/Navbar';
-import {ArrowForwardIcon, CalendarIcon} from '@chakra-ui/icons';
+
+import {ArrowForwardIcon} from '@chakra-ui/icons';
 import {FaMapMarkedAlt} from 'react-icons/fa';
 
 export default function ChatId() {
@@ -84,8 +84,8 @@ export default function ChatId() {
 
         <Navbar/>
 
-        <Container pt={20} bgColor={'white'}>
-          <MessageList user={session.user as User} messages={messages}/>
+        <Container maxW={'container.md'} pt={20} bgColor={'white'}>
+          <MessageList chat={chatInfo} user={session.user as User} messages={messages}/>
 
           <form onSubmit={handleSubmit}>
             <FormControl>
@@ -103,6 +103,8 @@ export default function ChatId() {
           </form>
           <AlwaysScrollToBottom/>
         </Container>
+
+        <Button m={3} position={'fixed'} bottom={0} onClick={() => router.push("/dashboard")}>Tableau de bord</Button>
       </Box>
   );
 }

src/pages/dashboard.tsx

@@ -3,33 +3,37 @@ import {
   GridItem,
   Box,
   useToast,
-  useDisclosure,
-  Card, CardBody, CardHeader, Heading,
-} from '@chakra-ui/react';
-import {useSession} from 'next-auth/react';
-import {useRouter} from 'next/router';
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+} from "@chakra-ui/react";
+import { useSession } from "next-auth/react";
+import { useRouter } from "next/router";
 
-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 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 ModalMatch
-  from '@/components/layout/dashboard/match_notification/ModalMatch';
-import Head from 'next/head';
-import {websiteName} from '@/lib/constants';
-import {useQuery} from '@tanstack/react-query';
-import LoadingPage from '@/components/LoadingPage';
-import {Notification, NotificationType, User} from '@prisma/client';
-import ChatList from '@/components/chat/ChatList';
+import LeftPanel from "../components/layout/dashboard/left_panel/LeftPanel";
+import ModalMatch from "@/components/layout/dashboard/match_notification/ModalMatch";
+import Head from "next/head";
+import { websiteName } from "@/lib/constants";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import LoadingPage from "@/components/LoadingPage";
+import { Notification, NotificationType, User } from "@prisma/client";
+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 queryClient = useQueryClient();
+
+  queryClient.invalidateQueries({ queryKey: ["ListUsers"] });
+
   const {
     isLoading,
     isError,
@@ -37,8 +41,8 @@ export default function Dashboard() {
     error,
     refetch: refetchLoggedUser,
   } = useQuery({
-    queryKey: ['LoggedUser'],
-    enabled: status === 'authenticated',
+    queryKey: ["LoggedUser"],
+    enabled: status === "authenticated",
     queryFn: async () => {
       const { user } = session as unknown as Session;
 
@@ -58,11 +62,10 @@ export default function Dashboard() {
     isLoading: isLoadingListUsers,
     error: errorListUsers,
   } = useQuery({
-    queryKey: ['ListUsers'],
-    enabled: status === 'authenticated' && !isLoading,
+    queryKey: ["ListUsers"],
+    enabled: status === "authenticated" && !isLoading,
     queryFn: async () => {
-      return fetch(
-          `/api/user/userDashboard?userID=${loggedUser.id}`) //exclure les profils déjà like ou dislike
+      return fetch(`/api/user/userDashboard?userID=${loggedUser.id}`) //exclure les profils déjà like ou dislike
         .then((res) => res.json())
         .catch((err) => {
           return err;
@@ -71,17 +74,17 @@ export default function Dashboard() {
   });
 
   if (isLoading) {
-    if (status === 'unauthenticated') router.push('/login');
+    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',
+      status: "error",
+      position: "top",
     });
-    if (status === 'unauthenticated') router.push('/');
+    if (status === "unauthenticated") router.push("/");
   }
 
   let modal;
@@ -90,7 +93,7 @@ export default function Dashboard() {
     const matchNotification = loggedUser.Notification.filter(
       (notif: Notification) =>
         notif.type === NotificationType.NEW_MATCH &&
-            notif.hasBeenConsulted === false,
+        notif.hasBeenConsulted === false
     );
     modal = matchNotification.map((notif: Notification) => {
       return (
@@ -99,7 +102,7 @@ export default function Dashboard() {
     });
   }
 
-  if (status === 'loading') return <LoadingPage/>;
+  if (status === "loading") return <LoadingPage />;
   return (
     <>
       {modal}
@@ -108,30 +111,46 @@ export default function Dashboard() {
         <title>{websiteName} | Dashboard</title>
       </Head>
 
-        <Grid templateColumns={'repeat(5, 1fr)'}
-              templateRows={'repeat(2, 1fr)'}
+      <Grid
+        templateColumns={"repeat(5, 1fr)"}
+        templateRows={"repeat(2, 1fr)"}
         gap={5}
-              minH={'100vh'}>
-          <GridItem area={'1 / 1 / 3 / 2'}>
+        minH={"100vh"}
+      >
+        <GridItem area={"1 / 1 / 3 / 2"}>
           <LeftPanel user={loggedUser} />
         </GridItem>
-          <GridItem area={'1 / 2 / 3 / 4'}>
+        <GridItem area={"1 / 2 / 3 / 4"}>
           <Box py={3}>
-              {isLoadingListUsers
-               ? (<LoadingPage/>)
-               : (isErrorListUsers || !listUsers || !listUsers.users ||
-                   listUsers.users.length === 0)
-                ? <SearchFailCard/>
-                : <CardUser users={listUsers.users} loggedUser={loggedUser}
-                         refetchLoggedUser={refetchLoggedUser}/>
-              }
+            {isLoadingListUsers ? (
+              <LoadingPage />
+            ) : isErrorListUsers ||
+              !listUsers ||
+              !listUsers.users ||
+              listUsers.users.length === 0 ? (
+              <SearchFailCard />
+            ) : (
+              <CardUser
+                users={listUsers.users}
+                loggedUser={loggedUser}
+                refetchLoggedUser={refetchLoggedUser}
+              />
+            )}
           </Box>
         </GridItem>
-          <GridItem area={'1 / 4 / 2 / 6'}>
+        <GridItem area={"1 / 4 / 2 / 6"}>
           <Box py={3} pr={3}>
             <Card w={"100%"} h={"100%"} borderRadius={"1rem"}>
               <CardHeader>
-                  <Heading cursor={"pointer"} size='md' onClick={() => {router.push('/chat')}}>Conversations</Heading>
+                <Heading
+                  cursor={"pointer"}
+                  size="md"
+                  onClick={() => {
+                    router.push("/chat");
+                  }}
+                >
+                  Conversations
+                </Heading>
               </CardHeader>
               <CardBody>
                 <ChatList user={session?.user as User} />
@@ -139,7 +158,7 @@ export default function Dashboard() {
             </Card>
           </Box>
         </GridItem>
-          <GridItem area={'2 / 4 / 3 / 6'}>{/*Right Bottom*/}</GridItem>
+        <GridItem area={"2 / 4 / 3 / 6"}>{/*Right Bottom*/}</GridItem>
       </Grid>
     </>
   );

src/pages/map.tsx

@@ -37,7 +37,7 @@ export default function Map() {
     enabled: status === "authenticated",
     queryFn: async () => {
       const { user } = session as unknown as Session;
-      console.log(loggedUser.location.length);
+
       return fetch(`/api/users/${user.id}`)
         .then((res) => {
           return res.json();
@@ -56,8 +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);