Merge branch 'dev' of github.com:LucasVbr/projet-web4 into dev

src/components/Carousel.tsx

@@ -23,7 +23,7 @@ const Carousel = ({images, borderRadius: bRadius}: Props) => {
   return (
       <Flex px={2} align="center" borderRadius={bRadius} overflow={'hidden'}
             justify={'space-between'} bgColor={'purple.50'} height={500}
-            bgImage={images[currentIndex]} bgSize={'contain'}
+            bgImage={images[currentIndex]} bgSize={'cover'}
             bgRepeat={'no-repeat'} bgPosition={'center'} width={'100%'}>
         <IconButton aria-label="left-arrow" borderRadius="full"
                     onClick={handleClickPrevious}>

src/components/chat/ChatList.tsx

@@ -1,6 +1,7 @@
 import {Chat, User} from '@prisma/client';
 import ChatListItem from '@/components/chat/ChatListItem';
 import {useEffect, useState} from 'react';
+import {Stack, StackDivider} from '@chakra-ui/react';
 
 type Props = {
   user: User
@@ -18,11 +19,11 @@ export default function ChatList({user}: Props) {
   }, []);
 
   return (
-      <>
+      <Stack divider={<StackDivider/>} spacing={2}>
         {chats.map(
             (chat: Chat & { User: User[] }, index: number) =>
                 <ChatListItem key={index} chat={chat} user={user}/>)
         }
-      </>
+      </Stack>
   );
 }

src/components/chat/ChatListItem.tsx

@@ -1,5 +1,5 @@
 import {Chat, User} from '@prisma/client';
-import {Box, Flex, Image, Text} from '@chakra-ui/react';
+import {Box, Button, Flex, Image, Text} from '@chakra-ui/react';
 import {useRouter} from 'next/router';
 
 type Props = {
@@ -9,18 +9,16 @@ type Props = {
 
 export default function ChatListItem({user, chat}: Props) {
   const router = useRouter();
-  const otherUser = chat.User.find((u: User) => u.id !== user.id) as User
+  const otherUser = chat.User.find((u: User) => u.id !== user.id) as User;
 
   console.log(chat);
 
   return (
-      <>
-        <Flex cursor={"pointer"} onClick={() => router.push(`/chat/${chat.id}`)}>
-          <Image borderRadius={'full'} boxSize='50px' src={otherUser.images[0] ?? "/blank_profile_picture.webp"}/>
+      <Flex alignItems={"center"} gap={5} cursor={'pointer'} onClick={() => router.push(`/chat/${chat.id}`)}>
+        <Image borderRadius={'full'} boxSize="50px" src={otherUser.images[0] ?? '/blank_profile_picture.webp'}/>
         <Box>
           <Text>{otherUser.firstName} {otherUser.lastName}</Text>
         </Box>
       </Flex>
-      </>
   );
 }

src/components/chat/MessageList.tsx

@@ -1,6 +1,6 @@
 import type {Message as MessageType, User} from '@prisma/client';
 import Message from '@/components/chat/Message';
-import {Flex} from '@chakra-ui/react';
+import {Flex, Box} from '@chakra-ui/react';
 
 type Props = {
   user: User,
@@ -9,12 +9,14 @@ type Props = {
 
 const MessageList = ({messages, user}: Props) => {
   return (
-      <Flex direction={'column'} gap={1}>
+      <Box w={'70vh'} overflow={'scroll'}>
+        <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
           {messages.map((message, index) => <Message
               align={user.id === message.UserID ? 'right' : 'left'} key={index}
-            message={message}/>
+              message={message}/>,
           )}
         </Flex>
+      </Box>
   );
 };
 

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

@@ -17,13 +17,16 @@ 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';
 
-export default function CardUser({
-  users,
-  loggedUser,
-  setMatch,
-  refetchLoggedUser,
-}) {
+type Props = {
+  users: User[]
+  loggedUser: User
+  setMatch: any
+  refetchLoggedUser: any
+}
+
+export default function CardUser({users, loggedUser, setMatch, refetchLoggedUser}: Props) {
   const toast = useToast({
     position: "top",
     duration: 2000,

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

@@ -68,13 +68,6 @@ export default function LeftPanel(props) {
             Carte
           </LeftPanelButton>
 
-          <LeftPanelButton
-            leftIcon={<AiFillMessage />}
-            onClickHandler={() => router.push("/chat")}
-          >
-            Messages
-          </LeftPanelButton>
-
           <LeftPanelButton
             leftIcon={<BsFillPersonFill />}
             onClickHandler={() => router.push("/profile")}

src/pages/chat/[id].tsx

@@ -1,15 +1,16 @@
-import {Button, Container, Flex, Input} from '@chakra-ui/react';
+import {Button, Container, Flex, FormControl, Input} from '@chakra-ui/react';
 import Head from 'next/head';
 import {websiteName} from '@/lib/constants';
 import {useSession} from 'next-auth/react';
 import {useRouter} from 'next/router';
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 
 import MessageList from '@/components/chat/MessageList';
 
 import {io, Socket} from 'socket.io-client';
 import {Message, User} from '@prisma/client';
 import LoadingPage from '@/components/LoadingPage';
+import Navbar from '@/components/Navbar';
 
 export default function ChatId() {
   const router = useRouter();
@@ -30,33 +31,51 @@ export default function ChatId() {
           const soc = io();
 
           soc.on('connect', () => console.log('connected'));
-          soc.on('allOldMessages', (allOldMessages: Message[]) => setMessages(allOldMessages));
-          soc.on('newIncomingMessage', (newIncomingMessage: Message) => setMessages(messages => [...messages, newIncomingMessage]));
+          soc.on('allOldMessages',
+              (allOldMessages: Message[]) => setMessages(allOldMessages));
+          soc.on('newIncomingMessage',
+              (newIncomingMessage: Message) => setMessages(
+                  messages => [...messages, newIncomingMessage]));
           setSocket(soc);
         });
   };
 
-  const handleSubmit = () => {
+  const handleSubmit = (evt) => {
+    evt.preventDefault()
     if (text !== '' && socket && session?.user) {
       socket.emit('createdMessage', {text, sender: session.user.id});
       setText('');
     }
   };
 
+  const AlwaysScrollToBottom = () => {
+    const elementRef = useRef();
+    useEffect(() => elementRef.current.scrollIntoView());
+    return <div ref={elementRef}/>;
+  };
+
   if (status === 'loading') return <LoadingPage/>;
   return (
       <>
         <Head><title>{websiteName}</title></Head>
 
+        <Navbar/>
+
         <Container>
           <MessageList user={session.user as User} messages={messages}/>
 
-          <Flex gap={5} mt={5}>
-            <Input type={'text'} colorScheme={'purple'}
-                   onChange={evt => setText(evt.target.value)} value={text}/>
-            <Button colorScheme={'purple'}
-                    onClick={handleSubmit}>Envoyer</Button>
+
+          <form onSubmit={handleSubmit}>
+            <FormControl>
+              <Flex gap={5} py={5}>
+                <Input type={'text'}
+                       onChange={evt => setText(evt.target.value)}
+                       value={text}/>
+                <Button type={'submit'} colorScheme={'purple'}>Envoyer</Button>
               </Flex>
+            </FormControl>
+          </form>
+          <AlwaysScrollToBottom/>
         </Container>
       </>
   );

src/pages/chat/index.tsx

@@ -7,8 +7,5 @@ export default function Chat() {
   const {data: session, status} = useSession({required: true});
 
   if (status === 'loading') return <LoadingPage/>;
-  if (session)
-    return (
-        <ChatList user={session.user as User}/>
-    );
+  return <ChatList user={session.user as User}/>;
 }

src/pages/dashboard.tsx

@@ -1,25 +1,34 @@
-import { Grid, GridItem, Box, useToast, useDisclosure } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
-import { useRouter } from "next/router";
-import { useState } from "react";
+import {
+  Grid,
+  GridItem,
+  Box,
+  useToast,
+  useDisclosure,
+  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 } from "@prisma/client";
+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';
 
 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();
+  const {data: session, status} = useSession({required: true});
 
   const {
     isLoading,
@@ -28,8 +37,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;
 
@@ -49,10 +58,11 @@ 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;
@@ -61,17 +71,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;
@@ -80,7 +90,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 (
@@ -89,6 +99,7 @@ export default function Dashboard() {
     });
   }
 
+  if (status === 'loading') return <LoadingPage/>;
   return (
       <>
         {modal}
@@ -97,35 +108,38 @@ 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 === undefined ||
-              listUsers.users === undefined ||
-              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"}>{/*Right top*/}</GridItem>
-        <GridItem area={"2 / 4 / 3 / 6"}>{/*Right Bottom*/}</GridItem>
+          <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>
+                </CardHeader>
+                <CardBody>
+                  <ChatList user={session?.user as User}/>
+                </CardBody>
+              </Card>
+            </Box>
+          </GridItem>
+          <GridItem area={'2 / 4 / 3 / 6'}>{/*Right Bottom*/}</GridItem>
         </Grid>
       </>
   );