Add picture in chat and button to dashboard

Took 28 minutes

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" }}
-      >
+          center={[Number(lat), Number(lon)]}
+          zoom={13}
+          minZoom={6}
+          zoomControl={false}
+          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'
+            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} />
+        <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) => (
-    <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
-      {messages.map((message, index) => <Message
-          align={user.id === message.UserID ? 'right' : 'left'} key={index}
-          message={message}/>,
-      )}
-    </Flex>
-);
+const MessageList = ({messages, user, chat}: Props) => {
+  if (chat?.User)
+    return (
+        <Flex direction={'column'} gap={1} justifyContent={'flex-end'}>
+          {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/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>
   );
 }